Налаштування sublime text 3 для веб-розробки livereload, плагіни, фішки транскрібація

Спочатку завантажуємо з сайту-розробника і встановлюємо програму. При установці - обов'язково ставимо галочку на «Add to explore context menu».

Насамперед потрібно встановити підтримку плагінів, додаткових модулів і ін. Для цього переходимо на сайт Package Control.

Копіюємо текст з Subline Control3, потім в програмі, відкривши консоль (View - Show Console), вставляємо скопійований код і натискаємо «Enter». Після завершення цієї процедури, перенавантажуємо програму.

Потім, використовуючи комбінацію клавіш Ctrl + Shift + P, шукаємо «Install Package» і вибираємо:

Першим доповненням, яке ми встановимо, буде Emmet (плагін для прискорення верстки) - вибираємо і запускаємо:

Щоб переконатися, що все працює правильно, створіть на жорсткому диску файл «index.htnl», відкрийте його в програмі, введіть. і натискаємо «Tab».

Якщо все вірно, то плагін повинен вивести:

Тепер налаштуємо саму програму.

• Для настройки розміру шрифту - затискаємо лівий Ctrl і прокручуємо колесо миші.
• Щоб робити красиві відступи, потрібно використовувати вбудовану функцію «reindent». Але для початку потрібно призначити їй гарячу клавішу: «Preferences» - «Key Binding».
  Для цього додаємо рядок:
  
  
  
  Після застосування даної опції до виділеного тексту, ви отримаєте правильні і красиві відступи:
  
  
• Потрібно визначити, чи зберігатиметься налаштувань за замовчуванням. Для цього пробуємо зберегти, щоб з'явилося ось таке вікно:
  
  
  
  Це вікно з'являється, тому що в папці, де програма зберігає пакети, взагалі немає такої папки. І нам потрібно її створити - «Preferences» - «Browse Packages. ». Відкриється вікно провідника Windows, в якому, згідно з шляху з вікна з помилкою потрібно створити відсутні папки і файл (напр. Packages -> Default -> Default (Windows) .sublime-keymap):
  
  
  
  Але я рекомендую спочатку змінити назву файлу (додати будь-який символ в його ім'я). Потім знову відкрити «Preferences» - «Key Binding», скопіювати текст файлу, закрити його. Потім створений файл, з доданим символом, перейменувати в правильний «Default (Windows) .sublime-keymap», ще раз відкрити «Preferences» - «Key Binding» (тепер файл виявиться порожнім), вставити в нього скопійований текст і зберегти.
  Ось такі «танці з бубнами».
• Інші налаштування - «Preferences» - «Settings»:
  • 32. «margin»: 2
  • 35. «fold_buttons»: false
  • 47. «tab_size»: 2
  • 109. «highlight_line»: true,
  • 148. «line_padding_bottom»: 1
  • 221. «auto_complete»: false (! Якщо ви використовуєте Emmet)
• Для зручної роботи в 2 колонки (наприклад, для html і CSS), потрібно вибрати «View» - «Layout» - «Columns: 2»:
  
  
• Щоб приховати мінікарту: «View» - «Hide Minimap»
• Приховуємо меню - «View» - «Hide Menu». Щоб його швидко відобразити / сховати - використовуємо клавішу «Alt».

Налаштування плагінів

Установка і настройка LiveReload в Sublime Text 3

Переходимо по посиланню на GitHub і викачуємо ZIP-архів:

Архів розпаковуємо в «Preferences» - «Browse Packages. »:

Перейменовуємо папку в «LiveReload» і перезапускаємо програму.

Тепер потрібно встановити розширення для браузера. Заходимо на сторінку LiveReload Browser Extension і завантажуєте підходяще вам розширення.

Потім в програм заходимо в налаштування плагіна:

Пишемо такий код і перенавантажуємо програму: "enabled_plugins": [
"SimpleReloadPlugin",
"SimpleRefresh"
]

Установка і настройка SASS плагіна для підсвічування синтаксису

Використовуючи комбінацію клавіш Ctrl + Shift + P, шукаємо «Install Package», вибираємо «Sass» і встановлюємо його.

Щоб активувати, йдемо «View» - «Syntax» - «Open all as current extension as» - «Sass»

Установка і настроках плагіна для роботи з Gist Репозиторієм

Gist - це плагін для зручного віддаленого зберігання часто використовуваних частин коду на GitHub.

Встановлюється - Ctrl + Shift + P, шукаємо «Install Package», вибираємо «Gist».

Після встановлення плагіну, вам потрібно в його настройках ( «Preferences» - «Package Settings» - «Gist» - «Settings - Default») прописати ваш Token - універсальний ключ. Щоб отримати цей ключ, потрібно зареєструватися на GitHub.

brackethighlighter: підсвічування тегів і дужок

Плагін для підсвічування закриває тега. Установка звичайна.

autofilename: автокомпліт для підключення зовнішніх файлів в верстку

autofilename - плагін, який підказує, які файли є в файлової системі і допомагає їх підключити (під час введення імені файлу). Установка звичайна.

colorhighlighter: підсвічування кольору

colorhighlighter - плагін, який в коді показує, з яким кольором ми працюємо. Установка звичайна.

BufferScroll: збереження позиції курсора в документі

BufferScroll - запам'ятовує позицію курсора і відкриває документ на цій позиції. Установка вручну через скачування на GitHub'е.

Goto-CSS-Declaration

Goto-CSS-Declaration - плагін для швидкого пошуку відповідного класу в CSS, SASS, LESS. Установка звичайна.

Запускається в програмі: «Win + Alt +.»

Шановний Новомосковсктель блогу VashInternetGid.ru!

Дозвольте у Вас дещо запитати:

У вас є хобі? А Ви Б. Хотіли Дізнатися, Як Можна Заробляти На Вашому Хобі?

Відповіді на ці та інші питання є в моїй книзі «Як з хобі зробити Бізнес». яку отримає АБСОЛЮТНО БЕЗКОШТОВНО кожен передплатник мого блогу!

Введіть свої дані та я відразу ж пришлю Вам копію цієї книги: