Налаштовуємо Sublime Text 3 для роботи

Налаштовуємо Sublime Text 3 для роботи

30.12.2017 13:42 | Інше

Вставнолення редактора під Windows не викликає ніяких труднощів - просто дотримуйтесь вказівок. Можна згадати лише один нюанс - під час установки можна відзначити чекбокс, щоб додати Sublime Text в контекстне меню операційної системи. Тобто при натисканні правою кнопкою миші на будь-якому файлі, його можна буде відразу відкрити в даному редакторі.

Наступний крок – встановлення Package Control. Навіщо це потрібно? Для повноцінної роботи потрібна певна кількість плагінів, і або ми будемо встановлювати їх руками, або за нас цю роботу виконає Package Control. Отже, йдемо на цю сторінку і копіюємо код для Sublime Text 3. Повертаємося в редактор і відкриваємо консоль: View > Show Console або просто використовуємо комбінацію клавіш Ctrl + `. Вставляємо код в консоль і натискаємо Enter.

Встановлення та видалення плагінів і тем

Виконуємо наступні кроки:

  1. Відкриваємо Package Control: Preferences > Package Control або Shift + Ctrl + P.
  2. У полі, що з'явилося, вводимо install щоб знайти пункт Package Control: Install Package. Вибираємо його та натискаємо Enter.
  3. У полі вводу панелі набираємо назву потрібного плагину, вибираємо його і знову Enter.

Щоб видалити будь-якой з раніше встановлених плагінів виконуємо ті ж три дії, тільки в другому пункті вводимо не install, а remove, так як нам потрібен Package Control: Remove Package.

Теми встановлюються так само, як і плагіни. При цьому додається 4-й крок: потрібно зайти в Preferences > Settings і далі в Preferences.sublime-settings - User додати тему. Якщо конкретніше, то потрібно вставити приблизно такий код:

{
  "theme": "theme.sublime-theme"
}

Плагины для Sublime Text 3

Хто б що не казав або писав, але для початку не завадить зайти на сторінку популярних плагінів і вибрати ті, які підійдуть безпосередньо Вам. Також я б порекомендував перед установкою плагіна ознайомитися з його документацією, тому як можуть бути нюанси. Ну а нижче перерахую ті плагіни, які використовую сам:

EditorConfig

Працювати доводиться з різними проектами і з різними людьми. Щоб визначити єдиний стиль коду і дотримуватися його і потрібен EditorConfig. Детальніше про це плагін можна почитати тут.

SideBarEnhancement

Розширює функціонал сайдбара. Треба визнати, що у самого Sublime цей функціонал вже дуже мізерний.

SublimeCodeIntel

Досить зручна штука - дозволяє «стрибнути» в файл і на рядок визначення класу або методу. І щодо згаданих вище нюансів - перед встановленням плагіна треба переконатися, що CodeIntel вже наявний у вашій системі, про що докладніше в документації.

BracketHighlighter

Підсвічує парні дужки і теги.

PHP Companion

Дозволяє додавати namespace, оператор use і т.д. натисненням однієї клавіші. Прив'язки клавіш потрібно писати самому, або можна використати авторські. Для цього відкриваємо Preferences > Key Bindings, вставляємо у вкладку Default.sublime-keymap - User цей код та зберігаємо.

DocBlockr

Я противник коментарів як таких - якщо розумієш, що треба написати коментар до коду, то тут треба не коментарі писати, а код переписувати. Але це не стосується коментарів DocBlock, написання яких і спрощує даний плагін.

TrailingSpaces

Підсвічує пробіли в кінці рядків і може видаляти їх при збереженні. За замовчуванням опція видалення відключена. Щоб її включити, треба зайти в Preferences > Package Settings > Trailing Spaces > Settings User і вставити наступне:

{
  "trailing_spaces_trim_on_save": true
}
A File Icon

В сайдбарі до назв файлів додає іконки. Так сприймати інформацію набагато зручніше.

Emmet

Незамінна річ для верстки, значно прискорює процес, дозволяючи розширювати табом абревіатури HTML, XML, HAML і CSS / SASS / LESS / Stylus. Якщо раніше не працювали з Emmet, то буде корисна ось ця шпаргалка.

Autoprefixer

Ще один дуже корисний інструмент для фронтенду. Не треба більше думати про вендорні префікси - плагін їх вставляє відповідно до даних caniuse. Працює тільки з препроцесорами CSS, SCSS і вимагає встановленого NodeJS. Докладніше тут. Я додаю префікси для двох останніх версій браузерів, тобто мої налаштування такі:

{
  "browsers": ["last 2 versions"]
}
Color Highlighter

Вважаю, з назви вже зрозуміло про що мова. Поставляється разом з конвертором кольорів. Налаштувань досить багато, тому слід почитати доки.

З основними плагінами начебто все. Що стосується конкретних фреймворків або бібліотек- тут вже хто з чим працює. Можна лише сказати, що, як мінімум, крім підсвічування бажано також ставити і плагіни сніпетів. Особисто у мене ще встановлені:
Laravel Blade Highlighter, Blade Snippets, Babel, Babel Snippets, Vue Syntax Highlight, Vuejs Snippets, Sass, LESS, Pug.

Слід також загадати такі плагіни як Git или Laravel Artisan, але я все ж надаю перевагу консолі.

Про гарячі клавіші

Практично повний список знаходиться тут. Я ж наведу лише невеликий перелік команд, які використовую найчастіше:

Ctrl + D Виділити слово, в якому курсор
Ctrl + Shift + M Виділити вміст в дужках
Ctrl + F Пошук у файлі
Alt + Enter Виділити все знайдене (після пошуку)
Ctrl + / Закоментувати рядок
Ctrl + Shift + / Закоментувати блок коду (у якому знаходиться курсор)
Ctrl + S Зберегти
Tab Додати відступ
Tab + Shift Видалити відступ
Ctrl + Shift + D Продублювати рядок/фрагмент
Ctrl + Shift + ↑ Підняти рядок вверх
Ctrl + Shift + ↓ Опустити рядок вниз
Ctrl + Shift + Enter Вставити рядок вишче курсору
Ctrl + Enter Вставити рядок нижче курсору
Ctrl + P Перехід до файлу в проекті

І на завершення. З редактора IDE не зліпити, але з іншого боку - а чи це потрібно? Я використовував NetBeans, Eclipse, PhpStorm, але в підсумку (разом з останнім) все одно продовжую користуватися Sublime. Цей швидкий на підйом і спритний редактор мене повністю влаштовує.