Найти в Дзене
Дмитрий Самарин

Sublime Text 3

Если вы web-разработчик, то вам обязательно нужен будет редактор кода.

Сегодня в этой статье я вам расскажу о таком редакторе кода, как Sublime Text 3.

Говорю сразу, это редактор кода, который подойдёт исключительно новичкам и больше подходить он может только новичкам.

Почему новичкам, так как многие вещи надо настраивать.

И так скачаем с официального сайта наш редактор.

При установке обязательно поставить галочку, Add to explorer context menu.

https://www.sublimetext.com/3

Когда мы его установим, нам надо сразу установить плагины.

Чтобы скачать плагины, вам надо перейти на сайт плагинов https://packagecontrol.io/installation дальше, заходим в редактор кода зажимаем Ctrl-~

Появится окошко снизу, скопированный текст туда вставить.

После этого закрыть Sublime Text и заново открыть, это позволит перезагрузить редактор кода.

В ST3 запускаем Ctrl+Shift+P, выбираем install package, происходят чудеса.

Сначала мы поставим плагин emmet.

Этот плагин позволяет, нажмём к примеру восклицательный знак и Tab, развернётся основной код.

Нажать точку название класса, будет открывающейся div и закрывающейся.

Если вы хотите использовать предпроцессоры, sass, less, stylus, так же пишите в это окошко к примеру, я использую sass плагин.

Зажимаете Ctrl+Shift+P, выбираете install package пишите sass

Enter

Плагин установлен.

Ещё вот что, у Sublime Text очень некрасивая дефолтная тема, поэтому мы сейчас поставим новую тему.

Зажимаем Ctrl+Shift+P, выбираете install package, Material Theme.

Перезагружаем редактор.

Дальше заходим в верхнем меню Preferences- Package-Settings-Material-Theme-Activate и нажать на саму тему

Их будет несколько, поэтому нажать надо будет на тему Material-Theme она будет первая по списку.

Но чтобы у нас было красиво и с иконками эта тему, надо сделать ряд действий.

Preferences-Settings

Заходим в настройки.

Там будет код "theme": "Material-Theme.sublime-theme"

Но его надо заменить на

"theme": "Material-Theme.sublime-theme",

"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",

"overlay_scroll_bars": "enabled",

"line_padding_top": 3,

"line_padding_bottom": 3,

// On retina Mac

"font_options": [ "gray_antialias" ],

"always_show_minimap_viewport": true,

"bold_folder_labels": true,

// Highlight active indent

"indent_guide_options": [ "draw_normal", "draw_active" ]

Сначала мы устанавливаем плагин SideBarEnhancements

Потом установить другой плагин A Fail Icon

После установки видим красивые иконки. В сайд баре.

Ну и после всех этих настроек, основная фишка Sublime Text это плагин AutoFileName.

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

https://proglib.io/p/22-sublime-text-plugins-for-web/

https://proglib.io/p/15-sublime-text-plugins/

Наша группа в контакте: https://vk.com/programs_windows10