15 прекрасных плагинов для Sublime Text


Оглавление (нажмите, чтобы открыть):

№1 — Подборка плагинов для Sublime Text 3

Давно не публиковал записи в блоге, решил написать статью, пока нашлось свободное время. Последнее время, очень занят работой и не всегда удается взяться за написание статьи. Сегодня испробовал несколько крутых плагинов для Sublime Text 3, решил поделиться с вами лучшими плагинами для front-end и back-end разработчиков.

Я не знаю, поддерживаются ли они для Sublime Text 2, так как не проверял. Да и какой смысл юзать вторую версию, когда многие плагины разрабатывают под третью версию.

# 1. Emmet

Начинать список лучших плагинов будет, один из лучших плагинов для Sublime Text — Emmet. Данный плагин облегчает и значительно ускоряет разработку кода на HTML и CSS. Подобный принцип уже используется в Codepen и JSFiddle.

# 2. CDNJS for Sublime Text

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

Готовь Sublime к полету в космос

Полезные инструменты и настройки Sublime Text 3 для верстальщиков

Готовь Sublime к полету в космос

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

В этой презентации

Основные возможности

Сайдбар и дробление на секции

В боковой панели хранятся открытые файлы и папки.
Каждый файл открывается в новом табе, которые можно
распределить в несколько рядов или колонок.

Миникарта кода

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

Темы оформления

Очень, очень, очень много тем.
Выбор за вами!

Множественные курсоры

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

Поиск

Целая куча функций поиска: обычный поиск по файлу, поиск с заменой (одного или всех значений), поиск по файлам и папкам, поиск с регулярными выражениями и многое другое.

Командные панели

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

Нечёткий поиск

Вы вводите лишь комбинацию символов –
нечеткий поиск выдаcт все возможные совпадения. Супер!
P.S. Смотрите, как полезен символ @ для CSS.

Сниппеты и клавиатурные сокращения

Cниппеты, плагины и шорткаты в разы ускоряют разработку. И всё это добро можно настроить под себя.
Вот так я верстаю менюшки:

Package Control

С Package Control установка плагинов займет примерно минуту. Вызовите командную панель, выберите Install Package, в загрузившемся списке плагинов найдите нужный и. готово!

Плагины

Emmet

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

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

AdvancedNewFile

Быстрое создание нового файла.

Bracket​Highlighter

Удобная подсветка открывающих и закрывающих скобок.

ZenTabs

Этот плагин умеет подсвечивать текущую вкладку и ограничивать количество открытых вкладок заданным числом. При открытии новых вкладок закрываются самые старые.

SublimeLinter

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

Gutter Color

Ну вы сами все видите.
P.S. есть еще очень похожий Color Highlighter

Plain Tasks

Планировщик для ST. Удобно вести список задач в одной папке с проектом. Можно отмечать выполненные задания, при этом автоматически фиксируется время окончания.

Live Reload

В любом обзоре обязательно должны рассказать про live-режим – автообновление браузера без нажатия клавиш.
Это настраивается и для ST, однако я бы советовал не привязываться к редактору, а установить приложение отдельно

Emmet Livestyle

Любопытная вариация LiveReload, если вы пишите код на CSS: Livestyle позволяет править стили прямо в инспекторе браузера, изменения сразу записываются в CSS файл.

2 режима работы с FTP: 1) подключение к удаленному серверу и работа на нем; 2) настройка FTP-соединения для каждого проекта, позволяющая быстро и просто синхронизировать файлы.

CSScomb

«Причесывает» CSS, расставляя свойства в заданном порядке. Потребует небольшой настройки: установки Node.js и конфигурации плагина в зависимости от своих предпочтений.

GitGutter

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

Comment-Snippets

Лаконичный набор сниппетов для красивых комментариев.

AutoFileName

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

Настройки, сокращения и сниппеты

Sublime Text – это гибкость и скорость:
для всех плагинов и функций есть настройки и клавиатурные сокращения. Часто пишете один и тот же код? Создайте сниппет и вызывайте код лишь несколькими символами. Работаете над несколькими проектами? Совсем не обязательно каждый раз открывать папку проекта и целый ворох необходимых файлов – воспользуйтесь системой проектов.Нужен дополнительный функционал?Откройте Package Control, скорее всего его уже кто-то написал 🙂

Настройки

В ST настройки есть как у самого редактора, так и у всех подключаемых плагинов. Найти их можно по пути
Preferences > Settings .
или
Preferences > Package Settings > .

Обратите внимание, что все настройки разбиты на категории User и Default.

Настройки

Все изменения мы вносим в Settings — User. Если вносить их в Default, они будут перезаписаны при ближайшем обновлении. В дефолтные настройки нужно заглядывать лишь для справки.

Настройки

Мои любимые настройки для ST. Полный список тут

Клавиатурные шорткаты

Шорткаты – это одна из мощнейших функций ST – практически любое действие можно повесить на комбинацию клавиш. Рассортированы они по папкам аналогично тому, как рассортированы настройки Preferences > Key Bindings.

Клавиатурные шорткаты

Чтобы ввести сокращение, в Key Bindings – User следует добавить новую строку, например:

command – это команда, которую ST выполняет при нажатии.
Список команд плагинов не всегда лежит в разделе Preferences.
Если возникают трудности, посмотрите репозиторий плагина на github, искомые команды прячутся в файлах с расширением .sublime-keymap или .sublime-commands.

Сниппеты

Небольшие куски кода, которые можно вставлять по определенному сочетанию клавиш. Так, в этом примере фраза nav++ по нажатию на Tab превратится в emmet-цепочку для разметки навигации.
Создать свой сниппет невероятно просто

Проекты

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

Дополнительные материалы

Статьи

Perfect Workflow in Sublime Text 2
Превосходный двухчасовой скринкаст, до сих пор не потерявший актуальность. Бесплатный после регистрации.

Sublime Text Unofficial Documentation
Тот неловкий момент, когда неофициальная документация лучше официальной.

Статьи

Русская документация Sublime Text
Удобные справки по горячим клавишам и настройкам редактора, а также лаконичное описание главных функций.

Комментарий к прошлой статье
Про синхронизацию ST между устройствами.

Плагины, которые стоит поглядеть

Sublime Alignment – выравнивание нескольких строчек по определенной позиции.

SublimeFileDiffs – сравнивает два файла или их части и показывает различия.

SublimeAllAutocomplete – автокомплит работает не только в рамках одного документа, но в рамках текущих открытых файлов.

Плагины, которые стоит поглядеть

Clipboard History – поможет вспомнить, что именно вы вставляли несколько итераций назад.

BufferScroll – запоминает позицию курсора при переключении окон.

На этом все!

Занудствовал для вас Андрей Алексеев.
Пожелания, предложения: vk / e-mail

Установка и настройка Sublime Text 3. Компиляция LESS, SASS, JADE. Все необходимые плагины. Полная инструкция

Привет, много уже было написано про Sublime Text. В своем блоге я писал про Sublime Text 2. Сейчас Sublime Text 3 уже вышел из альфа версии (альфа — означает — новая и крайне не стабильная версия), и перешел в бету (бета — все еще не стабильная, но уже предназначена для тестирования, после беты обычно идет официальный релиз). И я решил полностью разобраться с Sublime Text 3 (далее в тексте ST3).

Если вы собираетесь установить SublimeText3 то эта самая полная инструкция для вас. Здесь я опишу все что связано с этим редактором, а умеет он действительно многое.

Сперва я удалил из системы ST2 и все его следы. Также удалил node.js и npm который был с ним в паре. Так как я намерен заново — правильно и грамотно настроить компиляцию less, а затем и saas файлов, через sublime. Но об этом позже.

Часть 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 — установка плагинов

Часть 2. Установка плагинов и расширений для Sublime Text 3

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

Далее я сменю стандартную тему оформления и подсветки кода на Material Design. Она тоже относится к темным темам, но имеет более яркую подсветку кода, и с ней более комфртно и приятно работать при длительном написании кода.

Идем на сайт темы Material Design и жмем кнопкe install. Происходит переход на сайт PC для ST3, понимаем что тема доступна как плагин. В ST3 запускаем Ctrl+Shift+P, выбираем install package, после ищем нужную нам тему, я набираю Material Theme и нахожу ее. Жму Enter и устанавливаю.


Sublime Text 3 — Package Control — установка темы Material Design

После этого иду в меню Preferences, и выбираю установленную тему.

Sublime Text 3 — Package Control — установка темы Material Design

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

Это позволит отображать тему так как это было задумано ее создателями.
В итоге у меня получился вот такой внешний вид ST3.

Sublime Text 3 — тема Material Design

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

Я установил следующие основные плагины:

  • Emmet (ускорение написания html и css)
  • Hayaku (ускорение написания css)
  • LESS (syntax highlighting — подсветка кода less)
  • Prefixr (префиксы для CSS)
  • Placeholders (Lorem Ipsum наполнители для html файлов)
  • SFTP — плагин для работы с FTP
  • SideBarEnhancement расширяет возможность сайт бара
  • SyncedSideBar синхронизирует SideBar с открытыми файлами по клику на них
  • AdvancedNewFile создаём новые файлы и папки при помощи горячих клавиш
  • BracketHighlighter подсвечивает открытие/закрытие любого фрагмента в коде
  • jQuery набор сниппетов для jquery
  • AutoFileName автозаполнение путей к подключаемым файлам
  • CSSсomb делает код красивым
  • Gist сохранение отдельных участков кода на github прямо во время редактирования

Компиляция 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. Поэтому его надо установить отдельно. Установим. Заходим в консоль и пишем:

Мастер Йода рекомендует:  10 основных трендов в веб-дизайне для электронной коммерции в 2020 году

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

Компиляция 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.

Устанавливаем и настраиваем 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. Теперь подсветка будет работать.

17 лучших плагинов для Sublime Text 2

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

Далее, в этой статье мы собрали несколько плагинов, которые вам нужно будет установить, чтобы расширить функции SublimeText .

1. Package Control

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

2. Emmet

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

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

3. SublimeLinter

SublimeLinter недавно был восстановлен и отредактирован для SublimeText 3. В новой версии , конечно, установлен набор новых функций . Вместо того чтобы поместить все Linter в один пакет, разработчик позволяет вам выбрать и установить только те, которые вы используете регулярно.

4. SublimeEnhancements

У SidebarEnhancements есть несколько новых вещей в меню боковой панели, включая New File Creation (создание нового файла) в текущей папке проекта, Moving File and Folder, (Перемещение файлов и папок) , Duplicating File and Folder, (Дублирование файлов и папок) , Open in Finder and Browser, (Открыть в Finder и браузере), Refresh (Обновить) и много чего еще.

5. PackageResourceViewer

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

6. Git

Этот плагин объединяет SublimeText с Git, так что вы можете запустить некоторые команды Git от SublimeText, такие как Add and Committing Files, (добавить и зафиксировать файлы) , Viewing Log, (Просмотр Входа), Annotating Files (аннотирование файлов) .

7. Terminal

Этот плагин позволит открыть вашу папку проектов в Терминале непосредственно из SublimeText — с горячей клавиши. Это очень полезный плагин, когда нужно выполнить командные строки в данной папке.

8. CSSComb

CSSComb это плагин для сортировки свойств CSS . Если вам нужно, чтобы ваши коды были аккуратными и в шли в правильном порядке, этот плагин позволит вам настроить порядок свойств. Это также полезно , когда вы работаете с командой разработчиков, каждый со своими предпочтениями написания кода.

9. CanIUse

С помощью этого плагина , вы можете проверить, поддерживает ли браузер свойства CSS и HTML элементы, которые вы используете . Чтобы использовать его, выделите свойство CSS или элемент HTML , и это приведет вас к соответствующей странице в CanIUse.com.

10. Alignment

Выравнивание позволит вам выровнять коды, включая PHP, JavaScript и CSS, что делает его аккуратным и более удобным для чтения . См. следующий скриншот, чтобы сравнить его до — и — после регулировки.

11. Trimmer

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

12. ColorPicker

С помощью этого плагина вы можете выбрать и добавить цвета в SublimeText с родным цветовым механизмом из вашей операционной системы.

13. MarkDown Editing

Несмотря на то, что SublimeText может просматривать и редактировать файлы Markdown, он рассматривает его как простой текст с очень плохим форматированием. Этот плагин полезен для придания более эффективной поддержки с надлежащим цветовым выделением для Markdown в SublimeText.

14. FileDiffs

FileDiffs позволяет вам увидеть различия между двумя файлами в SublimeText . Вы можете сравнивать файлы с скопированными данными из Clipboard, File in the Project (файл в проекте), File, который в настоящее время открыт, и между сохраненными и несохраненными файлами.

15. DocBlockr

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

16. Фрагменты кода

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

Основа — коллекция фрагментов, чтобы создать рамочные компоненты Foundation 5, такие как Buttons, Tabs, и Navigation.

Bootstrap 3 – если вы предпочитаете Bootstrap, попробуйте это.

Bootstrap 3 for Jade – Этот плагин сочетает Bootstrap 3 с синтаксисом Jade.

jQuery Mobile – коллекция фрагментов для создания компонентов и макетов JQuery Mobile.

HTML5 Boilerplate – этот фрагмент позволяет предприимчиво создавать документы HTML5 Boilerplate.

17. Дополнительная Синтаксис поддержка

Языки, которые не поддерживаются в SublimeText, могут не отображаться при правильной придаче большого значения синтаксису. Они включают в себя LESS, Sass, SCSS, Stylus и Jade, так что если вы работаете с этими языками, вот плагины для установки и поддержки синтаксиса.

Sublime text 3 плагины для разработки. Установка и настройка.

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

В этой статье мы рассмотрим самые необходимые Sublime text 3 плагины которые помогут вам в работе. Первым делом нам необходимо установить Package Control (пакетный менеджер). Я описывал подробно этот процесс, а так же как установить плагины в прошлой статье о sublime.

Далее я расскажу о плагинах которые я использую в работе, а также разберем кратко их настройку.

Sublime text 3 плагин для форматирования кода HTML-CSS-JS Prettify

Часто во время работы мы не следим за правильным форматированием кода. Этот пакет, позволяет вам форматировать HTML, CSS, JavaScript код и JSON файлы. Устанавливается он как и все плагины. Вызовите Command Palette наберите prettify, выберите HTML-CSS-JS Prettify. Нет необходимости проводить настройку, сразу можно использовать.

  • Вариант 1. Выделяем код и нажимаем правой кнопкой мыши на нем, так же можно просто кликнуть по вкладке редактора и выбираем HTML/CSS/JS Prettify → Prettify Code
  • Вариант 2. Откройте файл с кодом, запустите консоль Sublime через меню View → Show Console и наберите view.run_command(«htmlprettify») .
  • Вариант 3. Так же для быстрого форматирования можете использовать горячие клавиши Ctr + Shift + H

Emmet быстрое написание кода.

Плагин Emmet ускоряет написание кода с помощью горячих клавиш и сниппетов. Помимо Sublime Text, Emmet может работать и с другими редакторами, такими как — Notepad++, Coda, Eclipse, TextMate и д.р. Emmet устанавливается так же как и другие плагины.

Как работает плагин Emmet?

Приведу пару примеров. Например при написании в редакторе ul без <> и нажатия Tab будет автоматически развернут полный список. Если мы хотим добавить еще элементы li пишем так ul>li

Top 15+2 Plugins for Sublime Text 3

A text editor for a web developer is what a katana sword is to a Samurai. It’s your weapon and loyal ally, who will always accompany you to every coding endeavor, so you better ensure you are being as productive as possible.

For me, the weapon of choice is none other than Sublime Text 3. Quick, reliable and due to the wonders of open source we can fully customize it to our heart’s desire. Nevertheless, just simply choosing a tool doesn’t make you a lethal machine, that’s why you should always make sure your weapon is staying sharp and you’re skillful enough to exploit it’s full potential. For that reason, I created a list of packages I use in my everyday work with Sublime Text 3.

1. Package Control

I really can’t understand why Sublime text doesn’t come by default with this, as it’s necessary to install packages. Without it, plugin installation is really time consuming. Check here for installation instructions.

After you install it, you’ll be able to get packages right from Sublime Text. Forget about manually searching and installing stuff!

2. Emmet

Previously known as Zen Coding, it can significantly accelerate the way you’re writing HTML & CSS. Write CSS like abbreviation, hit tab to expand… DONE!

This is by far my favorite plugin of all times. Trust me, that’s life changing power we got here. You’ll never go back after Emmet.

3. SublimeLinter (Together with JSHint)

For me, debugging is one of the most tedious tasks in programming. Linting code is a way to ensure my code is cleaner and more bug-free. Use this and crash bugs faster than ever.

Linters are separate, but you can practically find any language you’ll ever need.

4. S >Provides some key features to the sidebar like open in browser, copy name, copy path etc… These kind of features should really be there by default in any text editor.

5. Bracket HighLighter

This plugin gives a great visual hint to where is a tag or bracket ending. Helps a lot, especially in debugging by highlighting the scope

Sublime Text 2/3 — плагины

Поделитесь этой страницей с друзьями:

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

Проще всего устанавливать плагины в Sublime Text 2 при помощи менеджера пакетов под названием Package Control. Как установить Package Control в Sublime и как его использовать — я подробно расписал в одной из прошлых статей.

Тот же набор плагинов актуален и для Sublime Text 3.

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

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

Ну а теперь перехожу непосредственно к обзорам.

Плагины Zen Coding и Emmet для Sublime Text 2

И начнем мы с одного из самых популярных плагинов — Zen Coding (устаревший) и Emmet (сегодняшнее название для Zen Coding). Zen Coding / Emmet — это набор инструментов для текстовых редакторов (не только для Sublime), который позволяет очень значительно ускорить написание html и css кода. В первую очередь речь идет о подобии сниппетов, но не только о них. В отличие от стандартных сниппетов, при помощи Zen Coding (либо Emmet) вы можете создавать довольно сложные конструкции кода. Например, сокращение типа ul>li*8 будет развернуто в ненумерованный список (стандартный тег ul ) с 8 пунктами. И это самый простой пример, конструкции могут быть гораздо более сложными.

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

Установить плагин Zen Coding можно буквально за несколько секунд при помощи Package Control. Нажмите комбинацию Ctrl + Shift + P и в появившейся панели наберите слово install , после чего выберите появившийся пункт Package Control: Install Package . В появившейся после этого панельке наберите zencoding и нажмите Enter . Вуаля — плагин установлен.

Но Zen Coding на сегодняшний день не развивается, новые версии носят название Emmet. Не так давно этот тулкит имел нестабильный статус, но на сегодняшний день его вполне можно использовать (я использую именно Emmet). Соответствующий плагин в Sublime ставится тем же способом (см. предыдущий абзац), только при поиске естественно нужно набирать emmet .

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

Для создания вложенных тегов используется символ > , для тегов на текущем уровне — символ + , а для многократного повторения какого-то тега используется символ * . После названия тега можно указывать название класса (отделив его точкой) или id (отделив его символом # ). Например, конструкция вида:


… будет развернута до вида:

Последовательность символов в сокращении обязательно не должна содержать пробелов, а курсор должен находиться в ее конце в момент разворачивания. Кстати говоря, разворачивание в Sublime производится нажатием клавиши Tab , либо же комбинацией Ctrl + E .

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

Подобная конструкция будет развернута до вида:

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

Для быстрого переключения между редактируемыми точками используются клавиши курсора ← и → с одновременно зажатыми клавишами Ctrl + Alt . Можете поэкспериментировать и попереключаться между редактируемыми точками в примере выше, чтобы точнее понимать, о чем идет речь.

Zen Coding позволяет не указывать название для тега div , а указывать только класс или id. В этом случае автоматически подразумевается, что имеется ввиду div . Например, конструкция такого вида:

… аналогична такой конструкции:

… и будет автоматически развернута до такого вида:

Подобным же образом можно работать не только с HTML, но и с CSS-кодом, используя соответствующие сокращения для разворачивания их в полноценный CSS (тоже по нажатию на Tab ).

Доступные комбинации клавиш можно посмотреть в соответствующем конфигурационном файле. В моем случае (в Ubuntu) этот файл находится по адресу

/.config/sublime-text-2/Packages/Emmet/Default (Linux).sublime-keymap . Либо же можно заглянуть в файлик README.md в той же директории, там можно помимо основных клавиатурных комбинаций получить и много других полезных сведений.

В Emmet появились некоторые полезные фишки, которые отсутствовали в Zen Coding.

Многие сокращения в Emmet стали еще короче. Например, при работе с CSS сокращение p20 будет развернуто до padding: 20px; . Точно также сокращение m40 превратится в margin: 40px; , а w100 — в width: 50px; . Подобным образом можно задавать значения не только в пикселях. Так, сокращение w80p будет развернуто до width: 80%; . Подобным же образом можно задавать множественные значения, например m10-20 превратится в margin: 10px 20px; , а m0-auto превратится в margin: 0 auto; .

Мастер Йода рекомендует:  7 лучших онлайн-чатов для сайтов на WordPress

Emmet также знает о вендорных префиксах в CSS, имеет встроенный генератор градиентов и «рыбы» («Lorem Ipsum» с заданным количеством слов, например сокращение lorem20 создаст «рыбу» из 20 слов). Также появился новый оператор ^ , который позволяет переходить на уровень (или несколько уровней) выше без использования скобок.

Функционал Emmet (как впрочем и Zen Coding) не ограничивается только разворачиванием сокращений. Есть также множество других полезных действий. Например, если поставить курсор в любое место тега img и нажать комбинацию Ctrl + U , то для заданного изображения будут автоматически подсчитаны и проставлены параметры width и height . Также вы можете приятно удивиться, если в css файле поставите курсор на адрес изображения и нажмете комбинацию Ctrl + ‘ . Подобных фишек довольно много, все их я перечислить в рамках одной статьи не смогу, поэтому очень рекомендую заглянуть на официальный сайт проекта Emmet за более детальной документацией.

Плагин AdvancedNewFile для Sublime Text 2

Стандартный способ создания нового файла состоит (внезапно) из собственно создания ( Ctrl + N ) и последующего его сохранения ( Ctrl + S ). При этом на втором этапе открывается стандартное системное диалоговое окошко, в котором нужно выбрать папку и задать имя для нового файла.

Однако всю вышеописанную процедуру можно значительно упростить, используя плагин AdvancedNewFile. Установить плагин можно как обычно через Package Control: Ctrl + Shift + P → install → AdvancedNewFile → Enter .

Плагин установлен и готов к использованию. Теперь достаточно нажать комбинацию Super + Alt + N , после чего в нижней части окошка Sublime появится небольшая панелька. В этой панели достаточно ввести путь к новому файлу (обычно относительно корневой папки текущего проекта) и нажать Enter — и новый файл сохранен.

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

Плагин SideBarEnhancements для Sublime Text 2

Если вы кликните правой кнопкой мыши по какому-то элементу на боковой панели (в дереве файлов), то обнаружите, что появляющееся при этом контекстное меню довольно скромное. Функционал этого меню можно значительно расширить, установив (опять же через Package Control) плагин SideBarEnhancements, после чего контекстное меню станет значительно богаче:

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

Плагин PlainTasks для Sublime Text 2

PlainTasks — это необычный плагин для Sublime, который позволяет использовать редактор еще и в качестве простенького менеджера задач (todo-листа).

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

После установки плагина PlainTasks в командной панели (вызываемой по Ctrl + Shift + P ) при вводе слова tasks появляется новый пункт, позволяющий создать новый список задач:

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

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

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

Задачи можно помечать как выполненные, установив на нужную задачу курсор и нажав комбинацию Ctrl + D . При этом задача помечается зеленой галочкой, подкрашивается серым цветом, автоматически помечается тегом @done , а в скобках указывается дата и время ее исполнения. Если повторно нажать комбинацию Ctrl + D , то задача возвращается к исходному виду (как другие невыполненные задачи).

Все выполненные задачи одним махом можно перенести в архив, используя комбинацию клавиш Ctrl + Shift + A .

Используя курсорные клавиши ↑ и ↓ с зажатыми Ctrl + Shift , можно перемещать вверх/вниз строку с текущей задачей (в том числе и в другой список).

Плагин приятен в использовании, а подобные списки задач удобно использовать в рамках каждого проекта, сохраняя TODO-файлы прямо в папку проекта.

Плагин LiveReload для Sublime Text 2

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

Правда, для использования этого плагина придется установить дополнение в браузер (имеются дополнения для Firefox, Chrome и Safari). Ну а сам плагин LiveReload для Sublime Text 2 устанавливается как обычно через Package Control ( Ctrl + Shift + P → install → LiveReload ).

После установки расширения на панели браузера появляется кнопка, с помощью которой можно активировать или отключать расширение LiveReload.

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

Плагин ColorHighlighter для Sublime Text 2

Плагин ColorHighlighter позволит вам видеть реальный цвет, соответствующий цветовому коду в CSS-файлах. Устанавливается плагин как обычно — через Package Control. Теперь при установке курсора на цветовой код он будет подсвечиваться соответствующим цветом.

Плагин ColorPicker для Sublime Text 2

Плагин ColorPicker позволит вам использовать системное диалоговое окно подбора цвета при правке CSS-стилей. После установки плагина (через Package Control) для появления диалогового окна достаточно нажать комбинацию Ctrl + Shift + P . После подбора цвета и нажатия на кнопку OK выбранный цвет автоматически подставится в то место, в котором был установлен курсор. Если же при этом курсор уже был установлен на каком-то цветовом коде, то при появлении диалогового окна этот цвет будет в него подставлен.

Плагин SFTP для Sublime Text 2

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

Плагин SFTP распространяется по такой же условно-бесплатной модели, как и сам Sublime Text 2. Вы можете заплатить за его использование, а можете не платить (при этом иногда при отправке файлов на удаленный сервер плагин будет напоминать о возможной покупке).

На этом пожалуй и закончу обзор полезных плагинов для Sublime Text 2. Не забывайте, что для Sublime существует и множество других полезных плагинов, которые вы с легкостью можете установить через Package Control.

Напоследок рекомендую также взглянуть на другие мои статьи про Sublime Text 2, если вы этого еще не сделали:

The 25 Best Sublime Text Plugins for Front End Developers

Every developer has their own tooling and special setup—I know I do. It’s that tooling that can help you become a faster, stronger, and more productive developer.

One of the ways I find new tools is through pairing with other developers. I’ll be working on a problem, and see the person I’m pairing with do some magical thing in a two second flash.

This is the moment I interrupt the pairing session to find out what that tool was, where to get it, and how to use it. This is by no means the most efficient way of finding new tools, but it’s often when I find the best ones.

With all this in mind, I spent some time polling front end developers here at Shopify, to get a list of all the essential Sublime Text plugins they just can’t live without.

To make things a bit easier, I broke the plugins into the following categories:

Installation

1. Package Control

Package Control is the first and probably most essential Sublime Text plugin. It enables the easy installation, download, and update of packages or plugins into Sublime Text. The terms package and plugin are often used interchangeably.

To install Package Control, follow the instructions found on the Package Control website. From there, you can simply type in ctrl+shift+p on Windows, or cmd+shift+p on a Mac to open the Command Palette.

Installing Package Control.

Once the Command Palette is open, you can then type Install Package , to install a plugin from the Package Control website. You can also type Add Repository , which allows you to add plugins that are not hosted on the Package Control website, by simply using their repository url (make sure not to include .git at the end). And finally, Remove Package , will let you uninstall a plugin from your system by removing it, as well as any assets from the Sublime packages directory.

Snippets and code style

Snippets are a great built-in feature of Sublime Text. You can build your own, in addition to using the preinstalled ones, or use a plugin that has a bunch for you like Emmet. The way snippets work is simple—you simply begin typing a keyword that activates a snippet, and press tab to expand the text.

2. Emmet

Emmet is a plugin that enables faster HTML and CSS creation with the use of snippets. It uses abbreviations that expand to valid HTML tags.

For example, to build out a navigation you only need to type the following code:

Which will expand to:

3. Alignment

Alignment plugin helps to easily align multiple selections, or multi-line selections. What that means is you can align multiple selections, or lines, via delimiter such as = . Simply type ctrl + alt + a on Windows, or cmd + ctrl + a on a Mac, to align your selection. To align with : follow this tutorial to setup custom delimiters.

Git integration

Most developers use some type of version control. These days, Git seems to be the most popular. Here are a few Git related plugins for Sublime Text that make working with Git a lot easier.

4. SublimeGit

SublimeGit brings Git into Sublime, so you don’t need to go back and forth between the command line and your text editor. You used to have to pay for this plugin (that’s how awesome it is), but this past year it was open-sourced. It has a huge list of features, which you can find in the SublimeGit docs. To get started quickly, install the plugin and use the Command Palette to launch your Git commands.

5. GitGutter

GitGutter brings some native Atom functionality to Sublime, adding diff hints to the gutter of the sidebar. You can additionally hover on the indicators in the sidebar, to see a diff popup. You can perform a variety of commands on the change, such as copying the content of the diff state, reverting the changes back to the state in Git, jumping to next or previous change, and more.

6. GitHubinator

GitHubinator is a plugin that shows selected text on a remote GitHub or Bitbucket repository. You simply highlight the text you want to search for, right click to open the context menu, and launch the corresponding Github or Bitbucket web page in your default browser. This plugin is amazing if you need to figure out who’s worked on a file previously, or check the Git blame.

7. GitOpenChangedFiles

GitOpenChangedFiles isn’t coy about what it does; its name says it all. Simply install and run cmd + option + o on a Mac, or ctrl + shift + o on Windows, and watch this plugin open the corresponding files for you in Sublime Text, with all the files you’ve changed in your branch.

Linters and syntax highlighting

While working on teams, consistency is imperative. Linters and syntax highlighting help provide that consistency and set best practices.

8. SublimeLinter

SublimeLinter is the most popular linter available on Sublime, as it currently sits in the top 25 downloads on Package Manager. Once installed, you’ll also want to install plugins for the various languages that you might code in.

To do this, just open Package Control to install plugins with the same name. Simply type SublimeLinter-
, for example SublimeLinter-jshint . You must install linter plugins with SublimeLinter—the version for Sublime Text 3 doesn’t come with them pre-installed.

9. ChangeQuotes

ChangeQuotes “converts single and double quotes, and and re-escapes quotes within the string,” according to their docs. Once installed, whenever you want to change quotes, make sure your cursor is ins >ChangeQuotes —there is no need to select the text to change quotes.

There are a ton of plugins for syntax highlighting. These are the two major plugins we use at Shopify, that fall outside the existing syntax highlighting that ships with Sublime Text.

10. SASS

The Sass plugin adds syntax highlighting as well as tab/code completion, for Sass and SCSS files.

11. Babel

Babel adds syntax definitions for ES6 JavaScript, with React JSX extensions.

12. Siteleaf’s Liquid Syntax

Siteleaf’s Liquid Syntax adds liquid syntax highlighting for Liquid as well as some handy snippets.

Editor enhancements

13. SideBarEnhancements

SideBarEnhancements provides enhancements to the operations on Sidebar of Files and Folders for Sublime Text. Particularly, it sets delete options as a “Move to trash,” includes an “Open with…”, gives you the ability to move files, and more.

14. Maybs Quit

Maybs Quit enables a quick panel to confirm quitting Sublime Text. Both cmd/ctrl+w and cmd/ctrl+q are too close to one another on the keyboard, and can lead to mistakes. Avoid quitting Sublime Text unintentionally when you’re only trying to close a file, by using Maybs Quit!

15. AutoFileName

AutoFileName follows through on its name: it completes filenames automatically. It triggers a dropdown with file names relative to your existing file and subsequent path as you type.

16. View In Browser

View In Browser helps you to launch your projects into your default browser with a simple shortcut, ctrl+alt+v . It also enables shortcuts for various other browsers installed on your computer, such as Chrome, Firefox, Internet Explorer and more.

17. GhostText

GhostText is probably one of the coolest plugins I’ve seen in awhile. It allows you to link your Sublime Text editor (with all your plugins ��) to text areas in a browser. For example, you could work on a CodePen, but do all the editing in your main text editor. You just need to install the plugin and browser extension. Simply highlight the text area you want to link, and click the browser extension: then magic happens. ✨����✨

18. BracketHighlighter

BracketHighlighter does exactly what it says: it highlights the brackets in your code. It matches a variety of brackets, such as [] , () , <> , ”” , ’’ , #!xml , as well as custom brackets if you add them.

19. Gutter Color

Gutter Color is a great plugin that displays a colored icon for all lines containing a color. What’s nice about this plugin, compared to others, is that the color highlighting is a bit less intrusive, as it only appears in the gutter (instead of behind a highlighted word). It will please the designer in you.

20. ColorPicker

ColorPicker enables a color picker dialog and allows users to insert or change a selected color. To open the color picker, simply type cmd+shift+c on a Mac, or ctrl+shift+c on Windows or Linux. By default the hexcode inserted is uppercase, but you can change it to use lowercase letters by going to preferences and then package settings.

21. A File Icon

A File Icon is great for easily scanning what files you have in your project. It simply adds pretty and customizable icons to supported files in your project sidebar. It’s supported by Material and Boxy Themes for customized thematic icons.

Мастер Йода рекомендует:  Как узнать по каким запросам находят мой сайт в поисковых машинах

Themes and fun

Since you’ll most likely spend lot of time using your text editor, it’s nice to make it as visually pleasing as possible. It’s important to know that themes are different from color schemes. A theme is the look of your editor itself, such as the sidebar UI, tabs, modal windows, etc. A color scheme is the background and syntax highlight colors of the main editing area.

22. Color Sublime

Color Sublime is a plugin that enables the installation of color schemes to your editor. These color schemes change the syntax highlighting. What’s great about this is you can cycle through a list of schemes, rather than having to install each one and see if you like it.


23. DA UI

DA UI is a set of beautiful, clean interface and syntax themes for Sublime Text 3. The DA UI plugin also has custom icon support with A File Icon.

24. Theme — Spacegray

Theme — Spacegray is a set of custom UI themes for Sublime Text 2 and 3 which are very minimal and clean. Spacegray also comes with Base16 color schemes.

25. Emoji

Because. why not. The Emoji plugin allows you to insert emoji via the Command Palette. Amazing!

Plugins for all! ��

There are a ton of plugins you can install to customize your development experience. Hopefully, this article shows you a few new ones that you’ll enjoy. Do what makes sense for you and your job, and whatever will make you more efficient. Happy coding!

Grow your business with the Shopify Partner Program

Whether you offer marketing, customization, or web design and development services, the Shopify Partner Program will set you up for success. Join for free and access revenue share opportunities, tools to grow your business, and a passionate commerce community.

Let’s grow your freelance or agency business.

Get design inspiration, practical takeaways and free resources to help you find and delight clients.

Thanks for subscribing

You’ll start receiving free tips and resources soon. In the meantime, find out how Shopify’s Partner Program can help you grow your business.

About the Author

Tiffany is a Developer Advocacy Lead at Shopify. She specializes in front end development, user experience design, accessibility, and is passionate about inspiring young designers and developers. Previously, she was an Ottawa Chapter Lead for Ladies Learning Code and worked as a Front End Developer at Shopify.

Установка и настройка Sublime Text 3. Компиляция LESS, SASS, JADE. Все необходимые плагины. Полная инструкция

Привет, много уже было написано про Sublime Text. В своем блоге я писал про Sublime Text 2. Сейчас Sublime Text 3 уже вышел из альфа версии (альфа — означает — новая и крайне не стабильная версия), и перешел в бету (бета — все еще не стабильная, но уже предназначена для тестирования, после беты обычно идет официальный релиз). И я решил полностью разобраться с Sublime Text 3 (далее в тексте ST3).

Если вы собираетесь установить SublimeText3 то эта самая полная инструкция для вас. Здесь я опишу все что связано с этим редактором, а умеет он действительно многое.

Сперва я удалил из системы ST2 и все его следы. Также удалил node.js и npm который был с ним в паре. Так как я намерен заново — правильно и грамотно настроить компиляцию less, а затем и saas файлов, через sublime. Но об этом позже.

Часть 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 — установка плагинов

Часть 2. Установка плагинов и расширений для Sublime Text 3

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

Далее я сменю стандартную тему оформления и подсветки кода на Material Design. Она тоже относится к темным темам, но имеет более яркую подсветку кода, и с ней более комфртно и приятно работать при длительном написании кода.

Идем на сайт темы Material Design и жмем кнопкe install. Происходит переход на сайт PC для ST3, понимаем что тема доступна как плагин. В ST3 запускаем Ctrl+Shift+P, выбираем install package, после ищем нужную нам тему, я набираю Material Theme и нахожу ее. Жму Enter и устанавливаю.

Sublime Text 3 — Package Control — установка темы Material Design

После этого иду в меню Preferences, и выбираю установленную тему.

Sublime Text 3 — Package Control — установка темы Material Design

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

Это позволит отображать тему так как это было задумано ее создателями.
В итоге у меня получился вот такой внешний вид ST3.

Sublime Text 3 — тема Material Design

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

Я установил следующие основные плагины:

  • Emmet (ускорение написания html и css)
  • Hayaku (ускорение написания css)
  • LESS (syntax highlighting — подсветка кода less)
  • Prefixr (префиксы для CSS)
  • Placeholders (Lorem Ipsum наполнители для html файлов)
  • SFTP — плагин для работы с FTP
  • SideBarEnhancement расширяет возможность сайт бара
  • SyncedSideBar синхронизирует SideBar с открытыми файлами по клику на них
  • AdvancedNewFile создаём новые файлы и папки при помощи горячих клавиш
  • BracketHighlighter подсвечивает открытие/закрытие любого фрагмента в коде
  • jQuery набор сниппетов для jquery
  • AutoFileName автозаполнение путей к подключаемым файлам
  • CSSсomb делает код красивым
  • Gist сохранение отдельных участков кода на github прямо во время редактирования

Компиляция 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

Компиляция 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.

Устанавливаем и настраиваем 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. Теперь подсветка будет работать.

Labdes

Редактор Sublime Text 2 на сегодняшний день является достаточно популярным и продолжает перетягивать на свою сторону поклонников с других редакторов, например Notepad++. В первую очередь он привлекает внимание своей красотой, анимацией и несколькими вкусными плюшками в виде кучи плагинов и функций.

О редакторе

ST2 написан на С++ , а плагины, макросы и настройки на Python. В целом отличный редактор, явно делался с оглядкой на TextMate. Вот тут его можно скачать. Цена – 59$ но можно пользоваться бесплатно, периодически будет выскакивать предложение его купить, что мало отвлекает.

Есть версии как под Windows 32/64 так и под линукс 32/64, а также версия под Mac. Для Win есть и портабл версии. В нем используется fuzzy-поиск (нечёткий поиск), это когда вбивается всего несколько первых символов и редактор догадывается что вы ищите.

Включена поддержка ActionScript, ASP, Batch File, C#, C++, CSS, D, Erlang, Go, Graphviz, Groovy, Haskell, HTML, Java, JavaScript, LaTeX, Lisp, Lua, Makefile, Markdown, Matlab, Objective-C, OCaml, Perl, PHP, Python, R, Rails, Regular Expressions, Ruby, Scala, ShellScript, SQL, TCL, Text, Textile, User, XML, YAML. Также в редакторе есть макросы, Поддерживается система сборки приложения. Предусмотрена загрузка пакетов из GitHub, BitBucket и пользовательских JSON / репозиториев. Сохранение отдельных проектов, проверка синтаксиса, линейка, окончание строки под Unix, MacOs, Win и многое другое.

Приятные особенности в Sublime text 2:

Удобное меню команд

Оно может быть вызвано с помощью Ctrl + Shift + P на Windows и Linux, или Control + Shift + P на MacOs.

Есть модная штучка minimap/миникарта

Отображает дополнительный ползунок прокрутки в виде миникарты всего кода. Можно поставить плагин ASCII-Decorator (либо через package control). Суть его в том, чтобы отделить куски кода – пишем например текст FORM HERE жмем alt+shift+K и у нас рисуется ascii арт который хорошо виден на мини карте.

Левое/боковое меню

Отображает древовидную структуру файлов папки открытого проекта и открытые файлы. Вкладка View -> Show Side Bar.

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

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

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

Настройки осуществляются через пункт меню Preferences->Global Settings-Default, либо Preferences->Global Settings-User. Их не очень много, можно посмотреть файл настроек.

Быстрое переключение между файлами – Ctrl+P, или Command + P в маке, введите имя файла, который вы хотите получить (fuzzy поиск), и, даже не нажав Enter, вы мгновенно перенесетесь в этот файл. Vim и другие приложения, такие как PeepOpen предлагают аналогичную функциональность, но они не так быстры, как Sublime.

Мультивыбор/мультиредактирование – с множественным выбором, вы можете иметь несколько указателей на странице. Это может существенно снизить потребность в использовании регулярных выражений, а также расширенный поиск и замену.

Чтобы включить множественный выбор, у вас есть несколько вариантов:

— Нажмите Ctrl или Command , а затем нажмите в каждом месте, где нужно установить курсор.

— Наведите курсор на определенное слово и кликните 2 раза чтобы его выделить, удерживайте кнопку Ctrl , чтобы выбрать дополнительные вхождения этого слова.

— Кроме того, добавить дополнительный курсор на все вхождения слова, набрав Alt + F3 на Windows, или Ctrl + Command + G на Mac.

Также зажав на нужной строке Ctrl+Shift стрелками вверх вниз можно перемещать эту строку вверх или вниз.

Package Control

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

Полнофункциональный менеджер пакетов, который помогает выявлению, установка, обновление и удаление пакетов для Sublime Text 2. Он оснащен автоматическим обновлением и поддерживает GitHub, BitBucket и репозитории.

Таким образом можно поставить кучу плагинов на любой вкус, например плагин Zen Coding.

Zen Coding (Emmet) — это набор плагинов для текстовых редакторов, которые ускоряют написание кода на HTML, XML, XSL и других языках. Теперь называется Emmet. Проект Вадимома Макеева активно разрабатывается Сергеем Чикуенком, а также сообществом пользователей Zen Coding http://ru.wikipedia.org/wiki/Zen_Coding

Активизация по клавише TAB. Например в html документе вы пишете такую строчку

.head>#nav>ul#menu>li*4 и жмем TAB получим:

Hayaku – еще один маст хэв плагин, на подобии zen coding для CSS. Например чтобы не писать overflow:hidden; достаточно написать oh или o:h или ovhi или overfl:hidn и так далее. Или из h10 получим height:10px; из w50p выйдет width:50%; из f:l как вы уже наверное догадались float:left; Подробнее посмотрите на офф сайте: http://hayakubundle.com/

Отступы

Дают возможность гораздо легче ориентироваться на страничке и форматировать код . Sublime Text 2 предлагает эту возможность, через плагин созданный Николаусом Wittensteinом.

Alignment

Также один из популярных плагинов, предназначен для выравнивания знаков равенства «=» http://wbond.net/sublime_packages/alignment

Проще всего поставить плагин через Package Control , для этого жмем Ctrl+Shift+P начинаем писать слово install, пока не подсветится строка Package Control: Install Package, и жмем Enter. Начинаем писать Alignment чтобы найти плагин, и как только найдем его жмем Enter. Теперь зажав Ctrl ставим курсоры перед всеми знаками = которые хотим выравнять и затем жмем Ctrl+Shift+A. Готово

Для поклонников VIM

Вы можете включить Vintage режим, который обеспечивает поддержку для команд Vi

Чтобы включить режим Vintage, перейдите в Preferences/Global Settings – Default. После этого файл открывается, перейдите в самый низ, и измените “ignored_packages”: [«Vintage»] на “ignored_packages”: []. Затем перезагрузите Sublime, нажмите клавишу Escape, и тада: командный режим!

Полное погружение в редактирование

F11 – это почти fullscreen режим как и в большинстве редакторов. Если вам нужен хардкор режим, то нажмете Shift+F11 чтобы его включить. Эта опция доступна через меню View -> “Enter Distraction Free Mode”, или для Mac клавиатуры, Ctrl + Shift + Ctrl + F. Код будет расположен как бы по серединке, и больше ничего лишнего.

Возможность использовать пакеты от редактора TextMate

TextMate сниппеты и темы прекрасно портируются в Sublime Text. Вам нужно только положить их в папку Packages -. tmbundle расширение менять не надо, Sublime будет распознавать эти файлы сам. Это означает, что весь каталог TextMate тем будет отлично работать в Sublime!

sublime 1251 крякозябры

Если вы пытаетесь открыть файл с кодировкой 1251, то иногда открытый текст может отобразиться крякозябрами. Чтобы это пофиксить надо зайти в меню Настройки -> Установки по умолчанию. Найти там строчку fallback_encoding: “Western (Windows 1252)” и поменять ее на fallback_encoding: “Cyrillic (Windows 1251)”.

Добавить комментарий