Редактор кода: что выбрать новичку, чтобы писать и видеть результаты

Ты начинаешь путь в программировании: пишешь первые строчки кода, пытаешься перенести их на сайт. Важен прогресс — понимать, что ты делаешь и как устроен мир программирования. Работает то, что написали во время урока? 

Чтобы писать код, нужны инструменты. Как в Word мы пишем текст, так и для программирования придумали редактор. Существует два варианта, где вы сможете писать: редактор кода и IDE.

Редактор кода — как текстовый редактор. Создаем файл, называем его и пишем. Для теста и отладки кода нужны расширения. Они устанавливаются отдельно.

IDE — интегрированная среда разработки. Это программа, где программист пишет код, видит ошибки и наблюдает за результатом. Если редактор — ключ, то IDE — чемодан с ключами, гайками и скотчем.

Почему IDE — не лучший выбор

Новичок скажет: «Зачем редактор кода для программистов? Мне хватит IDE.» И будет прав — больше инструментов и возможностей хотят все. Но в IDE есть минимум 3 фактора, которые замедлят обучение.

IDE частично исправляет ошибки. Если вы забыли поставить точку с запятой в строке, то программа автоматически дополнит ее. Это хорошо — ваш код работает. Но и плохо — вы не заметите ошибку и будете допускать ее постоянно. 

Меньше возможностей анализировать код. Одна из функций — автозавершение кода. Если вы учитесь программированию, ту лучше додумывать самому, нежели пользоваться шпаргалками без тщательного анализа. 

IDE не подойдут для веб-разработки или статических сайтов. В них много инструментов, которые замедляют работу новичка. Это как установить на игру 200 модов, а потом разгребать: что и куда нужно. В редакторе кода все проще.

Если хотите научиться программировать — выберите один из трех редакторов кода. А когда опыт перевесит новые знания — переходите на IDE.

Топ редакторов кода от Stack Overflow: статистика 2022 года

Visual Studio Code

Один из самых популярных редакторов кода среди начинающих и профессионалов. Программа с открытым исходным кодом, доступна на всех платформах. Скачать можно с официального сайта. 

VS Code работает почти со всеми существующими языками программирования. Если в списке коробочной версии какого-то не хватает — скачайте плагин. 

Что умеет VS Code.

Умное автодополнение. Редактор анализирует, что вы хотите написать, и предлагает закончить команду вместо вас. А еще показать подсказки и объяснения. Пригодится, если забыли переменную или название команды из урока.

Мультикурсор, множественное выделение и поиск. С первой функцией можно менять значения на нескольких одинаковых строках. Вторая помогает найти все одинаковые слова или команды. Редактировать проще, а менять переменные — быстрее.

Базовая разметка HTML-документа. В Visual Studio Code добавлена функция Emmet. Допустим, вам нужно написать файл в HTML. Вместо прописывания стандартных для всех файлов тегов (title, head, body), достаточно написать (!) и нажать Enter. Редактор автоматически подставить шаблон HTML.

Запомните об Emmet. Пригодится при анализе следующих редакторов.

Поиск по коду. В большой программе легко потеряться — сложно вспомнить, что писал в начале. VS Code показывает функции, описание переменной или другие параметры. Это полезно и когда анализируешь чужой код — какой кусок за что отвечает.

Как тестировать результаты. Редактор кода не умеет показывать результаты работы. Для этого нужно скачать расширение Live HTML Previewer. Находится в разделе «Extensions». Чтобы попасть в раздел, жмем Ctrl+Shift+X или на последний значок панели управления слева.

После установки и запуска плагина можно просмотреть, как HTML и CSS отображаются на странице. Удобно, если вы искали редактор кода для веб-разработки.

Atom

Бесплатный редактор от GitHub и Microsoft. Фишка программы в GitHub — у Atom встроенная интеграция с git-репозиториями. Для новичка это мало что говорит. Но для опытного программиста это 2 параметра. 

Система контроля версий. В репозиторие хранятся все записи кода: как старые, так и новые. Если в последнем обновлении программа не работает, можно откатиться к предыдущей. Найти ошибку и выпустить новое.

Совместная работа. Присоедините к репозиторию несколько разработчиков: они смогут вместе с вами работать над кодом и наблюдать за изменением версий. Для новичка эта функция важнее чем первая. Например, когда человек работает с ментором. Тот может проверить ошибки и улучшить код с другого ПК.

Скачать программу можно с официального сайта.

Редактор работает на всех доступных платформах.

Другие возможности Atom.

Автозаполнение кода. Нет в коробочной версии. Чтобы добавить функцию, нужно скачать расширение Autocomplete ++. Все расширения доступны в настройках редактора: File-Settings-Packages.

Базовая разметка и дозаполнение строк кода (Emmet). Тоже нужно скачивать расширение.

Возможность самостоятельно написать расширение. Atom написан на HTML, CSS и JavaScript. Если вы достаточно опытный программист, знаете CSS и чего-то не хватает в редакторе — можно написать расширение. 

Предпросмотр результатов. Расширение MarkDown Review.

Карта кода — если забыли начало. Расширение minimap.

Вывод: Atom — гибкий редактор кода. Если вы знаете все расширения, которые понадобятся новичку — редактор подойдет вместо Visual Studio Code.

Примечание: у Atom нет пакетов интерфейса на русском.

Sublime Text 3

Редактор для готовых бороться с уведомлениями и не платить $99 за премиум. Функции доступны и в бесплатной версии. Но при каждом сохранении файла программа назойливо пытается продать платную. 

Sublime Text — конкурент Visual Studio Code. Одинаково быстро обрабатывает HTML-страничку или программу в тысячу строк кода. После установки подсвечивает синтаксис всех доступных языков программирования, дополняет код и закрывает теги.

Скачать программу с официального сайта.

Если в программе нужен русский язык или Emmet — нужно скачивать расширения.

Другие особенности Sublime Text 3.

Разделение рабочего окна.  Вам часто придется писать код в нескольких языках. Например, одновременно работать в редакторе на JS, HTML и CSS. В Sublime Text можно разделить экран на несколько блоков и одновременно писать код для разных языков. 

Для этого заходим в View-Layouts. Выбираем количество колонок.

Умный поиск. Представим, что мы написали код на 150 строк. В 10 из них одинаковая переменная — допустим, Ольга. Нам нужно найти переменную и заменить Ольгу на другое значение.

В Sublime Text заходим в Find. Пишем название и кликаем Find All. Программа подсветит все значения и разрешит менять. Все сразу.

Проблема для новичков в Sublime Text 3 — установка плагинов. Настройки Packages нет после установки программы. Чтобы установить расширение, следуем алгоритму:

1. Открываем панель Tools-Command Palette (или CTRL+SHIFT+P).

2. Вводим Install Package Control.

3. Через Command Palette вводим Install Package.

4. Откроется панель, где ищем нужное расширение. Для примера взяли Emmet.

Что выбрать?

Часто новички устанавливают кучу редакторов кода. Еще IDE и другие ненужные на старте вещи. На это тратится время. А человек прыгает от одного к другому в поисках лучшего варианта.

Но сила новичка — не в инструменте. А в умении применять знания на практике.

Начните с VS Code. Редактор подходит для всех популярных языков и платформ. Пока пишете, вам автоматически подсвечивает синтаксис и ошибки. А со встроенным Emmet дополните код, если забыли часть или правильное написание.

Как работать с VS Code, рассказываем на курсе Компьютерной Академии IT STEP — «Front-end-разработка». Присоединяйтесь.