понедельник, 1 августа 2016 г.

Настройка Sublime Text 3

Вдохновившись видео ниже я решил так же настроить свой Sublime Text. До этого пользовался стандартными настройками из коробки. Чего я ожидаю от настройки? Как минимум ускорения написания кодов и автоматизацию процессов, которые делал раньше вручную.

Собственно вот видео:
Крутое видео, но длится довольно-таки долго, поэтому я решил написать для себя маленькую инструкцию и выложить её в блоге, авось ещё кому-нибудь пригодится.
  1. Скачиваем редактор по ссылке. Как и автор видео, я тоже выбрал третью версию, несмотря на то, что она еще в бете. Устанавливаем его.
  2. Настроить размер шрифта в редакторе можно, нажав Ctrl, затем "+" или "-".
  3. Следующим шагом будет настройка горячей комбинации клавиш для быстрого форматирования кодов.
    • Переходим в меню Preferences -> Key binding - User. (автор выбрал Default, но я не буду забивать своими настройками файл по умолчанию, поэтому буду редактировать пользовательский)
    • Дописываем туда: { "keys": ["alt+shift+f"], "command": "reindent" }
  4. Теперь по настройкам редактора. Переходим в пункт меню Preferences -> Settings. Все так же я считаю, что править настройки по-умолчанию не сильно и хорошая идея, поэтому копируем нужный параметр и вставляем его в пользовательский файл, изменяя его там.
    Значения параметров, которые я изменил.
    • "margin": 2 - отступ от нумерации строк до кода. Согласен с автором видео - много не надо
    • "tab_size": 3 - размер табуляции в пробелах
    • "highlight_line": true - подсветка строки, где находится курсор
  5. Просмотр в колонках View -> Layout -> Column: 2. Тут уже все зависит от личных вкусов, но при верстке это очень удобно.
  6. Отключаем миникарту: View -> Hide Minimap.
  7. Переходим на сайт менеджера пакетов и устанавливаем его себе, выполняя код из страницы в терминале редактора, который вызывается комбинацией Ctrl + `.
  8. Перегружаем редактор.
  9. Нажимаем комбинацию Ctrl + Shift + P и выбираем там Package Control: Install Package, переходим туда. Откроется поле, куда можно ввести имя пакета для установки.
  10. Что же, как и автор, первым делом установим emmet. Вбиваем emmet и нажимаем Enter. Мануал по этому плагину можно найти по ссылке. Не забудьте перезагрузить редактор.
  11. Устанавливаем LiveReload. Делаем, снова шаг 9, вбивая туда LiveReload. Далее устанавливаем расширение для своего браузера. Плагин будет автоматом перегружать страницу в браузере при изменении локальных файлов.
    Возможно потребуется записать следующую конструкцию в настройки (Preferences -> Packge Settings -> LiveReload -> Settings - User):
    {
        "enabled_plugins": [
            "SimpleReloadPlugin",
            "SimpleRefresh"
        ]
    }
    Наверное можно не париться за этот плагин, так как в репозиториях дополнений браузеров нечто подобное тоже существует.
  12. Устанавливаем плагин для подсветки sass. Все так же 9 шаг, вбивая sass :) Далее автор видео открывает файл с расширением sass, где у него не работает подсветка. Чтобы принудительно заставить Sublime открывать такие файлы с подсветкой нужно зайти в View -> Syntax -> Open all with current extension as -> Sass. Я не заходил, так как все работало :)
  13. Также установим плагин BracketHighlighter. Очень удобно для подсветки тегов.
  14. AutoFileName - плагин дописывает имя файла при вводе.
  15. Color Highlighter - подсвечивает цвета при выделении курсором.
  16. BufferScroll - сохраняет позицию курсора при закрытии файла.
На этом пока прекращу, продолжение следует.

Комментариев нет:

Отправка комментария