Настройка Sublime Text для Web-программиста

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

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

Установка плагинов и расширений в Sublime Text

Из видео выше Вы ознакомились с тем, каков механизм установки плагинов, и узнали как их инсталлировать и использовать. Ниже список плагинов, которые я настоятельно советую использовать при работе в Sublime Text.

• AdvancedNewFile
• All Autocomplete
• Color Highlight
• Emmet
• Hightliter
• HTMLBeauty
• Sass

Просто копируем названия данного плагина и устанавливаем его так, как я рассказываю в видео инструкции к данной статье. Давайте теперь разберем более подробно данные пакеты расширений для Sublime Text.

AdvancedNewFile

Этот плагин позволяет быстрее создавать файлы внутри проекта.

All Autocomplete

Расширяет автозаполнение по умолчанию для поиска совпадений во всех открытых файлах. По умолчанию Sublime Text учитывает только слова, найденные в текущем файле. Теперь ищет во всех открытых. Это очень удобно.

Color Highlight

Показывать цветовые коды (например, «#ffffff», 0xffffff «rgb(255, 255, 255)», «white», hsl(0, 0%, 100%) и т. д.) с их реальным цветом в качестве фона.

Emmet

С помощью Emmet вы можете вводить выражения (аббревиатуры), аналогичные селекторам CSS, и конвертировать их во фрагмент кода одним нажатием клавиши.

Hightliter

Выделяет табуляции и пробелы, очень нужная вещь.

HTMLBeauty

Плагин для Sublime Text, который форматирует (отступы) исходный код HTML. Это облегчает чтение кода для людей.

Sass

Определения синтаксиса Sass для Sublime Text на основе синтаксиса CSS. Настоятельно советую установить данный пакет, особенно, если Вы работаете с Sass.

Дополнительные настройки для Sublime Text

После установки всех необходимых плагинов — наш финальный штрих подбить под себя настройки и визуальные элементы. Ниже я публикую код со всеми настройками. Вам необходимо просто скопировать его и вставить так, как я рассказываю на видео под кодом.

{
	"auto_complete": true,
	"bold_folder_labels": true,
	"color_scheme": "Packages/Theme - Gravity/One Dark Gravity.tmTheme",
	"fold_buttons": false,
	"font_face": "Fira Code",
	"font_size": 11,
	"gravity_tab_font_small": true,
	"gravity_tab_height_short": true,
	"highlight_line": true,
	"ignored_packages":
	[
		"Vintage",
	],
	"indent_guide_options":
	[
		"draw_normal",
		"draw_active"
	],
	"line_padding_bottom": 2,
	"line_padding_top": 2,
	"margin": 2,
	"mini_diff": false,
	"open_files_in_new_window": false,
	"scroll_past_end": true,
	"show_definitions": true,
	"tab_size": 2,
	"theme": "Gravity One.sublime-theme",
	"word_wrap": true,
	"index_files": true,
}

Собственная настройка Sublime Text