Компьютерная Академия IT STEP - полноценное IT-образование‎ для взрослых и детей. Мы обучаем с 1999 года. Авторские методики, преподаватели-практики, 100% практических занятий.

Ваш браузер устарел!

Вы пользуетесь устаревшим браузером Internet Explorer. Данная версия браузера не поддерживает многие современные технологии, из-за чего многие страницы сайта отображаются некорректно, и могут работать не все функции. Рекомендуем просматривать сайт с помощью актуальных версий браузеров Google Chrome, Safari, Mozilla Firefox, Opera, Microsoft Edge

ШАГ логотип

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

IT STEP

Программирование

11.11.2022

158 просмотров

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

Чтобы писать код, нужны инструменты. Как в 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-разработка». Присоединяйтесь.



АВТОР:

IT STEP

Редакция IT STEP

Графика и дизайн

Как создать инфографику для сайта или соцсетей

Инфографики проще представляют информацию: отчёт для коллег и руководителя, тезисы статьи для аудитории или рекламное предложение — в таргете или другой рекламе.

Инфографики проще представляют информацию: отчёт для коллег и руководителя, тезисы статьи для аудитории или рекламное предложение — в таргете или другой рекламе. В статье рассказываем, что такое инфографика и как её создать. А также посмотрим, что отличает хорошую инфографику от неинформативной; от иллюстрации и работы без картинок. Что такое инфографика Людей не интересуют данные: у нас мало времени, чтобы перечитывать энциклопедии или отчёты о прибыли. Важнее узнать выводы и основные тезисы. Поэтому люди упрощают информацию для дру

ШАГ логотип

Маркетинг

Что такое контент-план и как его правильно составить

Контент-план помогает вести соцсети и добиваться больших результатов, а сделать его не так сложно, как может показаться. В статье разберёмся с контент-планами раз и навсегда, подготовим свой или переделаем пример под идею маркетолога или клиента.

Контент-план помогает вести соцсети и добиваться больших результатов, а сделать его не так сложно, как может показаться. В статье разберёмся с контент-планами раз и навсегда, подготовим свой или переделаем пример под идею маркетолога или клиента.  Что такое контент-план и зачем он нужен Контент-план — это график публикаций для любого блога: на сайте, в социальных сетях. Часто к графику добавляют типы публикаций, темы и наброски по контенту — чтобы проще вести и заполнять. Обычно контент-план делают в виде таблицы или карточек с задачами,

ШАГ логотип

Программирование

Ещё не знакомы с GitHub? — Почему нужно создать аккаунт прямо сейчас

В 2022 году GitHub объединил 83 миллиона разработчиков. Сайт используют как портфолио, место для совместной работы, форум. В статье рассказываем — что такое GitHub, и почему каждый программист должен работать с сайтом чаще, чем открывать Instagram.

В 2022 году GitHub объединил 83 миллиона разработчиков. Сайт используют как портфолио, место для совместной работы, форум. В статье рассказываем — что такое GitHub, и почему каждый программист должен работать с сайтом чаще, чем открывать Instagram. GitHub — это хостинг для кода и тусовка программистов Гитхаб придумали в 2008 году как площадку для разработки проектов: приложений, сайтов или чат-ботов. С 2019 года сайт предлагает программистам размещать код в открытом и закрытом доступе. Компании, команды и фрилансеры бесплатно могут загружать код, как файлы н

ШАГ логотип

Soft Skills

Аналитическое мышление в IT: почему это не талант, а необходимый навык

По данным Work Styles, аналитическое мышление набирает 97 баллов из 100 по востребованности в IT-профессиях. Думать глубоко и разбираться в задачах — это талант или натренированная привычка?

По данным Work Styles, аналитическое мышление набирает 97 баллов из 100 по востребованности в IT-профессиях. Думать глубоко и разбираться в задачах — это талант или натренированная привычка? Разбираемся с помощью исследований и работ Нобелевского Лауреата — Даниэля Канемана. Что такое аналитическое мышление Понять, почему в одних ситуациях мы решаем быстро, а в других нужно долго думать, поможет общая концепция мышления по по Даниэлю Канеману. Мозг человека работает в двух системах мышления: быстром (Система 1) и медленном (Система 2). Быстрая с

ШАГ логотип

Online ITStep

Интересно просмотреть истории наших выпускников?

Узнать больше