Иной раз и при особых задачах пасует и Brackets. Тогда на помощь может прийти WEBStorm. WEBStorm создала компания JetBrains и у них есть еще много редакторов под разные нужды. В основном эти нужды выражены языками.

В целом можно выделить следующие редакторы:

Notepad – Встроенный редактор Windows. Никакой подсветки, открывается очень быстро, позволяет обнулять стили.

Notepad++ (NPP) – Грубо говоря, расширенный редактор Notepad, позволяет полноценно редактировать код, и мы все когда-то с ним успели поработать.

Sublime – Редактор из Linux, настолько знаменит, что о нем не все знают. В целом, удобная альтернатива Notepad++. Или наоборот!? Рекомендую ознакомиться.

Dreamweaver – Хоррор из прошлого. Некогда запомнился мне инновационной подачей «пишу и вижу», что позволяло сразу видеть, как код написан. Вот только показывал он его как-то по своему, в своей реальности. Лет 7 назад посоветовал бы не связываться с ним, а что он представляет сейчас не знаю.

Brackets – Мощный и удобный редактор для верстальщика. Является неким средним явлением между notepad++ и phpstorm. Можно ставить дополнения и вообще достаточно гибок в настройке.

Visual Studio Code – Я когда-то учил язык C и тестировал знания в редакторе Visual Studio. Так вот с тем, к чему я привык, там эта «облегченная версия» не имеет ничего общего. Удобный расширяемый редактор, который я поставлю на одно место с brackets. По умолчанию умеет работать с Git.

PHPStorm – Ориентирован изначально на работу php-программиста, но отлично подходит и верстальщику. Удобная работа с проектами, некоторые интересные фичи типа редактирования открывающего и закрывающего тега. Но не умеет редактировать много строк сразу, да и тяжелый, как мастодонт. Будет грузится едва ли меньше, чем фотошоп на вашем компьютере. Рекомендую только в том случае, если вы работаете в паре с php-программистом и вам не обойтись без единовременного редактирования кода.

WebStorm – Редактор с упором на javascript проекты. Должен быть удобен для возведения конструкций с использованием фреймворков/библиотек типа Vue, Angular, React.

PyCharm – Это уже третий редактор от JetBrains, и он вроде не по теме, но только до того момента, как вы не начинаете работать с, допустим, фреймворком Django. Это уже относится к продвинутому уровню, так что не будем долго останавливаться.

Остальными критериями для выбора редактора я считаю расширяемость и в принципе возможности, о которых не думаешь в первую очередь. Например в sublime и brackets можно редактировать несколько строк одновременно.

Ни в коем случае не используйте для верстки визивиги!

WYSIWYG – это визуальный редактор, работающий по принципу «что видишь, то и получишь». Такой редактор уместен во многих других направлениях, например для сбора презентации в Point, или при составлении текста в Google Docs, но только не в верстке. Уже придумали, но еще не создали такой визивиг, который мог бы вам помочь в жизни.

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

Эти действия я буду описывать на личном примере с использованием редактора Brackets.

Одно из первых действий, что я делаю при установке чистой программы – качаю тему. Часто скин под Notepad++, иногда темную тему, иногда вообще что-то новое.

Далее ставлю Emmet – данное дополнение позволяет использовать краткую форму записи тегов.

Сокращенный код в Emmet: div.classname#ddd>label+input

Преобразованный в HTML: <div class="classname" id="ddd"><label for=""></label><input type="text"></div>

И в обязательном порядке устанавливаю плагин Show Whitespace в исполнении Dennis Kehrig (В магазине несколько таких плагинов и этот, на мой взгляд, самый адекватный в исполнении). Этот плагин позволяет подсвечивать пробелы и табуляцию – таким образом круче управлять своим кодом.

После установки плагинов я устанавливаю настройку отступов в формат табуляции со значением в 4.

^{Настройка находится в нижнем правом углу редактора Brackets.}

Лично мне легче работать с кодом именно таким образом. Так отступы всегда формируют читаемый код, что особенно важно при работе, например c препроцессором SASS (не путать с SCSS). Другой популярный метод – пробелы в 2 единицы.

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

Это в общем все. Для комфортного написания кода стоит просто настроить свое пространство для этого самого комфорта. К теме также можно отнести и выбор хорошего кресла, но это уже совсем другая история.

Не забывайте, кроме фактора удобства и популярности существуют требования языка. Например YAML требует запись в 2 пробела.

Автозамена в 20+ файлах – это просто волшебный редактор, когда необходимо провести автозамену в тонне файлов, любой другой навороченный редактор заглохнет и начнет чихать.

Редактирование отдельно-стоящих файлов. Незачем грузить полноценную IDE для редактирования одного файла, например при использовании FTP-клиента. На всех компьютерах, на которых я работал, notepad загружается крайне быстро. В то время, как тот же Brackets приходится ждать. Чего уж говорить про PHPStorm.

Необходимо обнулить стили. Если я беру какой-то текст с сайта, то вместе с ним тянутся и стили, заголовки и иное форматирование. И не всегда связка Ctrl+Shift+V спасает. В таком случае я запускаю Notepad ++.

Палочка-выручалочка

Если вы открыли ту самую тонну файлов в notepad и пытаетесь их закрыть, в меню Файл есть волшебная кнопка «Закрыть все».

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

Для примера я решил взять главную страницу Яндекса:

Главная Яндекса без стилей.

Для наглядности я удалил тег head вместе со всем содержимым. Внутри были стили и скрипты. И много всякой полезной ерунды, без которой мы можем видеть отформатированный, де-факто сверстанный текст. В данном случае текст и информацию вывел сервер, так что если вы проделаете то же самое у себя на компьютере, то увидите другой текст на главной странице.

Важно!: кроме head я удалил шапку и содержимое, которое выводило мою личную информацию.

Вот то же самое, только без участия тегов. Все содержимое я скопировал и вставил в тег p.

Главная Яндекса без верстки вообще.

Внимательный читатель обратит внимание, что 2 страницы браузера не сильно похожи одна на другую. Таким образом можно утверждать, что верстка – это перевод текста [читай контента] в другое качественное состояние. Точно так же, как это делают в типографии в классическом исполнении верстки.