Инструменты разработчика. Sublime Text

Итак у нас есть система со всеми редакторами. Теперь можно усилить их плагинами (расширениями, пакетами).

Расмотрим основные пакеты для Sublime Text 3:

Для написания кода

  1. Emmet (ранее известный как Zen Coding) — это инстремент веб-разработчика, который может существенно улучшить ваш HTML & CSS алгоритм работы. Подробнее на сайте http://emmet.io

  2. SublimeLinter — интерактивный отладчик кода. Инструкции по установке лежат здесь и для каждого языка нужен свой плагин, список тут.

    scsslintjshint в особенности полезны.

  3. jQuery — этот пакет содержит сниппеты для всех методов jQuery, что облегчает использование API.

  4. Inc-Dec-Value — увеличивает / уменьшает значение (целочисленно и дробно), даты, значения hex цвета, противоположные связи и циклические нумерации и бонусом операции над строками (upper, lower, capitalize). Здесь можете посмотреть продвинутые настройки.

  5. ColorHighlighter — плагин для подсветки выбранного гексадесятичного кода цвета (например, «#FFFFFF», «rgb(255,255,255)», «white», и другое) их настоящим цветом. Также плагин добавляет колорпикер для лёгкого изменения цвета.

  6. Convert case — преобразование текущего выражения в разные форматы для соблюдения стандартов написания кода.

  7. BracketHighlighter подсветка тегов.

  8. AlignTab выравнивание табов используя регулярные выражения.

  9. MultiEditUtils усиление редактирования при множественном выборе.

Для пользовательского интерфейса

  1. SideBarEnhancements улучшение сайдбара. Файлы и папки.

  2. Origami разделяйте окно как хотите! Создавайте новые панели, удаляйте панели, двигайте и клонируйте виды панелей.

  3. Modific
    подсветка строкanосле последнего коммита (поддерживает Git, SVN, Bazaar, Mercurial и TFS)

  4. Soda Theme — тёмная и светлая тема UI. Список других тем можно найти здесь

  5. Themr — выбор тем

  6. ColorSchemeSelector — выбор темы через панель быстрого доступа

  7. Base16 Color Schemes — любимая цветовая тема для Sublime.

  8. TabsExtra — липкие табы, больше опций при закрытии, дополнительные элементы меню.

Для специфических синтаксисов

  1. SCSS — Sass и SCSS пакет

  2. Sass Snippets Sass сниппеты

  3. CSS3 Syntax
    пакет улучшает подсветку синтаксиса для CSS

  4. JavaScriptNext — улучшенная подсветка для Javascript. Она построена на языковых файлах, используемых обычно и добавляет больше соответствий и также включает новые фичи от ECMAScript 6 например модули, общие методы, функции, классы, генераторы и наследники (ES5).

Если вы хотите использовать его для каждого js файла, то создайте или откройте javascript файл, дальше в правом верхнем углу нажмите имя синтаксиса и дальше ‘Open all with current extension as’, далее выберите JavascriptNext — ES6 > JavascriptNext.

  1. Liquid — Liquid шаблоны для тех, кто разрабатывает Jekyll сайты.

Общая помощь

  1. FindKeyConflicts — обнаружение конфликтующих сочетаний кнопок

Для прикола

  1. Sound — добавляет звуковіе эффекты для действий в редакторе. Можно приколоться над другом.

В этой статье приведены некоторые полезные расширения для редактора Brackets

Практика

Ставим все расширения, настраиваем их под себя.

Изучаем шорткаты