Источник статьи: webdesign-master.ru

Видео для транскрибации:  

Транскрибация видео



Настройка программы-редактора текста для Фронт-Энд разработки.

Сначала скачиваем с сайта-разработчика и устанавливаем программу. При установке — обязательно ставим галочку на «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+.»