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 Text это вообще отдельная тема. Их нереально много. Около 800 разработчиков регулярно пополняют репозиторий все новыми и новыми разработками!

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

Установка Package Control производится в виде отправки запроса на сервер через консоль. Консоль вызывается нажатием Ctl+~(Ё) и туда необходимо вставить следующий код и нажать Enter:

Код для Sublime Text 2
import urllib2,os,hashlib; h = "7183a2d3e96f11eeadd761d777e62404" + "e330c659d4bb41d3bdf022e94cab3cd0"; pf = "Package Control.sublime-package"; ipp = sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); by = urllib2.urlopen("http://sublime.wbond.net/" + pf.replace(" ", "%20")).read(); dh = hashlib.sha256(by).hexdigest(); open(os.path.join(ipp, pf), "wb").write(by) if dh == h else None; print("Error validating download (got %s instead of %s), please try manual install" % (dh, h) if dh != h else "Please restart Sublime Text to finish installation")

Код для Sublime Text 3
import urllib.request,os; pf = "Package Control.sublime-package"; ipp = sublime.installed_packages_path(); urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler())); open(os.path.join(ipp, pf), "wb").write(urllib.request.urlopen("http://sublime.wbond.net/" + pf.replace(" ","%20")).read())

После установки Package Control в меню Preferences должен появиться дополнительный пункт как на скриншоте выше! Отсюда ведется управление плагинами и все, что с ними связано! Установка плагинов осуществляется через репозиториум - единую базу всех плагинов!

На скриншоте показано, что для вызова консоли управления плагинами необходимо зайти в: Preferences->Package Control->Install Packages а далее на примере скриншотов ниже я расскажу, что необходимо сделать!

Зайдя в раздел Install Packages я, например, хочу себе что-нибудь для CSS. Для этого ввожу в поиск слово CSS и для меня формируется список доступных плагинов по данному ключевому слову:

Я подобрал для себя плагин CSS3_Syntax и хочу его установить. Для этого я просто нажимаю на него и отправляю свой взор в правый нижний угол. Там будет показан процесс установки:

Первый скриншот это процесс установки, где символ равенства мечется между двумя квадратными скобками: [ = ]. Это значит, что редактор проводит какие-то операции. В данном случае скачивает и подключает плагин.

Второй скриншот - сообщение об успешной установке!

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

Package Control

Менеджер пакетов для Sublime. Без него установка и удаление пакетов – сущий ад, поэтому поставить Package Control нужно прежде всего.

Emmet

Эммет стоял бы номером один, если бы у Саблайма был нормальный менеджер пакетов из коробки. Благодаря ему работа с разметкой становится в разы удобней и быстрее. Например, html + tab создаст готовый каркас для html-документа, а div.wrapper + tab превратится в

JavaScript & NodeJS Snippets

Коллекция сокращений сниппетов для JavaScript, которая поможет работать значительно быстрее. Зачем писать document.querySelector("selector’); , когда можно просто написать qs , нажать таб — и дело с концом!

Advanced New File

С этим пакетом не придется лазить по деревьям каталогов и пользоваться выпадающими менюшками. Через cmd+alt+n (ctrl+alt+n) вызовется строка для ввода – вводим путь, имя файла, клацаем Enter. Готово!

Git

Этот плагин добавляет возможность пользоваться всеми необходимыми для разработки функциями Git: add, commit, доступ к логам – и все это не покидая Sublime!

GitGutter

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

Side Bar Enhancements

Как и следует из названия, этот пакет добавит некоторые улучшения в левый сайдбар. Например, появятся пункт «Открыть в браузере», возможность сделать дубликат и еще около 20 полезных функций.

ColorPicker

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

Placeholders

В Sublime Text 3 появилась возможность генерировать и вставлять lorem ipsum, а Placeholder немного расширяет эту возможность. С ним можно вставлять макетные изображения, формы, списки и таблицы.

DocBlockr

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

SublimeCodeIntel

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

Minify

Минифицирует и создает в каталоге текущего файла его минифицированную версию. Работает с CSS, HTML, JavaScript, JSON и SVG. Для работы требует внешние node.js библиотеки, так что их придется установить отдельно:

npm install -g clean-css uglifycss js-beautify html-minifier uglify-js minjson svgo

npm install - g clean - css uglifycss js - beautify html - minifier uglify - js minjson svgo

Sublime Linter

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

Привет, друзья! По многочисленным просьбам обновил руководство по быстрой настройке редактора кода Sublime Text 3 , установке необходимых для вёрстки плагинов и создании своего пресета настроек для быстрого старта на новом рабочем месте.

Класснуть

Плюсануть

Запинить

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

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

По-умолчанию Sublime Text выглядит довольно печально:

Для начала необходимо настроить Package Control . Для этого нажимаем хоткей Ctrl+Shift+P. Во всплывающем окне набираем Install Package Control и выбираем соответствующий пунк. Через несколько секунд Package Control будет установлен, о чём вы получите соответствующее уведомление.

Если вы пользователь MacOS, необходимо нажать на клавиатуре Cmd+Shift+P.

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

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

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

Для установки плагинов в Sublime Text через Package Control необходимо вызвать меню, как мы это делали ранее: Ctrl+Shift+P. Затем вводим команду "Install Package" и выбираем нужный пакет из списка.

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

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

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

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

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

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

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

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

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

Для установки BufferScroll вручную, перейдите на GitHub страницу плагина , скачайте и распакуйте его в любое удобное место на вашем диске. Далее в Sublime Text выбираем пункт меню Preferences > Browse Packeges. Откроется папка пользовательских данных на вашем диске. Скопируйте сюда папку, содержащую файлы Buffer Scroll и перезапуститие Sublime Text. Теперь плагин работает.

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

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

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

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

{ "show_definitions": false, "auto_complete": false, "bold_folder_labels": true, "color_scheme": "Packages/One Dark Material - Theme/schemes/OneDark.tmTheme", "fold_buttons": false, "font_size": 13, "highlight_line": true, "indent_guide_options": [ "draw_normal", "draw_active" ], "line_padding_bottom": 2, "line_padding_top": 2, "margin": 2, "material_theme_compact_sidebar": true, "material_theme_compact_panel": true, "material_theme_small_statusbar": true, "material_theme_small_tab": true, "tab_size": 2, "theme": "OneDarkMaterial.sublime-theme", "word_wrap": "false", }

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

[ { "keys": ["alt+shift+f"], "command": "reindent" }, ]

Теперь при выделении и по нажатию Alt+Shift+F ваш код будет автоматически выравниваться отступами с соответствующей иерархией вложенности элементов.

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

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

Для того, чтобы сделать бэкап всех ваших настроек и быстро развернуть Sublime Text на другом рабочем месте, достаточно скопировать папку
"C:\Users\{Ваш пользователь}\AppData\Roaming\Sublime Text 3"
в потаённое резервное место на вашем диске или на флешку, а затем разместить у другого юзера или на другом компьютере в этой-же директории под пользователем.

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

Правильный набор плагинов может повысить эффективность работы в любом приложении. Если вы являетесь веб-разработчиком, работающим с 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

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

До: