Редакторы кода

Если до этого урока вы пробовали верстать только с помощью онлайн-сервисов, то настало время установить редактор кода, который позволит сохранять результаты вашей работы на компьютере или сервере.

На самом деле, в отличие от многих языков программирования для вёрстки возможно использовать лишь один блокнот (или другой стандартный текстовый редактор в вашей системе). Именно так и верстали сайты в 90-х — начале 2000-х. Ведь HTML и CSS отрабатывают в браузере, а это значит, что наша задача — верно дать ему данные. И сейчас вы можете сделать именно так, но развитие редакторов принесло множество полезных функций, которые недоступны в стандартных текстовых редакторах:

Подсветка HTML и CSS. С помощью подсветки можно просто отделять одни части от других. Например в CSS подсветка разграничивает селектора, названия свойств и значения свойств.
Автодополнение кода. Начав вводить нужное свойство или значение редактор предложит вам возможные варианты. Это похоже на то, как было во вкладке Styles в Google DevTools
Валидация кода. То есть его проверка на корректность. Используя HTML очень просто забыть закрыть блочный элемент. Браузеры как могут стараются сглаживать такие ошибки и автоматически закрывать блоки, но они не всегда могут угадать ваш замысел.

Visual Studio Code

В настоящее время есть множество разных решений. В этом уроке мы остановимся на одном из самых популярных решений от компании Microsoft — Visual Studio Code. Это мощный инструмент, который можно использовать не только для вёрстки, но и для программирования на любом языке. После его настройки вы получите инструмент, с помощью которого можете как верстать, так и программировать.

Скачать редактор вы можете с официального сайта. С самого начала он уже хорошо настроен для работы с HTML и CSS, поэтому приступать к экспериментам можно уже сейчас.

Просто создайте новый файл с помощью комбинации Ctrl + N и сохраните его с расширением .html. Например index.html. Скопируйте следующий HTML код и посмотрите, как редактор подсветит все HTML-теги

<section>
    <h1>Основы вёрстки на Hexlet</h1>

    <p>В профессии верстальщик вы изучите множество популярных технологий, которые используют при создании вёрстки.</p>

    <p>Узнаете о работе с CSS, препроцессорами, немного попрограммируете. Изучите Bootstrap и научитесь проверять свой код с помощью специальных утилит.</p>
</section>

Подсветка синтаксиса HTML

Попробуйте добавить любой HTML элемент в эту разметку и вы увидите, что редактор начнёт предлагать вам различные варианты тегов, которые подходят под ту комбинацию символов, которую вы уже ввели.

Автодополнение в VSCode

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

В качестве интересного примера попробуйте в пустом HTML файле ввести символ ! и нажать клавишу Enter. Вы получите базовую разметку HTML документа со всеми основными тегами и мета-тегами, которые используются в реальных проектах.

Emment в VSCode

Это возможно благодаря встроенному в Visual Studio Code плагину Emmet. С работой этого плагина мы познакомимся в одном из следующих урок.

Теперь создайте любой файл с расширением .css. Например style.css. Редактор кода так же автоматически определит, что в этом файле идёт работа с CSS и подключит специальную подсветку для данного языка.

Подсветка CSS в VSCode

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

Это основные моменты при работе с HTML и CSS в редакторе Visual Studio Code, которые пригодятся вам в самом начале. При работе с этим редактором вы так же сможете познакомиться с прекрасной системой установки плагинов. Так вы сможете настроить редактор под свои нужды и задачи.

Другие редакторы

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

Atom. Мощный редактор, который схож во многих моментах с Visual Studio Code.
Sublime Text — частично бесплатный редактор. Может быть достаточно сложен в первоначальной настройке, но всё равно он заслуженно любим многими программистами за небольшой вес и стабильную работу.
Vim — решение для любителей пощекотать себе нервы. Невероятно лёгкий и при этом сложный редактор. За всем этим стоит возможность гибкой настройки. Редактору уже скоро стукнет 30 лет, но он пользуется невероятной популярностью.
Brackets — редактор, рассчитанный на работу с HTML, CSS и Javascript. Не настолько расширяемый, как другие, но свою работу выполняющий хорошо.

Вы можете попробовать различные редакторы и остаться на том, который вам больше всего нравится. Запомните, что редактор — не более чем инструмент. Он не сделает за вас всю работу, поэтому достаточно один раз привыкнуть к любому редактору и менять его нет смысла.