УЧЕБНЫЕ МАТЕРИАЛЫ

Web-верстка, компьютерная графика,
мультимедиа

Редактор кода Sublime Text. Установка и настройка

Переходим на сайт редактора Sublime Text https://www.sublimetext.com/

Находим вкладку Download.

Выбираем Windows 64 bit и скачиваем инсталлятор Sublime Text Build 3211 x64 Setup.exe.

Запускаем инсталлятор. Нажимаем Запустить.

Установка редактора кода SublimeText

В следующем окне видим стандартный путь для установки программы. Нажимаем Next.

Установка редактора кода SublimeText

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

Установка редактора кода SublimeText

В следующем окне нажимаем Install.

Установка редактора кода SublimeText

По окончании установки нажимаем Finish.

После этого запускаем программу, щелкнув по ярлыку на рабочем столе.

Запуск редактора кода SublimeText

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

Отличие бесплатной версии от платной в том, что в шапке программы присутствует надпись UNREGISTERED

Запуск редактора кода SublimeText

И иногда появляется окно, предлагающее зарегистрировать и оплатить программу. Можно нажать Отмена и работать дальше.

Запуск редактора кода SublimeText

Настройка внешнего вида программы Sublime Text. Настройка цветовых схем

Сначала отобразим боковую панель. Для этого надо выполнить команду Yiew – Side Bar – Show Side Bar

Настройка редактора кода SublimeText

Слева откроется панель, в которой будут отображаться файлы и папки верстки.

Настройка редактора кода SublimeText

Можно перетащить папку с файлами на левую панель.

Настройка редактора кода SublimeText

Настроим цветовую схему программы и кода. Для этого откроем файл с кодом html и перейдем по команде Preference – Color Scheme…

Настройка цветовых схем редактора кода SublimeText

Открывается окно с предустановленными цветовыми схемами

Настройка цветовых схем редактора кода SublimeText

При выборе любой из схем, изменяется цветовое оформление окна программы Sublime Text.

Можно установить дополнительные цветовые схемы, которые можно найти на сайте с дополнениями SublimeText - https://packagecontrol.io/ в разделе https://packagecontrol.io/browse/labels/color%20scheme

Для того, чтобы подгружать в программу дополнительные цветовые схемы, необходимо сначала установить установщик.

Для этого переходим в меню Tools – Command Palette…

Установщик плагинов редактора кода SublimeText

Появится окно с полем поиска.

Установщик плагинов редактора кода SublimeText

В поле поиска вводим install, пока не появится Install Package Control и нажимаем на него.

Установщик плагинов редактора кода SublimeText

Через некоторое время появится окно об успешной установке Package Control.

Установщик плагинов редактора кода SublimeText

Снова вызываем команду меню Tools – Command Palette…, в поле вводим install, пока не появится Package Control: Install Package и нажимаем на него.

Установщик плагинов редактора кода SublimeText

Через некоторое время появится окно со списком доступных дополнений.

Настройка цветовых схем редактора кода SublimeText

В поле поиска вводим название темы Base 16 Color Scheme.

Настройка цветовой схемы Base 16 Color редактора кода SublimeText

Нажимаем на этот пункт и ждем установки.

После установки переходим к смене схем. Выполняем команду Preferences – Color Scheme.

Настройка цветовой схемы Base 16 Color редактора кода SublimeText

И видим, что в списке появилось гораздо больше цветовых схем.

Настройка цветовой схемы Base 16 Color редактора кода SublimeText

Наберем в строке поиска Ocean и выбираем эту тему.

Настройка цветовой схемы Ocean редактора кода SublimeText

Видим, что цветовое оформление изменилось.

Настройка цветовой схемы Ocean редактора кода SublimeText

Методом перебора Вы можете подобрать для себя другую понравившуюся цветовую схему.

После этого выберем команду Preference – Theme…

Настройка цветовой схемы редактора кода SublimeText

И в появившемся окне щелкнем по Adaptive.sublime-theme.

Настройка цветовой схемы редактора кода SublimeText

После этого левая панель программы и окружение также стали темными.

Настройка цветовой схемы редактора кода SublimeText

Сделаем еще дополнительные настройки. Выполним команду Prefernce - Settings

Настройка цветовой схемы редактора кода SublimeText

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

Настройка цветовой схемы редактора кода SublimeText

В правом окне уже прописаны некоторые настройки цветовой схемы.

Внесите запись "margin": 0, //Убираем отступ

И сохраните файл командой File – Save. Весь код немного подвинулся влево.

Настройка цветовой схемы редактора кода SublimeText

Чтобы увеличить или уменьшить размер шрифта в окне программы, достаточно зажать клавишу Ctrl и крутить колесико. Чтобы вернуться к настройкам по умолчанию, надо выполнить команду Preference – Font – Reset

Настройка шрифтов редактора кода SublimeText

Пропишем еще несколько настроек:

“tab_size”: 3, //Размер табуляции – т.е. насколько сместится курсор влево при нажатии клавиши Tab

"word_wrap": "true", //Перенос строк всегда

Настройка редактора кода SublimeText

Закройте это окно.

Продолжим настраивать окно программы. Часто в ходе верстки необходимо отображать два файла: html и css. Для этого необходимо разделить окно программы на две части. Сделать это можно командой Yiew – Layout – Columns: 2

Настройка редактора кода SublimeText

Теперь мы можем расположить два файла с кодом рядом.

Настройка редактора кода SublimeText

Синтаксис имеет определенную подсветку для каждого языка. Чтобы увидеть весь список языков и синтаксисов, надо нажать в правом нижнем углу программы на пиктограмму языка. Например, для файла html в правом нижнем углу будет запись HTML, для файла css соответственно запись CSS. Надо щелкнуть по этой записи и появится весь доступный список.

Настройка редактора кода SublimeText

Но, чтобы синтаксис подсвечивался должны быть установлены соответствующие схемы.

Установим дополнительные схемы подсветки синтаксиса.

Например, для файлов SCSS в программе нет предустановленной подсветки синтаксиса. Если мы откроем файл SCSS, то увидим только белый цвет.

Настройка редактора кода SublimeText

Выбираем команду меню Tools – Command Palette…, далее вводим install и выбираем Package Control: Install Package.

Настройка редактора кода SublimeText

Вводим SCSS.

Настройка редактора кода SublimeText

После установки в левом нижнем углу окна программы появится запись об успешной установке, но запись быстро исчезнет. Можно проверить, что синтаксис SCSS появился в общем списке. Т.е. в правом нижнем углу вызываем список и видим SCSS в конце списка.

Настройка редактора кода SublimeText

Установка необходимых плагинов

Auto File Name – необходим для того, чтобы Sublime Text автоматически прописывал пути к файлам, например, к картинкам.

Выполняем знакомую нам команду Tools – Command Palette…, далее вводим install и выбираем Package Control: Install Package и затем AutoFileName.

Настройка плагина AutoFileName редактора кода SublimeText

После установки этого плагина в коде можно видеть содержимое папки, например, img и выбрать соответствующий файл.

Настройка плагина AutoFileName редактора кода SublimeText

Bracket Highlighter – плагин подсветки начальных и конечных элементов, например открывающего и закрывающего тегов, начальной и конечной кавычки, открывающей и закрывающей скобки и т.д.

Настройка плагина BracketHighlighter редактора кода SublimeText

Color Highlighter – показывает образец цвета в коде. Например, на рисунке ниже рядом с записью color: #f00 появился желтый квадрат (образец цвета). Так работает плагин Color Highlighter.

Настройка плагина Color Highlighter редактора кода SublimeText

Дополнительные настройки плагина можно сделать, выполнив команду Tools – Color Highlighter

Настройка плагина Color Highlighter редактора кода SublimeText

Emmet – позволяет с помощью сокращений писать команды кода.

Например, чтобы написать такой код <div class=”main”></div>  необходимо в редакторе набрать только имя класса и нажать клавишу Tab. Т.е. надо записать  .main и нажать Tab

После установки необходимо перезапустить программу.

Список сокращений Emmet можно посмотреть по ссылке https://webdesign-master.ru/blog/html-css/2.html

Goto Css Declaration – навигация в коде. Например, чтобы найти блок стилей для какого-либо класса в большом файле css, необходимо в html файле установить курсор на имя этого класса и нажать горячую клавишу. После этого в файле css курсор автоматически переместится в соответствующий блок стилей.

Чтобы создать горячую клавишу, необходимо после установки плагина выполнить команду Preferences – Key Bindings.

Настройка плагина Goto Css Declaration  редактора кода SublimeText

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

Например, сделаем следующую запись

[
                {
                               "keys": ["ctrl+q"], "command": "goto_css_declaration",
                               "args": {"goto": "next"}
                }
]

Настройка плагина Goto Css Declaration  редактора кода SublimeText

Тогда переход из html файла на нужный класс в таблице стилей css будет по нажатию клавиш ctrl+q. Не забываем, что в html-файле курсор должен стоять на имени класса, который ищем в таблице стилей.

eCSStractor – плагин позволяет извлекать селекторы sass из html-кода.

Выберите в меню программы Preferences – Package Settings – eCSStractor – Key Bindings – User. Наберите следующий код.

Настройка плагина GeCSStractor  редактора кода SublimeText

Выберите в меню программы Preferences – Package Settings – eCSStractor – Settings – User. Наберите следующий код.

Настройка плагина GeCSStractor  редактора кода SublimeText

Теперь можно извлекать селекторы, соответствующие методолигии БЭМ, прямо из HTML кода сочетанием клавиш Ctrl+`(ё).

Tag – позволяет извлекать css селекторы из выделенного фрагмента html-кода.

Устанавливает плагин вручную. Сначала скачайте сам плагин здесь. Затем распакуйте в папку по следующему адресу

C;\Users\Твое имя пользователя\AppData\Rroaming\Sublime Text 3\ Packages

Настройка плагина Tag редактора кода SublimeText

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

Теперь надо добавить горячую клавишу. Заходим Preferences – Key Bindings. Если была предыдущая запись, новую пишем через запятую. Введите следующий код.

Настройка плагина Tag редактора кода SublimeText

Весь наш файл с учетом предыдущих установок и настроек выглядит следующим образом. У Вас он может выглядеть по-другому. Главное обратите внимание на то, что записи разделяются запятыми (строки 5 и 9).

Настройка плагина Tag редактора кода SublimeText

 

Таким образом:

Ссылки для редактора Sublime Text:

Сайт программы - https://sublimetext.com/

Дополнения - https://packagecontrol.io/

Цветовые схемы - https://packagecontrol.io/browse/labels/color%20scheme

Необходимые плагины:

AutoFileName – необходим для того, чтобы Sublime Text автоматически прописывал пути к файлам, например, к картинкам.

BracketHighlighter – плагин подсветки начальных и конечных элементов, например открывающего и закрывающего тегов, начальной и конечной кавычки, открывающей и закрывающей скобки и т.д.

ColorHighlighter – показывает образец цвета в коде. Например, на рисунке ниже рядом с записью color: #f00 появился желтый квадрат (образец цвета).

Emmet – позволяет с помощью сокращений писать команды кода. https://emmet.io/

Ссылка на справочник сокращений плагина Emmet – https://webdesign-master.ru/blog/html-css/2.html

Goto-CSS-Declaration – навигация в коде. Чтобы найти блок стилей для какого-либо класса в большом файле css, необходимо в html файле установить курсор на имя этого класса и нажать горячую клавишу. После этого в файле css курсор автоматически переместится в соответствующий блок стилей.

eCSStractor – плагин позволяет извлекать селекторы sass из html-кода. https://packagecontrol.io/packages/eCSStractor

Tag – позволяет извлекать селекторы css из выделенного фрагмента html-кода.Tag.zip Путь для распаковки плагина - C:\Users\ Твое имя пользователя \AppData\Roaming\Sublime Text 3\Packages

а также цветовую схему Base16 Color Scheme и подсветку синтаксиса SASS.

Просмотреть все установленные плагины в Sublime Text можно командой Preferences – Package Settings

Просмотр установленных плагинов редактора кода SublimeText