K

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

WebInspector

Удивительный инструмент для debagging наличие полноценного инспектора кода для Sublime. Особенности: точки останова для реализации проекта, сохраненного в пользовательских настройках с абсолютными путями, консоль, Отладчик и останова, трассировки стека. Все это работает на ура! А еще есть Fireplay от Mozilla, который позволяет подключаться к Firefox Инструменты разработчика и простейшей debagger JSHint .

Муравей

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

Git

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

Если с Git вам нужно всего лишь возможность содержания взять из удаленных репозиториев, то я рекомендую Nettuts + Fetch .

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

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

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

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

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


Обычно, когда мы должны цветовую палитру мы привыкли использовать Photoshop или Gimp. Но полное выбора цвета могут быть доступны непосредственно в редакторе - Ctrl / Cmd + Shift + C И ты замечательно. GutterColor и ColorHighlighter , которые упрощают ориентацию в цветовых кодов:

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

Блестящий TODO-лист! Все задачи хранятся в файлах, так что это очень удобно, чтобы связать задачи с соответствующим проектом. Возможность создавать проекты, присвоить теги, установите дату. Компетентный пользовательский интерфейс и ярлыки.

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

В конце концов

  • Sublime SFTP
  • CTags - CTags поддержка FO Sublime.
  • SideBarEnhancement - множество дополнительных возможностей контекстного меню в боковой панели.
  • ActualVim - Вим в Sublime - два любимых редакторов в одном.
  • SublimeLinter - Встроенный нибудь вкусненькое подсветка для C / C ++, Java, Python, PHP, JS, HTML, CSS, и т.д.
  • CSScomb - CSS стиль кодирования форматирования.
  • FixMyJS , Jsfmt и JsFormat - JS / JSON форматтеры стиль кодирования.
  • AStyleFormatter - C / C ++ / C # / Java кодирования форматирования стиля.
  • SVG-фрагменты - набор пользовательских фрагменты SVG.
  • Inc-Dec-Value - увеличение / уменьшение числа, даты, цвет шестнадцатеричные значения, и т.д.

«Окей, кажется, у меня есть блог. Так далеко я еще не заходил. Что дальше?»

Наверное, многие блоггеры задавались подобным вопросом, когда думали о том, каким будет их первый пост. Чтобы не дать этой мысли полностью заполнить голову, перейдём к делу.

Sublime: докатился

Долгое время в разработке я использовал Webstorm от JetBrains. Это довольно солидная IDE с огромным количеством плюсов: автокомплит кода, встроенный многооконный терминал и отдельный терминал для запуска node.js сервера, множество интеграций и плагинов, file watchers и ещё куча всего полезного. Однако, не обошлось без минусов, и главным минусом для меня оказался недостаток производительности. Запуск большого проекта длился чуть ли не минуту, постоянные переиндексации выливались в заметные подтормаживания - даже после всяких танцев с бубном, увеличения выделяемой памяти и отключения всего и вся.

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

А затем я взглянул на количество и качество плагинов для ST3, и понял, что вряд ли у меня появятся какие-либо сожаления по этому поводу.

Итак, какие же плагины я нахожу полезными для js-разработчика?

Terminal
По чему я действительно скучаю, так это по встроенному терминалу в Webstorm. Этот плагин хоть немного избавляет от этой легкой тоски. При настройках по умолчанию ctrl + shift + t открывает терминал.

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

Seti UI Icons for Sublime Text
То, чего мне сразу стало не хватать в ST3 по сравнению с Вебштормом — иконки файлов в сайдбаре. Выглядят мило, времени на идентификацию файла уходит меньше. В Package Control его нет — с установкой придется поприседать. А, и еще нет иконки для jsx-файлов.

Oceanic Next Color Scheme
Симпатичная темная тема. Нраица.

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

На этом всё, если найду интересные и полезные плагины — может, ещё напишу подобный пост. До связи!

Правильный набор плагинов может повысить эффективность работы в любом приложении. Если вы являетесь веб-разработчиком, работающим с Sublime Text 3 Package Ccontrol , мы настоятельно рекомендуем внимательно ознакомиться с рассмотренными в этой статье плагинами:

  • Package Control ;
  • HTMLPrettify ;
  • Emmet ;
  • Bracket Highlighter ;
  • jQuery ;
  • Case Conversion .

Package Control

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

Как установить

  1. Перейдите по ссылке https://packagecontrol.io/installation и скопируйте команду, которая будет выглядеть примерно так:
  1. Нажмите Ctrl — обратный апостроф (; `), чтобы открыть Sublime Text Console :


  1. Вставьте команду и нажмите Enter .
  1. После запуска команды вы увидите небольшое всплывающее окно с предупреждением:


  1. Нажмите «ОК ».
  2. Закройте и перезапустите Sublime Text .
  3. Введите команду Package Control , чтобы просмотреть все команды:


Мы будем использовать Package Control Sublime Text для остальных плагинов.

HTMLPrettify

Принимает длинные строки HTML , CSS , JavaScript и JSON и форматирует их так, чтобы вы могли их прочитать, а не пытались разобраться в сплошном наборе текста.

Как установить

  1. Нажмите Ctrl-Shift-P в Windows , чтобы открыть «Панель команд ».
  2. Введите команду Package Control , чтобы просмотреть все команды. Выберите Package Control: Install Package . На экране появится меню доступных плагинов:


  1. Введите HTMLPrettify :


  1. Нажмите на HTML-CSS-JS Prettify . Данное название немного отличается, но это тот же плагин.

Emmet

Это плагин раньше назывался Zen Coding . Он позволяет писать сокращенные коды HTML и CSS . Например, набрав следующее:

#page>div.logo+ul#navigation>li*5>a{Item $}

И нажав клавишу tab , вы получите:

После установки Emmet с помощью Sublime Text Package Control перезапустите Sublime Text .

Чтобы Emmet работал, необходимо установить синтаксис для документа. Иначе он работать не будет:


Теперь проверьте. Введите следующее:

nav#menuSystem.navMenu.isOpen>div#hotelLogo>div.navMenuIcon.logoIcon+div#arrowPointer+ul#navMenuMain>li.navMenuItem.navMenuItem$$$*2>div.navMenuIcon{Item $}+a{Item $}

И нажмите tab . Вы получите:

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

BracketHighlighter

Плагин подсвечивает скобки и теги. После установки с помощью Sublime Text Package Control install можно щелкнуть в любом месте JavaScript или HTML-кода , и увидеть в левом столбце открытие и закрытие скобок:


JQuery

Плагин jQuery подсвечивает корректный синтаксис методов jQuery и предоставляет фрагменты кода для его завершения:


Case Conversion

Позволяет переключаться между snake_case , camelCase , PascalCase и т. д. После установки плагина с помощью Package Control (введите «pic » для быстрого доступа к Install Package ), попробуйте:

До: navMenu

Нажмите: ;;c, затем;;c

После: nav_menu

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

До: