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

Скоро наступает 2015 год, и за последние несколько лет в вебе изменилось очень многое — в CSS появились новые возможности, в JavaScript представили новую функциональность и синтаксис; также появилось множество языков, компилируемых в HTML, CSS и JS.

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

JavaScript Next

Плагин, подсвечивающий синтаксис лучше, чем стандартный JavaScript-хайлайтер. К тому же этот плагин поддерживает фичи EcmaScript 6, такие как модули, классы, генераторы и многое другое. Открыть сайт плагина

CSS3

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

Sass

Разработчики, использующие Sass, должны установить плагины SCSS или Sass (в зависимости от используемого синтаксиса). Обратите внимание на то, какой именно плагин вы установили. Распространённая ошибка — установить плагин Sass, но при этом использовать синтаксис SCSS, и наоборот. Открыть сайт плагина

Разумеется, также существуют плагины для подсветки синтаксиса Stylus и Less.

Пишете на CoffeeScript? Убедитесь, что у вас установлен плагин Better CoffeeScript. Важно использовать именно его, так как официальный плагин CoffeeScript больше не поддерживается его разработчиками. Также доступен плагин для подсветки синтаксиса TypeScript.

Плагин Haml расширяет стандартные возможности для работы с Haml и подсвечивает также код на других языках, записанный в haml-файле: JS, CSS, Sass и так далее. Плагины Slim и Jade добавляют возможность подсветки синтаксиса этих языков.

Плагины

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

Можно весь день обсуждать лучшие плагины для Sublime Text (я надеюсь, что именно этим вы и займётесь в комментариях), однако в этой статье мы рассмотрим must-have плагины для фронтэндера.

Color Highlighter

При работе с таблицами стилей полезно иметь какое-то наглядное представление того, как выглядит тот или иной цвет. Color Highlighter будет сканировать вашу таблицу стилей и подсвечивать все цвета, закрашивая фон текста в тот цвет, который указан. Также есть возможность настроить плагин так, чтобы он подчёркивал цвета или ставил маркер нужного цвета слева от кода.

Недавно в Color Highlighter была добавлена поддержка Sass, Less и Stylus переменных, благодаря чему этот плагин становится пригодным практически для любого рабочего окружения.

Emmet

Практически все знают об Emmet, и многие его используют ещё с тех пор, когда он назывался «Zen Coding». Однако, я часто вижу, что разработчики упускают из вида довольно полезные возможности этого плагина.

HTML

Emmet великолепен для быстрого написания разметки. Просто напечатайте css-селекторы для нужной вам разметки, и нажмите tab. Используете Jade, Slim или Haml? Emmet работает с ними так же хорошо, как и с HTML.

Посмотрите немного примеров использования Emmet. Также не забудьте посмотреть шпаргалку по синтаксису, в которой описаны все возможности для работы с разметкой.

element + tab создаёт элемент и позиционирует курсор внутри него.
span + tab ? <span></span>

element.className или element#ID + tab создаёт элемент с указанным классом или идентификатором.
span.hello + tab ? <span class="hello"></span>
p.odd.warning + tab ? <p class="odd warning"></p>
div#contact + tab ? <div id="contact"></div>

element>childElement + tab создаёт вложенные элементы.
ul>li + tab ? <ul><li></li></ul>

[element*5] + tab создаёт указанный элемент столько раз, сколько указано.
p.hello*2 + tab ? <p class="hello"></p><p class="hello"></p>

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

li.item$*3 + tab ?

<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>

Квадратные скобки используются для указания атрибутов элемента, фигурные — для указания контента.

figure*2>img[src="dog$.jpg"]+figcaption{This is dog $} ?

<figure>
  <img src="" alt="">
  <figcaption>This is dog 1</figcaption>
</figure>
<figure>
  <img src="" alt="">
  <figcaption>This is dog 2>/figcaption>
</figure>

CSS

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

В CSS emmet работает при помощи сокращений, напоминающих пары свойство/значение. Нет чётко определённых сокращений, emmet работает на основе так называемого fuzzy matching — он делает выбор, какое свойство использовать, на основе того, что вы ввели.

Примеры:

• posrel ? position: relative;
• posab ? position: absolute;
• fl ? float:
• fr ? float: right;
• db ? display: block;
• dib ? display: inline-block;
• tdn ? text-decoration: none;
• c ? color: #
• w ? width:
• w100 ? width: 100px;
• w100p ? width: 100%;
• p ? padding:
• p10 ? padding: 10px;
• p10p ? padding: 10%;
• bt1-s-red ? border-top: 1px solid red;

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

Sublime Linter

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

С помощью Sublime Linter вы можете легко проверить практически любой код. Как фронтэндеры, мы должны проверять наш JavaScript и, по возможности, CSS. Если вы совершите ошибку в коде, Sublime Linter подсветит её небольшим красным кружком.