Лучшие плагины для Sublime Text / Хабр

WebInspector

Мощный инструмент для дебаггинга JavaScript, полноценный инспектор кода для Sublime. Фичи: установка брейкпоинтов прямо в редакторе, показ интерактивной консоли с кликабельными объектами, остановка с показом стек трейса и управление шагами дебаггера. Все это работает на ура! А еще есть Fireplay от Mozilla, который позволяет подключаться к Firefox Developer tools и максимально простой дебаггер JSHint.

Emmet

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

Видео с лучшими приемами от автора проекта:

Git

Суть этого плагина понятна из названия — возможность работать с Git прямо в вашем любимом редакторе.

Данный способ работы с Git позволит вам сэкономить массу времени. Во-первых: вам не придется постоянно переключаться между окнами Sublime и терминала. Во-вторых: есть грамотный автокомплит и вместо git add -A, достаточно написать add. В-третьих: существуют такие мелочи как Quick commit, который одной командой quick добавляет все изменения и коммитит их.

Если от Git вам необходима возможность только забирать содержимое с удаленных репозиториев, то с этой задачей прекрасно справляется Fetch.

Существует еще Glue, который выводит внизу небольшое окошко, где можно писать на Shell. Благодаря этому из редактора теперь будет доступен не только Git…

GitGutter и Modific

Данные плагины подсвечивают строки измененные последним коммитом, другими словами diff tools в режиме реального времени.

BracketHighlighter

Мега круто! Открытие и закрытие любого фрагмента в коде должно выглядеть именно таким образом.

EditorConfig

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

Пример файла

# Корневой файл EditorConfig
root = true
# Для всех файлов используем unix-совместимые переносы строк
[*]
end_of_line = lf
insert_final_newline = true
# отступы в 4 пробела
[*.py]
indent_style = space
indent_size = 4
# Используем табы для отступов (Не указываем размер)
[*.js]
indent_style = tab
# Перезависываем настройку отступов для js файлов в папке lib
[lib/**.js]
indent_style = space
indent_size = 2
# Только для файлов package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

Sublimall

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

AllAutocomplete

Классическое автодополнение в Sublime Text работает только с текущим файлом. AllAutocomplete осуществляет поиск по всем файлам открытым в текущем окне, что значительно упрощает процесс разработки. Также существует плагин CodeIntel, который воплощает в себе возможности IDE и помимо умного автокомплита привносит в Sublime «Code Intelligence» для ряда языков: JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP.

SublimeREPL

Вероятно, один из самых полезных плагинов для разработчиков. SublimeREPL позволяет прямо в редакторе интерпретировать целое множество языков: Clojure, CoffeeScript, F#, Groovy, Haskell, Lua, MozRepl, NodeJS, Python, R, Ruby, Scala, shell.

DocBlockr

DocBlockr станет для вас эффективным помощником при документировании кода. После ввода /** и нажатия на клавишу Tab плагин автоматически распарсит любую функцию и подготовит соответствующий шаблон.

Floobits

Потрясающее расширение для SublimeText, Vim, Emacs, IntelliJ IDEA, которое позволяет разработчикам совместно работать на кодом, причем из разных редакторов.

AutoFileName

Автозаполнение путей к подключаемым файлам — очень удобно. Без лишних слов.

ColorPicker

Обычно, когда нам требуется цветовая палитра мы привыкли использовать Photoshop или Gimp. Но полноценный color picker может быть прямо в окне вашего редактора —

Ctrl/Cmd + Shift + C. А еще есть замечательные GutterColor и ColorHighlighter, которые упрощают ориентирование в цветовых кодах:

Colorcoder
Разукрашивает все переменные, тем самым значительно упрощая ориентацию в коде. Особенно полезно для разработчиков с дислексией.

PlainTasks

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

MarkdownEditing

Вероятно лучший плагин для работы с Markdown: подсветка, сокращения, автодополнение, цветовые схемы и др. Как альтернативно решение, можно попробовать MarkdownPreview.

Напоследок:

  • Sublime SFTP
  • CTags — поддержка CTags в Sublime.
  • SideBarEnhancement — множество дополнительных функций контекстного меню в сайдбаре.
  • ActualVim — Vim в Sublime — два любимых редактора в одном.
  • SublimeLinter — поддержка линта для множества языков: C/C++, Java, Python, PHP, JS, HTML, CSS и др.
  • CSScomb — комбинирует CSS свойства в определенном порядке.
  • FixMyJS, Jsfmt и JsFormat — плагины для форматирования JS/JSON-кода.
  • AStyleFormatter — форматирует C/C++/C#/Java код.
  • SVG-Snippets — большая коллекция полезных шаблонов при работы с SVG.
  • Inc-Dec-Value — позволяет изменять числа, даты, HEX цвета с помощью стрелок на клавиатуре, подобно инспектору в браузере.
  • Trailing Spaces — подсвечивает удаляет все случайные пробелы в конце строк при сохранении файла.
  • Alignment — функциональное выравнивание фрагментов кода от автора Package Control.
  • Placeholders — коллекция шаблонов с параграфами, изображениями, списками, таблицами и тд.
  • ApplySyntax — налету определяет синтаксис в текущем файле.
  • StylToken — подсветка определенных фрагментов текста, как в Notepad++.
  • EasyMotion — удобный переход к определенному символу с помощью клавиатуры.
  • ZenTabs и Advanced​New​File — усовершенствуют стандартное отображение вкладок и создание файлов.
  • EncodingHelper — отображает кодировку файлов в строке статуса и оповещает о соответствующих ошибках.
  • Gist — синхронизирует GitHub Gist с Sublime (ST2).
  • Clipboard History (ST2) — плагин ведет историю буфера обмена, что позволяет вставить не только последний скопированный фрагмент кода, но и любой из предыдущих.
  • Темы и цветовые схемы:
    • Soda
    • Spacegray
    • Flatland
    • Tomorrow
    • Base 16
    • Solarized
    • Predawn
    • itg.flat
    • Для всех других предпочтений есть Color Schemes и Сolorsublime.

* В некоторых репозиториях указано, что плагин написан под ST2, но я все проверял и многое использую сам под ST3.
* Я не стал описывать ряд плагинов, которые выполняют действия по форматированию, компиляции, оптимизации, ибо искренне убежден, что это задачи для Grunt, Gulp, Prepros или CodeKit.

Sublime Text 2 обзор и плагины/plugins

Редактор 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. Их не очень много, можно посмотреть файл настроек.

Иконки – см мою подборку красивых значков для sublime text 2

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

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

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

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

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

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

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

Package Control

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

http://wbond.net/sublime_packages/package_control

установка http://wbond.net/sublime_packages/package_control/installation

Полнофункциональный менеджер пакетов, который помогает выявлению, установка, обновление и удаление пакетов для 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 и так далее. Или из h20 получим 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)”.

Полезные ссылки для Sublime text 2

  • Море плагинов http://wbond.net/sublime_packages/community
  • Форум http://www.sublimetext.com/forum/
  • Тут про Zen Coding http://www.sublimetext.com/forum/viewtopic.php?f=2&t=580#p10654
  • Тут все про плагины http://www.sublimetext.com/forum/viewforum.php?f=5
  • Популярные плагины http://wbond.net/sublime_packages/
  • Простейшая установка package control http://wbond.net/sublime_packages/package_control/installation
  • Красивая подсветка скобок – плагин BracketHighlighter https://github. com/facelessuser/BracketHighlighter и решение чтобы красиво подсвечивалось – тут и тут
  • Не офф документация на ENG http://docs.sublimetext.info/en/latest/index.html
  • Горячие клавиши найдены тут http://onofflife.blogspot.com/2012/01/sublime-text-2-hotkeys-ver-10.html
  • 10 маст-хэв плагинов
  • большая подборка цветовых тем, и еще, и еще
  • все цветовые темы siblime  включенные в package control
  • визуальные UI темы sublime включенные в package control


Популярные пакеты — Управление пакетами

Просмотр

  • Управление пакетами

    на Will Bond (Wbond) 22,99M Установки

    Ограниченный текстовый пакет диспетчер

  • By ST3 5.8669

    By ST3 5.866

    By ST3 5.866

    .

    Основной набор инструментов для веб-разработчиков

  • SideBarEnhancements

    by titoBouzout ST3 2. 79M Устанавливает

    Улучшения боковой панели Sublime Text. Файлы и папки.

  • BracketHighlighter

    by facelessuser ST3 2.52M Installs

    Bracket and tag highlighter for Sublime Text

  • SublimeLinter

    by SublimeLinter 2.24M Installs

    The code linting framework for Sublime Text

  • Sublimecodeintel

    на Kronuz 1,80M Установки

    Полнофункциональный интеллект и интеллектуальной интеллект и интеллектуального автоматического комплекта AutoFileName by liamcain 1,54M Установок

    Плагин Sublime Text, который AutoCompletes FilenAmes

  • Выравнивание

    . 1,44 млн установок

    Многоплатформенный плагин выбора цвета

  • SublimeREPL

    by wuub 1.34M Установок

    SublimeREPL — запуск интерпретатора внутри ST2 (Clojure, CoffeeScript, F#, Groovy, Haskell, Lua, MozRepl, NodeJS, Python + virtualenv, R, Ruby, Scala. ..)

  • Material Theme

    by equinusio, material-theme, SublimeText ST3 1.29M Installs

    Material Theme, тема для Sublime Text 3, созданная Mattia Astorino

  • HTML-CSS-JS Prettify

    by victorporof 1.27M Установок

    HTML, CSS, JavaScript, JSON, React/JSX и форматировщик кода Vue для Sublime Text 2 и 3 через node.js

    700914 00UTFTo 908065
  • by seanliang 1.26M Installs

    Плагин Sublime Text 2 и 3 для редактирования и сохранения файлов, закодированных в GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS и т. д.

  • SASS

    By Braver 1,24M Установки

    SASS и SCSS Синтаксис для Sublime Text

  • Icon File

    By Ihodev, Deathaxe ST3 1.22M8. Улучшенный визуальный поиск

  • Цветной маркер

    by Monnoroch 1,21 млн установок

    ColorHighlighter — это плагин для Sublime text 2 и 3, который подменяет выбранные шестнадцатеричные цветовые коды (такие как «#FFFFFF», «rgb(255,255,255)», «белый» и т. д.) их реальным цветом. Кроме того, плагин добавляет палитру цветов, чтобы легко изменять цвета. Документация: https://monnoroch.github.io/ColorHighlighter.

  • SFTP

    by Will Bond (wbond) 1,21 млн0003

  • GIT

    By Kemayo 1,18M Установки

    Плагин для некоторой интеграции GIT в Sublime Text

  • Docblockr

    By Spadgos 1.18M Установки 2. , Actionscript, C & C++

  • Китайская локализация

    by rexdf 1.17M Установка

    Локализация для превосходного текста, поддержка 简体 中文 繁体 中文 日本語 日本語 日本語 日本語 日本語 日本語 日本語 日本語 日本語 日本語 日本語 日本語 日本語 日本語 日本語 日本語 日本語 日本語 日本語 日本語 日本語 日本語 日本語 日本語 китайское японское немецкое русское русское испанский шведский и французский

  • JQUERY

    By SublimeText 1,17M Установки

    Сублимм.

    Pretty JSON

    by dzhibas 1.08M Установок

    Prettify/Minify/Query/Goto/Validate/Lint Плагин JSON для Sublime Text 3 & 4

  • 1337 Цветовая схема

    By Markmichos 1,06M Установки

    1337 — Цветовая схема для темного возвышенного текста

  • All Autocomplete

    ALIENHARD AUTIENHARD 1. 06M9 9007 DESTIME -SAILEMENTEMENTERE. во всех открытых файлах текущего окна

Использование — Контроль пакетов

Документы

Базовая функциональность

Управление пакетами управляется палитрой команд. Чтобы открыть палитру, нажмите ctrl + shift + p (Win, Linux) или cmd + сдвиг + р (Мак). Все команды управления пакетами начинаются с Package Control:, поэтому начните с ввода Package .

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

Установить пакет
Показать список всех доступных пакетов, доступных для установки. Сюда будут включены все пакеты из канала по умолчанию, а также любой из репозиториев, которые вы добавили.
Добавить репозиторий
Добавьте репозиторий, который не включен в канал по умолчанию. Позволяет пользователям устанавливать и автоматически обновлять пакеты с GitHub и BitBucket. Чтобы добавить пакет размещенный на GitHub, введите URL-адрес в форму https://github.com/имя пользователя/репо. Не включать .git в конце! Репозитории BitBucket должны использовать формат https://bitbucket.org/имя пользователя/репозиторий.
Удалить пакет
Это удалит папку пакета и имя пакета из список установленных_пакетов в Пакеты/Пользователь/Управление пакетами.sublime-settings. Установленные_пакеты позволяют Контролю пакетов автоматически установить пакеты для вас, если вы скопируете свои Packages/User/ папку на другую машину.

По умолчанию Package Control проверяет наличие новых версий при запуске. Этот настройка, плюс список каналов и репозиториев управляются через настройки.

Другие команды

Добавить канал
Добавляет еще один канал со списком репозиториев. Это редкость, но позволяет пользователям создавать собственный канал репозиториев для совместного использования.
Создать файл пакета
Для разработчиков пакетов. Берет папку пакета и генерирует .sublime-package, который можно загрузить в Интернет и указан в файле packages.json для репозитория.
Создать файл двоичного пакета
Для разработчиков пакетов. Создает файл .sublime-package, который не включает исходные файлы .py, но вместо этого байт-код .pyc файлы. Это полезно для распространения коммерческих пакетов. Быть уверенным чтобы проверить полученный файл . sublime-package, чтобы убедиться, что включен как минимум один файл .py, чтобы Sublime Text загрузить пакет.
Отключить пакет
Отключает пакет, что приводит к выгрузке любых скриптов Python, и другие файлы, такие как файлы .sublime-keymap, которые будут также разгружается.
Откройте для себя пакеты
Открывает веб-браузер для просмотра.
Включить пакет
Повторно включает пакет, который был отключен.
Обновление/перезапись всех пакетов
Это обновит ВСЕ пакеты , включая которые не были установлены через Package Control. Если вы разрабатываете пользовательская копия пакета, вы можете не захотеть использовать эту команду.
Пакет обновлений
Показать список пакетов, доступных для обновления, и пользователь выбирает, что он хотел бы обновить.
Установить локальную зависимость
Показать быструю панель папок в Packages/, которых нет в настоящее время установлены как зависимости, но имеют .sublime-файл зависимостей. После выбора зависимости загрузчик будет установлен, позволяя использовать зависимость для разработка, без необходимости отправлять ее на канал по умолчанию первый.
Параметры управления пакетами — по умолчанию
Откройте файл настроек по умолчанию, который можно использовать в качестве справки для изменения настроек пользователя. Любые изменения в этом файле будут быть потеряны всякий раз, когда управление пакетами автоматически или вручную обновлен.
Параметры управления пакетами — Пользователь
Открывает пользовательские настройки для управления пакетами.

No related posts.