Текстовый редактор Sublime Text

24 февраля 2019 | Инструменты разработчика

Sublime Text — текстовый редактор, активно использующийся программистами всех мастей, когда нужно легко и быстро (иногда сложно и медленно) разработать код.

Установка и начальная настройка Sublime

Скачать и установить дистрибутив можно с официального сайта Sublime.

Для первоначальной настройки Sublime надо открыть Preferences → Settings (или нажать Cmd + ,). Откроется 2 вкладки:

  • Preferences.sublime-settings – Default — настройки по-умолчанию (с описанием каждого параметра).
  • Preferences.sublime-settings – User — пользовательские настройки. Их-то и нужно менять/добавлять.

Мои настройки выглядят весьма лаконично.

{
  "color_scheme": "Packages/User/SublimeLinter/Monokai (SL).tmTheme",
  "draw_white_space": "all",
  "ignored_packages":
  [
    "Vintage"
  ],
  "save_on_focus_lost": true,
  "tab_size": 2,
  "translate_tabs_to_spaces": true,
  "trim_trailing_white_space_on_save": true,
  "fallback_encoding": "Cyrillic (Windows 1251)"
}

Параметры "color_scheme", "draw_white_space" и "ignored_packages" установлены по-умолчанию. Остальные добавлены мной:

"save_on_focus_lost": true — позволяет автоматически сохранять текущий файл всякий раз, когда с него уходит фокус (при переключении на другую вкладку или в другое приложение). Если вы не хотите после каждого редактирования жать Сохранить — поставьте true.

"tab_size": 2 — определяет, скольки пробелам соответсвует один Tab.

"translate_tabs_to_spaces": true — превращает Tab в пробелы. При табуляции вместо Tab будет вставляться эквивалентное число пробелов (указанное в предыдущем параметре).

"trim_trailing_white_space_on_save": true — при сохранении файла удаляет все «лишние» пробелы, идущие в конце строки.

"fallback_encoding": "Cyrillic (Windows 1251)" — определяет кодировку, которая будет использоваться, если автоопределение кодировки невозможно. По-умолчанию, автоматически определяются кодировки ASCII, UTF-8 и UTF-16. Параметр бывает полезен для решения проблемы с открытием некоторых русскоязычных файлов.

Для работы в Sublime удобно использовать горячие клавиши Sublime (PDF)

Плагины Sublime

Пакетный менеджер в Sublime называется Package Control и по умолчанию он… не установлен. Впрочем, установить его не сложно, достаточно открыть консоль и вставить код, указанный на официальной странице.
Установка плагинов:

  1. Открыть Package Control: Preferences → Package Control или Cmd + Shft + P
  2. Выбрать Package Control: Install Package
  3. Ввести название плагина и выбрать его для установки

Список установленных плагинов можно посмотреть так: Preferences → Package Settings → Package Control → Setting User (параметр installed_packages):

{
  "bootstrapped": true,
  "in_process_packages":
  [
  ],
  "installed_packages":
    [
	"AdvancedNewFile",
	"Babel",
	"Better CoffeeScript",
	"Color Highlighter",
	"CSScomb",
	"Emmet",
	"Nodejs",
	"Package Control",
	"Pug",
	"SCSS",
	"SideBarEnhancements",
	"SublimeCodeIntel",
	"SublimeLinter",
	"SublimeLinter-eslint",
	"TypeScript Syntax"
    ]
}

Некоторые плагины, которые я использую:

  • Package Control

    • Сам пакетный менеджер для установки плагинов.

  • sublime-emmet

    • Ускоряет написание кода (прежде всего, html и css) при помощи аббревиатур и шот-катов. К примеру, введя в css-файле ib и нажав Tab мы получим css-свойство display: inline-block;.
    Введенный в html-файле знак ! развернется в полноценную заготовку для нашего будущего макета:

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

    А набрав:

    ul.list>li.list-item{Item $}*5

    Получим:

    <ul class="list">
  <li class="list-item">Item 1</li>
  <li class="list-item">Item 2</li>
  <li class="list-item">Item 3</li>
  <li class="list-item">Item 4</li>
  <li class="list-item">Item 5</li>
</ul>
  • SideBarEnhancements

    • Расширяет возможности сайдбара по работе с файлами — открытие в браузере, создание, переименование, дублирование, копирование адресов и т.д.

  • AdvancedNewFile

    • Позволяет быстро создавать новые файлы в проекте (не покидая окна Sublime).
    Для этого нужно открыть проект, нажать Cmd + Alt + N и ввести название файла и путь к нему.

  • Color Highlighter

    • Показывает цветные метки рядом со стилевыми свойствами, задающими цвет. А также позволяет быстро переключаться между форматами записи цвета (hex, rgb, hsl и др.).

  • CSSComb

    • Форматирует css-код в заданном формате (определяет порядок свойств, наличие пробелов, переносов строк и др.) Можно создавать свою собственную конфигурацию.

  • Pug, SCSS, LESS, Stylus и т.д.

    • Добавляет подсветку для соответствующего синтаксиса

Сниппеты Sublime

Сниппет — это просто блок кода (html, css, js или любой другой). В Sublime существует возможность вставлять значительные блоки кода используя аббревиатуры и шот-каты. Т.е. сниппеты работают так же как и вышеупомянутый плагин Emmet, только в Emmet вы используете уже готовый набор шот-катов, а через сниппеты можете создавать свои собственные.

Создание сниппета

Для создания сниппета заходим Tools → Developer → New snippet…. Открывается окно с заготовкой для сниппета.

<snippet>
  <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <!-- <tabTrigger>hello</tabTrigger> -->
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <!-- <scope>source.python</scope> -->
</snippet>

Остановимся поподробнее на его содержимом.

Тэг <content>

В тэге <content> присутствует параметр <![CDATA[...]]> — это и есть наш блок кода, в который будет разворачиваться шот-кат при нажатии Tab. В примере по умолчанию мы видим простой текст и два значения: ${1:this} и ${2:snippet} — это контрольные точки. Во-первых, они определяют позиции, на которые будет установлен курсор после разворачивания кода: {1} и {2}. Переключаться между позициями можно также с помощью Tab. Во-вторых, для этих контрольных точек можно задавать значения по умолчанию. Т.е. в примере выше при набирании hello и нажатии Tab шот-кат развернется в блок кода Hello, ${1:this} is a ${2:snippet}, курсор установится в позицию $1 со значением по умолчанию this, если еще раз нажать Tab, курсор перейдет в позицию $2 со значением snippet.

Подобно тому как в Sublime можно создавать множественные курсоры (зажимая Cmd), в сниппете также возможно создание множественных курсоров — достаточно нескольким ключевым позициям задать один и тот же порядковый номер:

<h1 class="{1:title}" data-type="${1:title}">{2}</h1>

Тэги <tabTrigger> и <scope>

В тэге <tabTrigger> указывается шот-код для сниппета.
В тэге <scope> указывается область применения сниппета, т.е. в каких именно файлах он будет доступен. Если нужен сниппет для html, указывается text.html(.basic) для css — source.css, для js — source.js и так далее. Если оставить тэг scope пустым — то сниппет будет доступен везде. Полный список сниппетов можно посмотреть тут.

Пример собственного сниппеты

Допустим, нужно написать сниппет, который при наборе шот-кода log разворачивается в console.log(''); с курсором, установленным на кавычках, и который будет доступен в js-файлах.
Такой сниппет будет выглядеть так:

<snippet>
  <content><![CDATA[
console.log('${1:logtext}');
]]></content>
  <tabTrigger>log</tabTrigger>
  <scope>source.js</scope>
</snippet>

После надо сохранить сниппет банальным Ctrl+S. По умолчанию сниппеты сохраняются в папку: /Users/<your_user_name>/Library/Application Support/Sublime Text 3/Packages/User.

Для сниппетов лучше создать отдельную папку и запомнить ее расположение, потому что если мы захотим отредактировать этот сниппет позже, нам придется искать его практически вручную тут: Preferences → Browse Packages.

Проверено на версии Sublime: 3.1.1
ОС: macOS Sierra 10.12.6

Метки: , ,

«
»