Арсений Матыцин - Я верстальщик. Веб-верстальщик

Но вернемся к вопросу выбора. Выбор редактора (возьмем в качестве этого термина объединение IDE и редактор исходного кода) очень важен как для верстальщика, так и для программиста.

Я уверен, в первую очередь он должен быть удобным. Для меня удобство – это качественные шрифты и цветовая схема, которая не вырывает мне глаза. Лучшим редактором в плане цветового решения для меня был и остается Notepad++. Там информация отображается на белом фоне, по-умолчанию используется хорошо читаемый шрифт. Но он сильно пасует перед продвинутыми редакторам в плане возможностей, хотя я достаточно часто к нему прибегаю, когда необходимо решить сложные вопросы легким путем.

Полноценная IDE, на которой я остановился на момент написания этой книги – Brackets. Это достаточно удобный редактор для работы над проектами. Когда много файлов, и нужно все их видеть не отходя от кассы, т.е. от редактора. В тот же notepad такую возможность ввели где-то в середине 2018-го года.

Иной раз и при особых задачах пасует и 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:

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

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

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

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

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

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

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

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

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

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