8 (8452) 32-00-84

Sublime Text 3 — плагины, установка и настройка

У начинающих верстальщиков и программистов часто возникают вопросы по поводу текстового редактора Sublime Text 3. Они касаются настройки и установки плагинов. В данной статье мы постарались дать максимум информации по этому поводу.

Как скачать

Загрузить последнюю версию программы можно здесь — https://www.sublimetext.com/3

Просто выберите свою операционную систему и нажмите на нужную ссылку.

Установка Sublime Text 3

Запустите полученный файл. При его установке обязательно поставьте галочку Add to explorer context menu. Это нужно для того, чтобы у нас была возможность открывать файлы на нашем компьютере из контекстного меню, которое появляется после нажатия правой кнопкой мыши по нужному документу.

Плагины

Когда текстовый редактор установлен, пришло время плагинов, пакетов и прочих необходимых для эффективной работы модулей.

Package Control

Ссылка — https://packagecontrol.io/installation#st3

Выделяем код на вкладке SUBLIME TEXT 3, копируем его, переходим в наш редактор, View — Show Console. Вставляем все это в нижнюю длинную строчку и нажимаем Enter. Дожидаемся когда операция по установке завершиться и перезагружаем Sublime Text, т.е. выключаем и заново запускаем.

Теперь для вызова консоли Package Control нам достаточно нажать Ctrl + Shift + P.

Появляется строчка поиска, набираем в ней install, выбираем Install Package.

После этого в новой открывшейся строчке выбираем название плагина который мы хотим установить, например:

Emmet

Набираем в этой строке Emmet, жмем Enter. Запускается установка. Ждем.

Теперь давайте проверим как все установилось, создайте файл index.html, откройте его правой кнопкой мыши — Open with Sublime Text, введите ! и нажмите клавишу Tab. У Вас должна распаковаться первоначальная структура html документа.

Настройка горячих клавиш

Для того чтобы настроить автоматическое выравнивание верстки, DOM дерева, переходим в Preferences — Key Bindings-User. В открывшемся файле между квадратными скобками вставляем наш код:

{ "keys": ["alt+shift+v"], "command": "reindent" }

Сочетание клавиш можете придумать свое. Главное, чтобы оно не совпадала с уже имеющимися в системе горячими клавишами. Проверить можно в файле Preferences — Key Bindings-Default.

Все готово, берем любую кривую html верстку, выделяем ее и жмем alt+shift+v.

Прочие настройки редактора

Стандартные Preferences — Settings-Default. Чтобы их переопределить, делаем свои пользовательские Preferences — Settings-User. Не буду объяснять все, переведите комментарии в Google переводчике и посмотрите какие параметры вам нужно изменять, а какие оставить.

Я бы сделал

"fold_buttons": false,

это отключает кнопки треугольники для сворачивания блоков кода.

"auto_complete": false,

для тех кто использует Emmet и не нуждается в функции Автокомплит.