Как настроить sublime text 3

Установка Sublime Text 3 в Manjaro

Установить Sublime Text в дистрибутивах основанных на Arch, а именно в Manjaro можно несколькими способами, первый из репозитория AUR. Для этого необходимо разумеется его включить в настройках, а затем в поисковой строке набрать Sublime Text и выбрать один из вариантов установки. Тут так же имеется стабильная версия (Stable) и версия для разработчиков (Dev):

Но, как писалось выше, есть и второй способ установки Sublime Text в Arch подобных дистрибутивах. Разработчики предоставляют для дистрибутивов Linux основанных на Arch свой собственный репозиторий. А это редкость, в основном большинство разработчиков программного обеспечения останавливаются на Ubuntu. Для того что бы подключить репозиторий Sublime Text первым делом нужно скачать и установить GPG ключ:

Затем выбрать ветку, либо стабильную (Stable) либо для разработчиков (Dev), будьте внимательны, от этого будет зависеть установленная версия Sublime Text в ваш дистрибутив Linux:

Stable

Dev

Ну собственно осталось лишь установить Sublime Text выполнив команду:

Плагины для Sublime Text

Emmet

Emmet — один из самых популярных плагинов Sublime Text 3, который загружен более 4 миллионов раз по всему миру. Вместо использования JavaScript этот плагин работает с CSS и HTML, что упрощает работу пользователей.

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

Alignment

Sublime Text 3 позволяет программистам записывать коды на разных компьютерных языках, таких как JavaScript, CSS, PHP и прочие. К тому же, этот плагин Alignment для редактора Sublime Text 3 позволяет быстро выровнять коды. Выделяйте строки текста, а затем используйте этот плагин для выравнивания кодов.

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

Advanced New File

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

Если вы работаете над проектом, который завершается в кратчайшие сроки, то этот плагин Advanced New File для вас подходит.

Gutter

Боковая панель Gutter помогает программистам добавлять подсказки для тестов. В результате, легко понять смысл или любые предложения, предоставленные разработчиками или программистами при работе над проектом.

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

Package Control

Если вы являетесь постоянным пользователем инструмента Sublime Text 3, тогда плагин Package Control является наиболее важным для вас. Плагин управления пакетами позволяет легко устанавливать, просматривать, загружать, обновлять плагины и пакеты в редакторе.

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

DockBlockr

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

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

Terminal

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

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

Sublime Linter

Sublime LinterSublime Linter — необходимый плагин для кодов и программистов, работающих в команде для конкретного проекта. Этот плагин заботится о каждом члене команды, предоставляя подходящую основу для проекта.

Устанавливаем Sublime Text 4 в Debian / Ubuntu

И так, давайте перейдем к установке Sublime Text 4 в дистрибутивах основанных на Deb пакетах, это Debian, Ubuntu, MX Linux, Linux Mint и так далее. Первым делом необходимо добавить репозиторий из которого и будет произведена установка. Открываем терминал и вводим команду:

Далее нужно загрузить и добавить в систему GPG ключ, предварительно у вас должна быть установлена утилита “wget, устанавливается она командой “”sudo apt install wget”. А так же установлен пакет “apt-transport-https”, для установки данного пакета, а так же добавления GPG ключей вводим следующую последовательность команд:

Осталось обновить списки пакетов и можно приступать к установке Sublime Text 4 в дистрибутивах Linux основанных на Deb пакетах:

После установки запускаем редактор кода Sublime Text и можем приступать к работе:

Часть 1. Установка и настройка Sublime Text 3

Скачиваем и устанавливаем Sublime Text 3

Идем на сайт Sublime Text в раздел Download, и скачиваем последнюю версию ST3, не забудьте соблюсти разрядность 64 бит, или обычную (x86) для вашей версии операционной системы. Скачали, устанавливаем. После установки запускаем — проверяем что он работает.

Установим горячие клавиши для реиндентации

Открываем Preferences → Key Bindings — Default И вверху файла добавляем строку:

Здесь указано что горячие клавиши будут alt+shift+f, и по нажатию будет происходить команда реиндент.

Возможные проблемы с настройками в Sublime Text

Если возникает проблема с сохранением или редактированием файла, то необходимо создать файл — который указан в ошибке. В моем случае это файл: C:UsersAdminAppDataRoamingSublime Text 3PackagesDefaultDefault (Windows).sublime-keymap Я создал его и сохранил по указанном пути. Теперь Preferences → Key Bindings — Default можно редактировать.

Есть аналогичная проблема с командой Preferences → Settings — Default, при открытии настроек их невозможно редактировать. Необходимо открыть, Нажать Ctrl+S, затем закрыть вкладку с настройками и открыть заново. После этого в C:UsersAdminAppDataRoamingSublime Text 3PackagesDefault должен появится файл с настройками — Preferences.sublime-settings — и настройки можно будет редактировать и сохранять.

Устанавливаем Package Control

Идем на сайт Package Control для ST3, и устанавливаем его. Package Control (PC) необходим для того чтобы расширять функциональность нашего редактора различными плагинами.

На сайте PC копируем код для ST3, в ST3 запускаем консоль (Ctrl +

) и вставляем код с сайта, жмем Enter и ждем успешной установки. После обязательно перезапускам ST3.

Проверим работу PC. Жмем Ctrl+Shift+P и набираем Package Control — Install Package. Уже набрав первые буквы — нужная строка будет автоматически подсвечена.

Sublime Text 3 — Package Control — установка плагинов

Топ 5 плагинов для Sublime Text 3

1. Emmet

Emmet — плагин, позволяющий сделать отображение кода более удобным. Здесь используются сочетания клавиш. К примеру, «html + tab» создает каркас документа, а «div.wrapper + tab» превратится в полноценный код:

2. JavaScript & NodeJS Snippets

Этот плагин представляет собой коллекцию сокращений снипсетов для JavaScript. Длина набираемого текста с помощью подсказок правда уменьшается! К примеру, вместо набора «document.querySelector(‘selector’);» можно просто набрать «qs + Tab».

3. Advanced New File

Зачем искать место для нового файла в неудобном дереве каталога? Данный плагин позволит быстро и эффекстивно ввести нужные данные, и файл будет создан буквально за пару нажатий клавиш!

4. Git

Название этого плагина говорит само за себя: вы сможете выполнять все необходимые действия в рамках Git’а, не выходя из редактора!

5. GitGutter

Этот плагин позволит пользователю не только обращаться с обычными командами Git, но и работать с изменением версий: отлавливать их, просматривать, сравнивать — и все в режиме реального времени.

Управляем окнами

alt+0 – 9	Выбор соответствующей вкладки.
ctrl+f4	Закрыть вкладку.
ctrl+tab	Переключиться на следующую вкладку.
ctrl+shift+tab	Переключиться на предыдущую вкладку.
ctrl+pageup	Переключиться на вкладку слева.
ctrl+pagedown	Переключиться на вкладку справа.
alt+shift+1 – 5	Управление количеством и расположением областей редактирования.
alt+shift+8 – 9	Управление количеством и расположением областей редактирования.
ctrl+1 – 4	Переключиться в соответствующую область.
ctrl+shift+1 – 4	Переместить вкладку в соответствующую область.
f11	Развернуть окно во весь экран.
shift+f11	Переключиться в «Отвлеченный режим».
ctrl+k, ctrl+b	Показать или скрыть боковую панель.
ctrl+0	Переключить фокус на боковую панель.
ctrl+n	Создать новую вкладку.
ctrl+w	Закрыть текущую вкладку.
ctrl+shift+n	Создать новое окно.
ctrl+shift+w	Закрыть окно.

Горячие клавиши

Горячие клавиши настраиваются по аналогии, но, в отличие от настроек, мы не знаем код команды. Поэтому, как и с основными настройками, идем на сайт программы, ищем клавишу, затем открываем Preferences Key Bindings — Default, через поиск находим полный код клавиши и переделываем ее при необходимости в файле Preferences Key Bindings — User

Нашел вот такое: «CTRL+Z Отмена последнего действия». Теперь открываю файл горячих клавиш по умолчанию и вбиваю в поиск сочетание клавиш (CTRL — прописывается не кнопкой, а четырьмя буквами).

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

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

В свою сборку вложил этот файл и подробное описание по установке и настройке.

Компиляция LESS кода. Плагин Less2CSS и его настройка

Если вы еще не в курсе, Less — это основанный на JavaScript CSS препроцессор. Это код который компилируется в CSS. Существуют разные способы компиляции less в css: Grunt, Guard, и Less.app. Однако возможно вы не хотите, или вам не нужно использовать дополнительные инструменты, и хочется все сделать прямо в редакторе кода. Ниже я привел инструкцию которая подойдет пользователям Windows (я сам делал установку по ней, и также для mac ОС.)

1. Устанавливаем Node.js
2. Устанавливаем NPM (устанавливается вместе с Node.js)
3. Устанавливаем Less Глобально. Открываем Windows консоль и вводим npm install less -gd
4. Установим плагин Less2Css и SublimeOnSaveBuild

Откроем настройки ST3: Preferences → Settings — Default, и в конец допишем строку:

Откроем любой .less файл и попробуем его собрать. Просто вносим изменения в файл, и жмем Ctrl+S.

Если возникла ошибка: Unable to interpret argument clean-css … Это произошло потому что плагин clean-css был обособлен, и не входит в пакет less. Поэтому его надо установить отдельно. Установим. Заходим в консоль и пишем:

Опять пробуем сохранить .less файл. Произошел билд less файла, и рядом с style.less файлом у меня появился готовый минифицированный style.css

Горячие клавиши и Sublime Text 3

Пользуйтесь на здоровье! Не забудьте сказать

Работа с текстом

Сочетание	Описание
Ctrl + l	Выделить строку
Ctrl + Shift + M	Выделить текст между двумя парными скобками
Ctrl + Shift + A	Выделить текст между двумя парными тегами
Ctrl + Shift + J	Выделить текст с соответствующим отступом
Ctrl + Shift + Space	Выделить по контексту
Ctrl + Shift + Left	Выделить слово слева
Ctrl + Shift + Right	Выделить слово справа
Ctrl + A	Выделить весь текст
Ctrl + Shift + Up	Переместить выделенные строки вверх
Ctrl + Shift + Down	Переместить выделенные строки вниз
Сtrl + Shift + D	Дублировать строку
Ctrl + Shift + K	Удалить строку
Ctrl + J	Объединить выделенные строки
Alt + Q	Объединить строки в параграфе
Ctrl + Enter	Добавить пустую строку под курсором
Ctrl + Shift + Enter	Добавить пустую строку над курсором
Ctrl + /	Добавить или убрать однострочный комментарий
Ctrl + Shift + /	Добавить или убрать блочный комментарий
F9	Отсортировать строки в алфавитном порядке
Ctrl + F9	Отсортировать строки в алфавитном порядке с учетом регистра
Ctrl + K, Ctrl + L	Трансформировать выделенный текст в нижний регистр
Сtrl + K, Ctrl + U	Трансформировать выделенный текст в верхний регистр
Alt + .	Закрыть незакрытый тег
Alt + Shift + W	Обернуть тегом выделенный текст
Ctrl + C	Копировать
Ctrl + V	Вставить
Ctrl + Shift + V	Вставить с отступом
Ctrl + X	Вырезать
Ctrl + Z	Отмена последнего действия
Ctrl + Shift + Z	Повторить последнее отмененное действие

Поиск и замена

Сочетание	Описание
Ctrl + F	Открыть панель поиска
Ctrl + H	Открыть панель поиска и замены
F6	Включить или выключить проверку правописания
Alt + C	Включить или выключить чувствительность к регистру на панели поиска и замены
Alt + Enter	Найти все
Shift + Enter	Поиск в обратном направлении
Ctrl + Alt + Enter	«Заменить все» на панели поиска и замены
Ctrl + Shift + H	Заменить текст далее
Ctrl + F3	Быстрый поиск
Ctrl + Shift + F3	Быстрый поиск в обратном направлении
Ctrl + D	Найти и выделить текст
Ctrl + K, Ctrl + D	Пропустить выделенный текст
Alt + F3	Найти все
Ctrl + F6	Перейти к следующей ошибке
Ctrl + Shift + F6	Перейти к предыдущей ошибке

Фолдинг

Сочетание	Описание
Сtrl + Shift + [	Свернуть код
Сtrl + Shift + ]	Развернуть код
Ctrl + K, Ctrl + 1 — 9	Свернуть код соответствующего уровня
Ctrl + K, Ctrl + 0	Развернуть все
Ctrl + K, Ctrl + T	Свернуть атрибуты тегов

Навигация

Сочетание	Описание
Ctrl + Alt + P	Открыть окно выбора проектов
Ctrl + F2	Установить или снять закладку
F2	Перейти к следующей закладке
Shift + F2	Перейти к предыдущей закладке
Alt + F2	Выделить все закладки
Ctrl + Shift + F2	Удалить все закладки
Ctrl + K, Ctrl + C	Переместить экран к курсору
Ctrl + Up	Прокрутка окна редактирования
Ctrl + Down	Прокрутка окна редактирования
Ctrl + M	Переместить курсор к парной скобке

Работа с файлами

Сочетание	Описание
Ctrl + O	Вызвать окно «Открыть файл»
Ctrl + Shift + T	Открыть последний закрытый файл
Ctrl + S	Сохранить текущий файл
Ctrl + Shift + S	Вызвать окно «Сохранить как»

Другое

Сочетание	Описание
Сtrl + Shift + P	Открыть окно списка функций
Ctrl + +	Увеличить размер шрифта
Ctrl + —	Уменьшить размер шрифта
Ctrl + Q	Запустить или остановить запись макроса
Ctrl + Shift + Q	Воспроизвести макрос
F7	Выполнить
Ctrl + Break	Отменить выполнение

Теги :

Работа в режиме room-редактора в Sublime Text 2

Если вы знакомы с таким понятием, как room-редакторы, то будете приятно удивлены, что в Sublime есть и подобная возможность. Для незнающих скажу, что в подобном режиме редактор разворачивается на весь экран, оставляя только пространство для работы

Скрываются все отвлекающие внимание элементы — как системные, так и собственно элементы управления редактором. На эту тему я даже когда-то писал отдельную статью

Чтобы перевести Sublime в такой режим, достаточно нажать Shift+F11.

Обратите внимание, что даже в полноэкранном режиме текст не растягивается на всю ширину экрана (что было бы неудобно), а располагается в максимально комфортном для работы виде. Не знаю как вам, а мне работать в таком режиме очень комфортно, особенно если долгое время нужно работать с кодом/текстом, ни на что другое не отвлекаясь — например, при написании статей

Не знаю как вам, а мне работать в таком режиме очень комфортно, особенно если долгое время нужно работать с кодом/текстом, ни на что другое не отвлекаясь — например, при написании статей.

Автодополнение и автоподстановка

Это еще два мощных и удобных инструмента.

Автодополнение — это в общем-то уже привычная фича практически любого редактора: по мере ввода редактор предлагает наиболее возможные варианты завершения. Выглядит это в виде выпадающего списка. Этот список вызывается так же нажатием Ctrl Space (Cmd Space).

Автоподстановка — похожая фича, и мне кажется что ее идея в Sublime заимствована из Zen Codding. Суть в том, что при вводе определенных сокращений и последующего нажатия Tab, происходит замена этого сокращения на полную форму. Например ввод заменяется на тег . Для тегов можно указывать классы и id, например преобразуется в .

Сам модуль Zen Codding, который теперь называется Emmet так же доступен для Sublime, но с появлением ST3 необходимость в нем для меня практически отпала. Хотя он, несомненно, предоставляет гораздо больше возможностей, например создавать такие конструкции . Результат преобразования:

Так что, если вам приходится много работать с HTML — крайне рекомендую Emmet. Единственная причина почему мне пришлось его удалить — перекрытие автоподстановки по умолчанию, которая мне показалась удобнее в некоторых моментах.

Еще несколько полезных автоподстановок самого Sublime Text:

преобразуется в:

преобразуется в:

Про этот замечательный редактор я мог бы рассказывать часами. А какие у вас любимые фичи или модули для Sublime?

Регулярные выражения в Sublime Text 2

И в первую очередь мы разберем на примере, как использовать регулярные выражения при работе с Sublime Text 2. Регулярные выражения — это мощнейший инструмент, хорошо известный программистам. Однако он может быть полезен не только программистам, но и всем людям, работающим с кодом или простым текстом. Регэкспы (от RegExp) способны значительно облегчить вам жизнь и автоматизировать рутинные операции. И они просто незаменимы при необходимости поиска и замены текста по определенным признакам.

«Капитализация» текста

Предположим, нам нужно прописать с большой буквы каждое слово текста, заключенного в определенные теги. Как это можно сделать? Можно найти каждое вхождение тега и вручную изменить его содержимое. Но это долгий и утомительный способ, поэтому мы пойдем другим путем.

Маленькая хитрость

В Sublime есть инструмент для подобного управления регистром символов, и находится он в меню по адресу Edit → Convert Case → Title Case. Тот же инструмент доступен при поиске в командной панели — нажмите Ctrl+Shift+P и наберите там слово , либо наберите слово , чтобы увидеть другие доступные варианты манипуляций с регистром. Естественно, предварительно нужно выделить текст, с которым вы хотите производить манипуляции.

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

И тут нам на помощь приходят регулярные выражения.

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

<h2>.+</h2>

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

Однако по умолчанию регулярные выражения в поисковой форме не обрабатываются. Для того, чтобы они заработали, необходимо нажать кнопочку с символом * на той же поисковой панели. Того же эффекта можно добиться, нажав Ctrl+R (при этом поисковая панель должна быть активна).

Теперь Sublime должен подсветить ближайшее вхождение заданной последовательности.

Для того же, чтобы выделить все вхождения этой последовательности, необходимо (при активной поисковой строке) нажать Alt+Enter. При этом каждое вхождение будет выделено отдельно, используются уже знакомые нам по одной из предыдущих статей множественные курсоры.

Теперь нам осталось (не снимая выделения со строк) выполнить упомянутую выше операцию . Но после ее применения обнаруживается неприятность — с большой буквы начинается каждое слово, кроме первого:

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

(?<=<h2>).+(?=</h2>)

Тем самым мы ищем ту же последовательность, но исключаем из выделения сам тег, оставляя только его содержимое:

И если после этого выполнить команду , то на этот раз мы добьемся именно того эффекта, которого хотели:

Установка плагинов в Sublime Text

Далее необходимо установить нужные для работы плагины. Мы рассмотрим установку самых популярных среди верстальщиков плагины, которые значительно упрощают разработку. Вы также можете поэкспериментировать с другими плагинами в Package Control, может быть вам понравятся и другие из огромного количества доступных пакетов.

Самые популярные плагины для Sublime Text:

• Emmet — ускоряет написание HTML и CSS кода до скорости света. Урок по Emmet;
• AutoFileName — дополняет код при написании путей до файлов в вёрстке;
• Gist — подключает в Sublime Text возможность использовать сервис сниппетов кода GitHub Gist. Урок по Gist;
• Sass — плагин для подсветки Sass синтаксиса в Sass и Scss файлах. Раскрывает Emmet в Sass файлах.

Установка внешнего оформления Sublime Text

Мне очень нравится тема оформления One Dark Material Theme и подсветка кода соответствующей цветовой гаммой. Это наиболее сбалансированные, достаточно контрастные, но не слишком резкие цвета для комфортной работы в редакторе.

Дя установки цветового оформления One Dark нам необходимо доустановить следующие пакеты через Package Control:

• One Dark Color Scheme — цветовая схема для подсветки кода;
• One Dark Material — Theme — тема оформления UI Sublime Text.

Установка плагина вручную

Некоторые плагины более не обновляются в Package Control или просто там не фигурируют. Кое-какие из этих плагинов имеют жизненную необходимость при работе с кодом и их приходится устанавливать вручную.

Один из таких плагинов BufferScroll — потрясающий плагин, который при повторном открытии документа устанавливает курсор на том месте, на котором вы закончили редактирование в прошлый раз, тем самым сокращая время на поиск нужной позиции для продолжения работы.

Компиляция SASS в Sublime Text 3

SASS — это другой препроцессор для CSS. Набирает популярность, и уже обгоняет less по распространению использования.

• Устанавливаем Ruby
• Запускаем консоль, и ставим Ruby Gem gem install sass
• Устанавливаем плагин Sass для Sublime Text
• Устанавливаем плагин Sass Build для Sublime Text
• Устанавливаем плагин SublimeOnSave для Sublime Text (мы же говорили о этом плагине в инструкции выше)

Теперь добавим настройки в Sublime Text Settings – Default:

Также не забудьте при открытом .sass файле зайти и выбрать билд систему в Tools → Build System → SASS Compressed Теперь при сохранении .sass файла будет компилироваться .css.

Проекты в Sublime Text 2

Организация работы с проектами — это очередное достоинство Sublime Text 2 в сравнении с другими редакторами.

Создать проект в Sublime просто — для этого достаточно открыть редактор, в командной панели (Ctrl+Shift+P) набрать слово и выбрать пункт Project: Save As. Для добавления папок в текущий проект можно воспользоваться пунктом Project: Add Folder. Если же выбрать пункт Project: Edit, то можно вручную отредактировать параметры текущего проекта.

Например, при работе с CMS Joomla мне не нужно работать со всеми файлами ядра. Так зачем же отображать в дереве файлов все папки, если можно оставить только те, с которыми реально ведется работа? Сделать это можно, отредактировав список доступных в проекте папок (Project: Edit):

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

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

А еще в Sublime можно для каждого проекта задать свои собственные локальные настройки — размер табуляции, расстояние между строками и т.п. — все, что угодно. Подсмотреть доступные настройки можно в файле дефолтных настроек редактора (Preferences → Settings — Default).

Устанавливаем и настраиваем html препроцессор Jade

Jade — это препроцессор для написания html кода, и подобно less или sass для css, он ускоряет и упрощает (для опытных верстальщиков) написание html разметки. Как установить и настроить его работу.

• Должен быть установлен node.js с npm (обычно идет в комлпекте с node)
• Заходим в консоль и устанавливаем jade командой npm install jade —global
• В Sublime Text устанавливаем плагин Jade Build
• В Sublime Text открываем .jade файл и выбираем Jade build system
• Если вы выполняете всю инструкцию в этом посте, то в настройках Sublime я дополню строку про Save On Build расширением jade и теперь она будет выглядеть вот так «filename_filter»: «.(sass|scss|jade)$»,
• Устанавливаем в Sublime плагин Jade

После этих манипуляций происходит компилирование jade файлов.

Если нет подсветки кода Jade, то идем в нижний правый угол ST, и там скорее всего написано Plain Text, кликаем по той надписи, и затем выбираем подсветку Jade. Теперь подсветка будет работать.

Плагины

AutoFileName

Дело в том, что в процессе верстки часто приходится подключать различные картинки. Этот плагин в разы облегчает процесс подключения. Установим его. Нажимаем Ctrl+Shift+P далееInstall Package Control ищемAutoFileName устанавливаем. Попробуем подключить картинку сейчас. Сразу замечаем появление выпадающего меню со списком локальных файлов. Переходим в нужную папку с картинками и видим тут нужный нам файл, а также его размеры, что тоже пригодится.

BracketHighliter

BracketHighliter можно перевести как подсветка кавычек. Установим его. Нажимаем Ctrl+Shift+P ,Install Package Control ищемBracketHighliter . Устанавливаем. Тут даже открывается отдельный файл с сообщением об успешной установке. Теперь в нашем коде будет подсвечиваться начальный и конечный элемент, например открывающий и закрывающий тег, начальная и конечная ковычка, открывающая и закрывающая скобка. Это очень помогает с ориентацией в коде.

ColorHighliter

Обрати внимание на этот код — это код цвета, но какого именно непонятно

Давай установим плагин. Ctrl+Shift+P

,Install Package Control ищемColorHighliter . Опять открывается отдельный файл с сообщением об успешной установке. И сообщения о некой ошибке, игнорируем их. Смотрим на наш код с цветом, и теперь видим что за цвет скрывается за буквенноцифровым кодом. Сам плагин можно дополнительно настроить в менюTools — ColorHighliter но сейчас не будем останавливаться на этом. Все и так стало намного лучше.

Великий и могучий Emmet

Устанавливаем по наработанной схеме. Ctrl+Shift+P ,Install Package Control ищемEmmet . Открывается отдельный файл с сообщением с просьбой перезагрузить программу для окончания установки. Закрываем и открываем Sublime. Получаем сообщение, что все установлено.

Сниппеты и горячие клавиши

Раньше я предпочитал размечать контент сразу в HTML. Для этого я использовал следующие сочетания клавиш, как горячие для расстановки тегов:

• Ctrl 1 — заголовок 1-го уровня:
• Ctrl 2 — заголовок 2-го уровня:
• Ctrl 3 — заголовок 3-го уровня:
• Ctrl P — параграф:
• Ctrl W — элемент списка:
• Ctrl E — ссылка:
• Ctrl R — блок:
• Ctrl T — выделенный элемент:
• Ctrl Y — строчный элемент:
• Ctrl U — ненумерованный список:
• Shift Enter — перевод на новую строку:
• Shift Space — неразрывный пробел:

И оказывается настолько привык к ним, что с переходом на Markdown для конструкций этого языка я решил использовать эти же сочетания, но с дополнительно зажатым Shift:

• Ctrl Shift 1 — заголовок 1-го уровня:
• Ctrl Shift 2 — заголовок 2-го уровня:
• Ctrl Shift 3 — заголовок 3-го уровня:
• Ctrl Shift W — элемент списка:
• Ctrl Shift E — ссылка:
• Ctrl Shift T — выделенный элемент:
• Ctrl Shift Enter — перевод на новую строку:

Настраиваются горячие клавиши в конфигурационном файле:

Preferences → Key Bindings — User

Вглядит это примерно так:

Разобраться не сложно, вот очень полезный ресурс на эту тему — docs.sublimetext.info.

Заодно я настроил хоткеи Ctrl Shift R (Cmd Shift R) и Alt M на команды автоматического расставления отступов и предпросмотра для Markdown соответственно:

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

Win / *nix
macOS

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

Еще хочу поделиться парочкой полезных сочетаний по теме, работающих по умолчанию:

• Ctrl Shift L (Cmd Shift L) — преобразует выделение в отдельно выделенные строки, это полезно когда вы хотите обернуть в одинаковые теги сразу несколько строк, например для создания списков;
• Alt Shift W (Ctrl Shift W) — оборачивает выделение в тег, по умолчанию это тег , однако продолжив ввод, можно указать любой тег, я его использую например для .

Для расстановки тегов так же очень удобно использовать киллер-фичу Sublime — множественные указатели ввода (устанавливаются с зажатым Ctrl или Cmd для macOS), в первом сочетании как раз используется этот принцип.

Более менее полные списки горячих клавиш, найденные на просторах интернета:

Win / *nix
macOS

Мультивыделение и редактирование

Нажатием одной комбинации клавиш можно установить каретку (мигающий вертикальный курсор) одновременно на все строки после чего, также при помощи комбинации клавиш можно обернуть строки кодом. Например, имеется текст, который нужно обернуть ссылками

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

• Первая строка
• Вторая строка
• Третья строка
• Четвертая строка
• Пятая строка
• Шестая строка
• Седьмая строка
• Восьмая строка
• Девятая строка
• Десятая строка

Если запущено мультиредактирование и количество редактируемых строк совпадает с количеством вставляемых — вставит их не в одну строчку, а каждой строке по одной новой. Пример ниже, когда тег TITLE совпадает с текстом ссылки.

Пошаговый алгоритм

1. Копируем текст из блока чуть выше;
2. Вставляем его в пустой файл;
3. Выделяем текст Ctrl+A, жмем волшебное сочетание: Ctrl+Shift+L — появился курсор на всех строках;
4. Не сдвигая курсор, чтобы не потерять выделение жмем Alt+Shift+W и оборачиваем текст заготовкой для тега;
5. Печатаем нужный код (в нашем случае простая ссылка <a href=»link» title=»);
6. После кавычки в строке выше жмем Ctrl+V т.к. нам нужно дважды печатать такой текст;
7. Дописываем ссылку: «>тут уже текст стоит, </ а тут уже ссылка закрыта;

Черные полоски в закрывающей кавычке тега тайтл это и есть те мигающие каретки на все строки сразу

Тонкая настройка редактора, пресет моих настроек

Переходим к настройкам Sublime Text.

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

Код пресета для пользовательских настроек (Preferences.sublime-settings | Preferences > Settings) — отдельно:

Код пресета для пользовательских клавиатурных сокращений (Default (Windows).sublime-keymap | Preferences > Key Bindings) — отдельно:

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

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

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

«C:Users<Ваш пользователь>AppDataRoamingSublime Text 3» в потаённое резервное место на вашем диске или на флешку, а затем разместить у другого юзера или на другом компьютере в этой-же директории под пользователем.

Также дополнительно на ваше усмотрение можно отключить миникарту справа и скрыть меню. Это можно сделать перейдя в меню View > Hide Minimap и View > Hide Menu. Показать меню можно нажатием клавишы Ctrl на клавиатуре.

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Я — фрилансер! — Руководство успешного фрилансера

Sublime Text 3 — один из самых распространенных текстовых редакторов для программистов. Он предоставляет своим пользователям уникальные возможности, которых нет больше нигде. Одни из самых главных достоинств — кроссплатформенность и расширяемость.

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

Заключение

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

Более подробную информацию касательно самого редактора кода, а так же всех изменений которые произошли в Sublime Text 4, ищите на официальном сайте.

А на этом сегодня все, надеюсь, данная статья будет вам полезна.
Хотелось бы выразить огромную благодарность тем, кто принимает активное участие в жизни и развитии журнала, огромное спасибо вам за это.Журнал Cyber-X