SublimeText. Руководство по настройке

20 сентября 2019 / Разработка

Итак, сначала вопрос, который волнует всех в первую очередь – да, программа платная. Стоит она на конец 2018 года 80 долларов (годом раньше было 40), в сети можно найти версии, вылеченные от жадности. Однако можно без проблем работать и с незарегистрированной версией. Единственное отличие – в топе программы будет написано слово UNREGISTERED и периодически (где-то раз в 2 часа) при попытке сохранения выскакивает окошечко с предложением купить платную версию. Других ограничений не замечено.

Обзор SublimeText

Автором называют некоего Джона Скиннера. Разработка началась в ноябре 2007 года, причём было объявлено о том, что поставлена цель «создать лучший текстовый редактор всех времён и народов ». Первая версия вышла 18 января 2008 года, вторая в 2011, третья в 2013 году. К 2018 году Скиннер со товарищи быстро сориентировались в тенденциях рынка и сосредоточились на Python, накидав много приятных возможностей для программистов «на змее».

Изначально в качестве целевой аудитории подразумевались разработчики, а потому в программе была предусмотрена проверка синтаксиса для множества популярных языков программирования. Это C, C++, C#, CSS, D, Dylan, Erlang, HTML, Groovy, Haskell, Java, JavaScript, LaTeX, Lisp, Lua, Markdown, MATLAB, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL и XML. Можно подключать плагины и для других языков.

Программа выполнена с суровым интерфейсом без кнопок и декоративных элементов, что позволяет на 100% использовать экранное пространство для дела. Экран можно разбить на несколько рабочих областей. Например, слева открывать файл html, а справа css и параллельно с ними работать. Отдельный плюс – можно открывать не отдельные файлы, а целые каталоги и работать в них. Далее мы подробно рассмотрим, что к чему, на примере нашего проекта.

Подсвечивается всё очень красиво, по дефолту установлена приятная для глаза тёмная тема с контрастным выделением. Её ещё очень любят показывать в фильмах и ТВ-передачах, когда нужно снять «что-то о программистах».

Для установки, удаления и настройки плагинов применяется менеджер пакетов. Настраивается редактор довольно специфично – для этого нужно открывать и редактировать файл настроек. Для этого нажимаете в меню «Preferenses —>Settings», после чего можно будет увидеть расположение файла настроек.

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

И, пожалуй, самая большая вишенка на торте – возможность мультиколонного выделения.

Вы просто ставите курсор в нужное место, затем зажимаете шифт и правую кнопку мыши и ведёте мышь вверх или вниз. Курсоры появляются в нескольких местах, и вы можете вводить символы или удалять текст сразу в колонке. Другой вариант – можно создать дополнительные курсоры в любом месте «Ctrl + клик мыши».

Недостатки – это, как обычно, обычно оборотные стороны достоинств. Профессионалы скажут, что Sublime не дотягивает до полноценной IDE и будут правы. Новичкам покажется жутковатым способ настройки через JSON. Любителям офисных программ будет скучновато без красивых кнопок в интерфейсе. Кого-то будут раздражать периодические призывы купить программу, а кому-то не понравится необходимость работы со сторонними плагинами. Тем не менее, как показывает опыт, для разработки сайтов средней и малой сложности SublimeText вполне годится.

Установка и настройка

С установкой никаких проблем нет, достаточно скачать дистрибутив с официального сайта. Представлены версии для Linux, MacOS 32-и 64-разрядной Windows, в том числе portable версии. Файл загрузки невелик, около 8Мб, в дальнейшем, после установки плагинов, программа разрастается до 20-30 Мб. Память потребляет тоже очень скромно, то есть, в целом всё достаточно бережливо с точки зрения ресурсов.

В процессе работы экран может выглядеть примерно так.

Здесь слева мы видим колонку с каталогом проекта, фалы можно открывать просто кликнув на них мышью. Чтобы начать работать с папкой, выбираете в меню «File —> OpenFolder…»

Рабочую область я разбил на две части. Это делается чрез меню следующим образом «View -> Layout -> Column2». Там же вы можете увидеть и другие режимы – например, разбить экран на верхнюю и нижнюю области, либо на 4 части. Вкладки можно перетаскивать с места на место просто зажав мышью.

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

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

Установка Менеджера Пакетов

Прежде всего, необходимо установить Менеджер Пакетов (Package Control). Сделать это можно вручную или через консоль.

1 Через консоль

Консоль открывается сочетанием клавиш «Ctrl + `» (это крайняя левая клавиша, сразу под Esc). Код, который нужно ввести, скопируйте с официального сайта. Сам код не привожу, поскольку он может отличаться от версии к версии. Копируйте актуальный. Затем нажимаете Enter и откидываетесь на спинку кресла.

2 Вручную

Для этого нужно вначале скачать файл с той же самой страницы, только с правой части. Затем в меню Sublime выбираем «Preferences -> Browse Packages». Теперь нужно перейти на одну папку выше, и открыть папку «Installed Packages». После чего перезапустить редактор.

В результате в меню «Preferences» должны появится пункты «Package Settings» «Package Control». Вот таким образом:

При запуске «Package Control» появляется вот такое окошко, в котором вы можете вводить название нужного плагина. Самые часто используемые разделы: «Install Package» — установить пакет, «Remove Package» – соответственно, удалить. Менеджер пакетов сам находит нужные плагины, распаковывает их из депозитория и запускает. Всё очень удобно.

Перечислим основные полезные пакеты.

Emmet

Без всяких кавычек – самый популярный у фронтендеров плагин. Существенно ускоряет набор кода, принцип применения простой и быстро запоминается. Примеры использования.

Формирование базовой структуры html. В новом файле с расширением html просто ставите ! и нажимаете . В результате появляется заготовка в формате html5.

Быстрый ввод блоков. Пишете div.class-name, жмёте и получаете структуру вида

Понятно, что вместо div можно вписать один из тегов html5, а вместо class-name – название вашего класса.

Ввод вложенных блоков. Пишете section.class-name>article.class-name2>p, жмёте — получаете:

Построение списков. Пишете ul>li*4>a, жмёте — получаете:

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

ColorPicker

Плагин открывается в отдельном окне и даёт возможность оперативно выбрать цвет из круговой палитры в hex-формате. Открывается в любом месте экрана.

DocBlockr

Плагин «знает» формат комментариев для большинства языков программирования и позволяет быстро вставлять ваши описания в код.

Color Highlighter

Полезный плагин, который сразу показывает цвет, написанный в файле css в шестнадцатеричном коде.

SublimeREPL

Устанавливается по желанию, содержит встроенные компиляторы для нескольких языков программирования, в том числе PHP и Python. После установки в меню появляется вкладка «Toolse -> SublimeREPL», нажав которую вы увидите выпадающую панель с перечнем языков. Ещё один шаг на пути к полноценной IDE. Достаточно удобно, если вы хотите сразу же проверить работу кода не выходя из редактора.

Установка SASS (SCSS) на SublimeText

Существует три способа подключить препроцессор SASS на Sublime.

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

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

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

1 Установка SASS на компьютер

Написан этот инструмент на языке Ruby, так что вам придётся установить компилятор языка. Пользователям Windows сделать это проще всего по следующей ссылке. Просто выбираете последнюю версию, с учётом вашей системы 32 или 64 битной и устанавливаете. Все остальные могут воспользоваться вот этим сайтом.

В процессе установки не забудьте установить флажок на пункте «Add Ruby executables to your PATH»

Затем запускаете консоль, нажав Win + R и набрав «cmd». Либо, кому больше нравится, запустив Windows PowerShell. В командной строке наберите инструкцию для Ruby: «gem install sass» (без кавычек).

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

2 Установка плагинов для использования SASS

Для этого потребуются следующие плагины:

SASS Build – запускает компилятор и формирует файл css. Для настройки перезагрузите Sublime, откройте меню «Tools —> Build System» и выберите пункт SASS. Построение запускается по нажатию клавиш Ctrl + B.

SublimeOnSaveBuild – устанавливаете опционально. Запускает компиляцию каждый раз при сохранении файлов проекта.

3 Встроенный компилятор SASS для Sublime

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

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

Заключение

Итак, мы установили «лучший текстовый редактор всех времён и народов» SublimeText, настроили его внешний вид, добавили необходимые для работы плагины и подготовили всё необходимое для работы с препроцессором.

Источник

Sublime Text 3: установка, настройка, плагины

Sublime Text 3 — проприетарный кроссплатформенный редактор веб-кода, написан на языках программирования C++ и Python разработчиком Джоном Спиннером. Первая альфа-версия вышла в 2011 году. Последняя версия Sublime Text 3 вышла в 2013 году и имеет возможность подсветки синтаксиса для C, C++, C#, CSS, D, Dylan, Erlang, HTML, Groovy, Haskell, Java, JavaScript, LaTeX, Lisp, Lua, Markdown, MATLAB, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL и XML. Редактор оснащен менеджером пакетов, который позволяет пользователю находить, устанавливать, обновлять и удалять пакеты без перезагрузки программы. В этой статье я расскажу как установить и настроить Sublime Text 3, а также поделюсь некоторыми полезными «фишками».

Особенности веб-редактора Sublime Text

Данный редактор веб-кода я стал использовать относительно недавно, ранее «кодил» в обычном Notepad ++. Но со временем понял, что мне его не достаточно, нужно что-то более профессиональное и в то же время легкое в освоении, где можно будет максимально автоматизировать процесс построения/редактирования кода. Такие «монстры» как ID Php Storm и Visual Studio Code мне почему-то не совсем впечатлили, хотя остаются прекрасными решениями, а вот Sublime Text сразу, как говорится, «лег на душу» и наше знакомство с ним прошло мгновенно. То, что в Notepad++ забирало минуты, в Sublime я делал за секунды.

Преимущества Sublime Text

• Легкий, занимает мало дискового пространства, потребляет мало оперативной памяти, компактный;
• Простой и понятный веб-интерфейс, доступный новичку и полезный опытному пользователю (содержит множество «плюшек»);
• Поддержка различных тем, скинов, расширений, модулей, плагинов;
• Поддержка сниппетов (заготовок) веб-кода;
• Кросплатформенный — поддерживает все современные ОС;
• Поддержка макросов;
• Поддержка автосохранения.

Недостатки Sublime Text

• Платный. Распространяется по коммерческой лицензии — цена 59$.

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

Скачать можно по ссылке:

После установки, запускаем редактор с помощью меню «Пуск» в ОС Windows:

По умолчанию программа выглядит так:

Установка менеджера пакетов

Первое, что нужно сделать — установить Package Control (Менеджер Пакетов) — специальный репозиторий с различными дополнениями к редактору Sublime Text 3. Для того чтобы установить переходим в меню: Tools -> Install Package Control.

Получаем сообщение, что менеджер пакетов установился успешно, нажимаем «Ок»:

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

Далее установим плагин Emmet — позволяет ускорить написание веб-кода за счет того, что он умеет генерировать HTML-разметку. Переходим в Preferences -> Package Control:

Далее введите install и выберите Package control: Install package:

Далее напишите Emmet и выберите пункт Emmet for Sublime Text 3:

Получаем сообщение, что Emmet установился успешно:

Давайте попробуем проверить как работает плагин Emmet. Создадим файл index.html и сгенерируем разметку: зажмите клавишу Shift и введите восклицательный знак.

Появится сниппет разметки HTML-документа. Нажмите клавишу Tab, чтобы применить его:

Как вы видите одним нажатием клавиши у нас сгенерировалась полностью рабочая HTML-разметка. Далее можем сгенерировать мета-тег

. Для этого просто введите h1 и нажмите на клавишу Tab — плагин Emmet сгенерирует открывающий и закрывающий тег:

И подобным образом можно генерировать любые другие html-теги.

Установка темы

Теперь попробуем установить тему оформления и подсветки синтаксиса для редактора Sublime Text 3. Я буду использовать простую тему Spacegray Monokai.

Установка проходит стандартно через Менеджер пакетов (Ctrl+Alt+P): Preferences -> Package Control -> Install-> Monokai — Spacegray:

Чтобы применить тему переходим в меню Preferences -> Color Scheme и выбираем цветовую тему:

Кстати, удалить любое расширение (плагин или тему) в Sublime Text 3 также легко, как и установить — в Менеджере пакетов достаточно прописать Remove package и выбрать необходимое расширение.

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

• Ctrl + Shift + P — вызов менеджера пакетов;
• Ctrl + ` — открыть консоль;
• F11 — полноэкранный режим;
• F9 — сортирует все строки в алфавитном порядке;
• F6 — проверка правописания;
• Shift + F11 — свободный полноэкранный режим;
• Ctrl+K + Ctrl+B — вывести/спрятать боковую панель;
• Ctrl + G — перейти к строке по номеру;
• Ctrl + R — перейти к символу;
• Ctrl + « — перейти к классу;
• Ctrl + I — поиск на лету;
• Ctrl + H — поиск и замена;
• Ctrl + / — закомментировать/раскомментировать текущую строку;
• Ctrl + Shift + / — добавить комментарий;
• Ctrl +Shift + J — выделить блок;
• Ctrl + L — выделение целой строки;
• Ctrl + Z — отмена последних действий, шаг назад;
• Ctrl + T — быстрое перемещение по файлам;
• Сtrl + N — создать новую вкладку (файл);
• Alt + . — закрыть незакрытый тег;
• Ctrl+K + Ctrl+Space — установить метку;
• Ctrl+K + Ctrl+W — удалить метку;
• Ctrl+K + Ctrl+G — удалить все метки;
• Ctrl+K + Ctrl+U — трансформирует выделенный текст в верхний регистр;
• Ctrl+K + Ctrl+L — трансформирует выделенный текст в нижний регистр;
• Ctrl + Shift + A — выделить содержимое html-тега;
• Ctrl + Shift + D — продублировать строку вниз;
• Ctrl + Shift + N — создать новое окно;
• Ctrl + Shift + W — закрыть текущее окно;
• Ctrl + Shift + V — вставить с отступом;
• Ctrl + Shift + [ — свернуть код;
• Ctrl + Shift + ] — развернуть код;
• Ctrl + O — открыть файл;
• Ctrl + Shift + T — открыть последний закрытый файл;
• Ctrl + C — копировать;
• CTRL + V — вставить;
• CTRL + X — вырезать;
• Ctrl + S — сохранить текущий файл;
• Ctrl + Shift + S — вызвать окно «Сохранить как»;
• Ctrl + + — увеличить размер шрифта в редакторе;
• Ctrl + — — уменьшить размер шрифта в редакторе;
• Ctrl + q — записать макрос;
• Ctrl + Shift + q — воспроизвести макрос;
• Ctrl + Alt + Shift + P — отобразить название контекста, в котором находится курсор;

Горячие клавиши плагина Emmet

• Shift + ! — сгенерировать разметку html-документа;
• ul>li*5 — выведет 5 тегов li, заключенных в тег ul;
• #selector — выведет

Как добавить просмотр кодировки

Переходим в меню Preferences -> Settings и добавляем строку: «show_encoding»: true.

Можно также просмотреть текущую кодировку в консоли с помощью команды: view.encoding().

Сохранить файл в указанной кодировке: File -> Save with encoding.

Также существует специальный плагин для работы с разными кодировками — EncodingHelper.

Источник