Как установить и настроить Sublime Text 3 для html верстки

Как установить и настроить sublime text для html верстки

Приветствую вас на сайте Bookamba. Тема сегодняшней статьи – установка и настройка редактора Sublime text 3, уверен по аналогии и для Sublime text 2 данная инструкция тоже подойдет.

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

Так же настроим окружение редактора Sublime. Настраивать я буду его, как удобно мне. Вы же в свою очередь можете что-то настроить на свой вкус. Большинство настроек, которые я буду использовать я прокомментирую, по этому настроить при желании Sublime под себя, у вас не составит труда.

Я подготовил список плагинов, пакетов и тем, которые мы сегодня установим.
Первым делом мы конечно же установи сам Sublime text 3, для этого перейдем по ссылке https://www.sublimetext.com/3 и скачаем версию для вашей ОС. Далее после установки, первым делом установим панель управления пакетами – Package Control, для этого перейдем на официальный сайт Package Control и выполним инструкцию по его установке https://packagecontrol.io/installation

Как видим, для того, чтобы установить Package Control, нам необходимо нажать на клавиатуре следующее сочетание клавиш Ctrl + (или для макентошников command + ) для того, чтобы вызвать консоль редактора Sublime, после чего в консоль копируем и вставляем код, показанный на сайте из вкладки для нашей версии Sublime text 3

После того, как менеджер пакетов установлен, приступаем к установке пакетов, которые помогут нам в верстке. Я не претендую на то, что мой список идеален и его больше нечем дополнить. Я лишь разберу те пакеты и темы, которыми пользуюсь сам. Буду рад вашим комментариям оставленным к этому посту, с вашими рекомендациями по пакетам, которые я не рассмотрел.

Итак, вот список пакетов, которыми я пользуюсь

  • Emmet
  • JavaScript & NodeJS Snippets
  • FakeImg Placeholder Snippet
  • Color Highlighter
  • HTML5
  • Terminal
  • Sass
  • Material Theme

Где брать пакеты для Sublime Text 3

Перед тем как устанавливать все эти пакеты, давайте отвлечемся на минуту и я покажу откуда я их взял и где можно прочитать, что они умеют. На официальном сайте самого менеджера пакетов Package Control https://packagecontrol.io/, прямо на главной странице, можно увидеть список самых популярных пакетов, пакетов набирающих популярность и тд. Конечно есть поиск по всему этому добру. Если к примеру ввести в поиск Emmet, можно увидеть список пакетов, содержащих в себе слово Emmet. Мы же перейдем по самому популярному из них, установленному уже почти 3 миллиона раз. На странице пакета Emmet можно почитать ридми по настройке и установке. Например в ридми по установке написано, что для установки Emmet, необходимо запустить менеджер пакетов и написать Emmet, после чего нажать Enter и установить пакет. Далее, опять-таки, на этой же странице мы можем увидеть официальный сайт разработчиков этого пакета https://emmet.io/. Если перейти на него, здесь мы сможем почитать для чего этот пакет нужен и всю информацию связанную с ним. Например, можно запустить демо видео и увидеть, как устроен Emmet и какую мощь он несет в своем функционале.

Абсолютно по такому же принципу вы можете изучить информацию по всем остальным пакетам, плагинам и темам.

Как устанавливать пакеты Sublime Text 3

А теперь давайте приступим к установке пакетов. В окне редактора нажимаем сочетание клавиш Ctrl + Shift + p, для того, что-бы открыть окно списка функций. Далее вводим package control: install package, ждем, что-бы под грузился менеджер пакетов, а теперь вводим название первого плагина – emmet и жмем enter. Внизу редактора при установке пакетов видно плавающее равно, это обозначение того, что пакет устанавливается. Как только равно пропадает, пакет можно считать установленным. Иногда после установки того или иного пакета открывается текстовый файл со справкой или с настройками пакета. В таком случае, как правило, просто достаточно закрыть этот файл.

Далее проделываем то же самое со следующими пакетами…

Как настроить Sublime Text 3

Поле того, как мы установили все необходимое, давайте настроим окружение – пользовательские настройки редактора. Для начала давайте перейдем в меню Preferences -> Settings. Здесь в левом окне мы можем наблюдать все доступные настройки редактора выставленные по умолчанию. В правом же окне мы можем переопределять эти настройки так, как нам это удобно.

Мои настройки выглядят следующим образом:

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

“fold_buttons”: false
По умолчанию в Sublime, слева возле номеров строк, есть такие треугольники – если выделить участок кода, можно нажать на этот треугольник и свернуть тот или иной участок кода. Мне кажется эта настройка при верстке – неудобной и ненужной, поэтому я отключаю ее.

“font_size”: 12
Тут думаю все понятно, это размер шрифта в редакторе.

“highlight_line”: true
Подсветка строки по горизонтали, на которой находится каретка.

“remember_full_screen”: true
Если в момент, когда вы закрыли редактор, он был развернут на весь экран, то при следующем открытии Sublime text, он откроется в полноэкранном режиме.

“show_encoding”: true
Если установить эту опцию в true, внизу справа в панели, появится строка, в которой можно прочитать текущую кодировку файла. Это очень удобно, особенно если вы используете сторонние плагины, разработчики которых могли по ошибке или по невнимательности сохранить файл в какой-то кривой кодировке. Такое конечно очень редко встречается. Но лично мне просто спокойней видеть, что все файлы с которыми я работаю у меня utf-8 и что все хорошо (:

“tab_size”: 4
При нажатии на tab появляется отступ. Я предпочитаю, чтобы по умолчанию этот отступ был равен четырем пробелам, мне так удобней оценивать блоки кода и они не сливаются.

“word_wrap”: false
Если установить эту опцию в false, то длинные строки не будут переноситься на следующую строку. То есть у вас будет появляться горизонтальный скролл. В верстке мне кажется это удобным.

“margin”: 5
Отступ кода слева от края редактора.

Далее идет список настроек, которые нам рекомендуют установить разработчики темы Material Theme, это можно прочитать у них на сайте проекта, на гитхабе https://github.com/equinusocio/material-theme, к эти настройкам относятся следующие свойства описанные ниже.

“always_show_minimap_viewport”: true
Показывать в вертикальном скролле подсветку уменьшенной копии кода. Кому как удобно, я привык к этой функции и юзаю ее. Если же вам не нравится такое, можете ее отключить

“bold_folder_labels”: true
В сайдбаре, там где отображается список папок и файлов проекта, делает текст более жирным и ярким.

“font_options”: [“gray_antialias”, “subpixel_antialias”]
Рекомендуемые настройки шрифтов

“indent_guide_options”: [“draw_normal”, “draw_active”]
Эта настройка нужна для того, что-бы редактор отображал белую пунктирную вертикальную черту слева от блока кода, внутри которого находится каретка. Опять же, кому как удобно. Мне лично помогает эта настройка, чтобы визуально видеть, в каком участке кода я нахожусь, особенно если блоки большие.

“line padding bottom”: 2.5
“line_padding_top”: 2.5
Эти две настройки отвечают за отступ между строками кода сверху и внизу.

“overlay scrollbars”: “enabled”
Эта настройка по моему отвечает за скрытие/отображение скроллбаров по умолчанию.

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

Отвлеклись, идем далее
“color_scheme”: “Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme”
“theme”: “Material-Theme.sublime-theme”
Эти две строки нужны для того, чтобы активировать тему и ее цветовую палитру
Так как мы установили тему Material Theme, ее мы и активируем

Следующие же настройки относятся непосредственно к настройке самой темы, и почитать об их функционале вы можете на их сайте. Именно за это мне и нравится данная тема. Она обладает множеством настроек, которые вы сможете подобрать индивидуально под себя.

“material_theme_accent_cyan”: true
Установит основной свет папок и вкладок. Мне симпатизирует этот цвет, потому-что, как раз-таки, он максимально похож на Brackets ))) Не скажу, что я фанат Brackets, но его оформление мне нравится, компания Adobe не будет придумывать всякие хухры-мухры дизайны

“material_theme_bullet_tree_indicator”: true
Эта настройка отвечает за то, чтобы отображать точку в сайдбаре слева от того файла, который в данный момент открыт на редактирование в редакторе

“material_theme_compact_sidebar”: true
“material_theme_small_tab”: true
Эти две настройки делают сайдбар и иконки немного меньше стандартных, смотрится компактно и красиво.

“material_theme_tabs_autowidth”: true
Автоматически выравнивать по ширине табы с открытыми файлами. Опять таки, можете по изменять настройки и пощупать их, как вам удобнее.

Напомню, что список всех настроек темы Material Theme, можно почитать на их официальном сайте на гитхабе https://github.com/equinusocio/material-theme

Думаете, что все? А вот и не угадали, теперь давайте настроим Emmet, переопределим некоторые шаблоны эммета, для этого идем в меню
Preferences -> Package Settings -> Emmet -> Settings User и добавляем следующий код:

 
Лично меня раздражает, что в Emmet нельзя по умолчанию развернуть форму с методом post или get, а самое главное при разворачивании формы или ссылки, что Emmet не ставит заглушки в action и href в виде решетки, что являлось бы валидным html. Все, сохраняем и закрываем

Как настроить автоформатирование кода в sublime

Идем в меню
Preferences -> Key Bindings

Здесь по аналогии с настройками окружения можно видеть слева список всех горячих клавиш установленных по умолчанию. Мы же переопределим некоторые из них.

Лично у меня сочетание клавиш Ctrl + e ассоциируется со словом explorer ))) и мне привычней сворачивать и разворачивать левый сайдбар со списком папок и файлов проекта именно по нажатию этих горячих клавиш. Опять таки я не претендую, что это единственно верный вариант, просто делайте так, как лично вам удобно. По умолчанию в Sublime есть комбинации отвечающие за сворачивание и разворачивание сайдбара, но мне удобней именно такая комбинация.

Вторая же настройка лично у меня ассоциируется с IDE NetBeans, в которой для того, чтобы выровнять код нужно нажать комбинацию клавиш Alt + Shift + f именно по этой причине я предпочитаю и в sublime использовать такую же комбинацию. Разница лишь в том, что для того чтобы она сработала предварительно нам необходимо выделить участок кода, который мы хотим отформатировать.

И последнее, что мы сделаем – это скроем меню, для этого перейдем в меню View -> Hide Menu, после чего меню скроется и для доступа к нему мы теперь должны будем нажимать левый Alt

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

Как сохранить и перенести на другой компьютер все настройки Sublime Text 3

Ну и напоследок, кто дочитал до конца. Естественно у вас возник вопрос, что настраивать это все долго и неудобно всякий раз при переустановке операционной системы, или при переезде на другой ноутбук или ПК. Не отчаивайтесь, эти настройки достаточно сделать один раз, после чего просто копировать от компьютера к компьютеру. Для этого достаточно перейти в меню Preferences -> Browse Packages, откроется папка со всеми установками, перейдите в корневую директорию и скопируйте все папки сохранив их где-то у себя в архиве на облаке.

При новой же установке, после того, как вы установите Sublime, и перейдете в меню Preferences -> Browse Packages, путь будет другой, для того чтобы появился путь с локальными настройками, вам будет необходимо предварительно изменить настройки. Для этого просто перейдем в меню Preferences -> Settings и добавим справа пустой комментарий, сохраним, после этого sublime создаст папку с пользовательскими настройками. Вот после этих манипуляций, можно копировать туда папки с нашими сохраненными ранее настройками.
Примерные пути к папке с пользовательскими настройками для sublime text 3 для разных ОС для наглядности
MacOS: ~/Library/Application Support/Sublime Text 3/
Win: %AppData%\Sublime Text 3\
nix: ~/.config/sublime-text-3/

На этом все, спасибо за прочтение и, да – велкам на подробное видео по этой статье (:

Leave a Comment

Your email address will not be published.