Инструменты разработчика. Sublime Text
Итак у нас есть система со всеми редакторами. Теперь можно усилить их плагинами (расширениями, пакетами).
Расмотрим основные пакеты для Sublime Text 3:
Для написания кода
Emmet (ранее известный как Zen Coding) — это инстремент веб-разработчика, который может существенно улучшить ваш HTML & CSS алгоритм работы. Подробнее на сайте http://emmet.io
SublimeLinter — интерактивный отладчик кода. Инструкции по установке лежат здесь и для каждого языка нужен свой плагин, список тут.
jQuery — этот пакет содержит сниппеты для всех методов jQuery, что облегчает использование API.
Inc-Dec-Value — увеличивает / уменьшает значение (целочисленно и дробно), даты, значения hex цвета, противоположные связи и циклические нумерации и бонусом операции над строками (upper, lower, capitalize). Здесь можете посмотреть продвинутые настройки.
ColorHighlighter — плагин для подсветки выбранного гексадесятичного кода цвета (например, «#FFFFFF», «rgb(255,255,255)», «white», и другое) их настоящим цветом. Также плагин добавляет колорпикер для лёгкого изменения цвета.
Convert case — преобразование текущего выражения в разные форматы для соблюдения стандартов написания кода.
BracketHighlighter подсветка тегов.
AlignTab выравнивание табов используя регулярные выражения.
MultiEditUtils усиление редактирования при множественном выборе.
Для пользовательского интерфейса
SideBarEnhancements улучшение сайдбара. Файлы и папки.
Origami разделяйте окно как хотите! Создавайте новые панели, удаляйте панели, двигайте и клонируйте виды панелей.
Modific
подсветка строкanосле последнего коммита (поддерживает Git, SVN, Bazaar, Mercurial и TFS)Soda Theme — тёмная и светлая тема UI. Список других тем можно найти здесь
Themr — выбор тем
ColorSchemeSelector — выбор темы через панель быстрого доступа
Base16 Color Schemes — любимая цветовая тема для Sublime.
TabsExtra — липкие табы, больше опций при закрытии, дополнительные элементы меню.
Для специфических синтаксисов
SCSS — Sass и SCSS пакет
Sass Snippets Sass сниппеты
CSS3 Syntax
пакет улучшает подсветку синтаксиса для CSSJavaScriptNext — улучшенная подсветка для Javascript. Она построена на языковых файлах, используемых обычно и добавляет больше соответствий и также включает новые фичи от ECMAScript 6 например модули, общие методы, функции, классы, генераторы и наследники (ES5).
Если вы хотите использовать его для каждого js файла, то создайте или откройте javascript файл, дальше в правом верхнем углу нажмите имя синтаксиса и дальше ‘Open all with current extension as’, далее выберите JavascriptNext — ES6 > JavascriptNext.
- Liquid — Liquid шаблоны для тех, кто разрабатывает Jekyll сайты.
Общая помощь
- FindKeyConflicts — обнаружение конфликтующих сочетаний кнопок
Для прикола
- Sound — добавляет звуковые эффекты для действий в редакторе. Можно приколоться над другом.
В этой статье приведены некоторые полезные расширения для редактора Brackets
Практика
Ставим все расширения, настраиваем их под себя.
Изучаем шорткаты
06-02-2015 Sublime Text Editor Frontend Виктор Матушевский