Ты начинаешь путь в программировании: пишешь первые строчки кода, пытаешься перенести их на сайт. Важен прогресс — понимать, что ты делаешь и как устроен мир программирования. Работает то, что написали во время урока?
Чтобы писать код, нужны инструменты. Как в 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 нет после установки программы. Чтобы установить расширение, следуем алгоритму:
-
Открываем панель Tools-Command Palette (или CTRL+SHIFT+P).
-
Вводим Install Package Control.
-
Через Command Palette вводим Install Package.
-
Откроется панель, где ищем нужное расширение. Для примера взяли Emmet.
Что выбрать?
Часто новички устанавливают кучу редакторов кода. Еще IDE и другие ненужные на старте вещи. На это тратится время. А человек прыгает от одного к другому в поисках лучшего варианта.
Но сила новичка — не в инструменте. А в умении применять знания на практике.
Начните с VS Code. Редактор подходит для всех популярных языков и платформ. Пока пишете, вам автоматически подсвечивает синтаксис и ошибки. А со встроенным Emmet дополните код, если забыли часть или правильное написание.
Как работать с VS Code, рассказываем на курсе Компьютерной Академии IT STEP — «Front-end-разработка». Присоединяйтесь.