Sublime Text 3 – топ 75 Sublime плагинов 2020 (PHP, JS, CSS… +тема и русификатор).

Sublime Text 3 – продвинутый мультиплатформенный редактор кода. Он имеет огромное количество плагинов, соответственно функционал редактора можно значительно расширить, чем мы и займемся. Прокачаем ваш Sublime Text 3 для web-разработки по полной. Рассмотрим топ 65 лучших плагинов 2020 – PHP, Python, JS, CSS… и их правильные настройки.

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

Для начала нам нужен установленный PHP в системе и прописанный в Path, для Windows я использую OSPanel .

Прокачка займет немало времени, зато сэкономит в процессе работы еще больше. Тут, как говорится : лучше день потерять, зато потом за пять минут долететь. Я специально проставил ссылки на все плагины Sublime Text 3, чтобы лучше понять, как они работают, не поленитесь пройти по ним и прочесть оригинальные инструкции.

Качаем версию Sublime Text 3 для нашей ОС, устанавливаем, запускаем.

Идем в пользовательские настройки кнопок: Preferences – Key Binding,  идем во вкладку User (вторая вкладка),  тыкаем в нее курсор, вставляем туда:

Эта запись добавляет горячие клавиши alt+shift+f для команды reindent – форматирования выделенного кода (выравнивания отступов).

Далее создадим файл пользовательских настроек: Preferences – Setting – User, жмем ctrl+s, проверяем так же, через ctrl+o, должен быть файлик Preferences.sublime-settings, если нет, создаем его.

Устанавливаем Node.js

Для работы некоторых плагинов нам понадобиться Node.js и Python, качаем и устанавливаем node.js. При установке, оставляем все по умолчанию.

Далее, установим необходимые библиотеки.

Устанавливаем Pyton

Далее скачиваем и устанавливаем Pyton, последний релиз, ссылка типа Windows x86(или x64) web-based installer. После чего установим плагин для анализа кода, в командной строке пишем:

Устанавливаем Package Control

Package Control – с его помощью вы можете устанавливать, обновлять , удалять и просматривать список плагинов, которые вы установили в SublimeText. На самом деле плагины Sublime Text 3 можно просто копировать (или клонировать при помощи Git) в папку (…\AppData\Roaming\Sublime Text 3\Packages), и они будут работать. Но устанавливать через Package Control куда проще.
Открываем наш редактор, жмем ctr+` или View > Show Console, должна появиться консоль, вводим:

Теперь, чтобы установить или удалить плагин для Sublime Text, жмем ctr+shift+p, вводим install Package или remove Package, выбираем, пишем название плагина, выбираем его из списка, жмем Enter.

Ставим плагины.

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

All Autocomplete – автозаполнение с открытых вкладок.
Каждый раз когда вы начинаете печатать, редактор анализирует набранный текст и предлагает наиболее релевантные варианты (из открытых документов) продолжения слова или функции в виде выпадающего списка. По-умолчанию функция доступна для языков программирования и для HTML, если набранное слово начинается со скобки «<». Для того, чтобы вызвать подсказку вручную, нажмите ctrl+space. Повторное нажатие приведет к выбору следующего в списке элемента.

Anaconda – превращает ваш Sublime Text 3 в полнофункциональную среду разработки Python, включая автозаполнение, кодировку, возможности IDE, поддержку Vagrant и Docker для Sublime Text 3 с использованием Jedi, PyFlakes, pep8, MyPy, PyLint, pep257 и McCabe.

Anaconda

Anaconda PHP – добавляет поддержку PHP linting, проверку стандартов PHP-кода Sublime Text 3, который использует движок Anaconda.

AutoFileName – еще одно автозаполнение для подключения внешних файлов в код: имени файла, картинок в папке с проектом. Не конфликтует c All Autocomplete, скорее дополняет его. Активируется так же: ctrl+space.

Auto-save – Sublime Text плагин , который автоматически сохраняет текущий файл после каждой модификации.
В настройки горячих клавиш пользователя (Preferences / Key Bindings – User) добавляем строку:

Autoprefixer – полезный плагин для Sublime Text который прописывает CSS префиксы для различных браузеров в соответствии с данными caniuse.com

autoprefixer
Настройки для двух последних версий браузеров:

Apache​Conf – подсветка синтаксиса .conf, .htaccess, .htgroups, .htpasswd.

Bootstrap 3 Snippets – автозаполнение кода Bootstrap 3 в виде выпадающего списка и по Tab.
В настройки пользователя (Preferences – Setting – User) добавляем строку:

Пример работы: пишем в html-файле – bs3-template: html5, жмем tab, должен появиться код стандартного шаблона html5+Bootstrap 3

Bootstrap 3 Autocomplete – автозаполнение.

Bootstrap 3 Autocomplete

Аналоги этого плагина уже имеются для Bootstrap 4, (Bootstrap 4 Snippets и Bootstrap 4 Autocomplete)  хотя пока чаще используется Bootstrap 3.

BracketHighlighter – подсвечивает открытие/закрытие тегов и скобок в коде.

BracketHighlighter

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

ColorHelper

Console Wrap – добавление вывода переменной в консоль по горячим клавишам ctrl+shift+q.

Console Wrap

CSS Format – форматирование и минификация CSS из контекстного меню.

CSS3 – наиболее полная поддержка CSS для Sublime Text.

DocBlockr – это пакет для Sublime Text 3, который делает написание документации на одном дыхании. DocBlockr поддерживает JavaScript (включая ES6), PHP, ActionScript, CoffeeScript, TypeScript, Java, Apex, Groovy, Objective C, C, C++ и Rust.

DocBlockr

Dockerfile Syntax Highlighting – подсветка синтаксиса Dockerfile для Sublime Text.

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

Emmet – наш знакомый плагин по статье про Notepad++, позволит нам писать HTML и CSS код быстрее, используя аббревиатуры / ярлыки, затем расширит их до допустимых HTML тегов. Это один из моих самых часто используемых плагинов, который экономит время. Emmet занимает топ 1 по популярности среди плагинов репозитория SublimeText. Как и в прошлый раз настоятельно советую изучить документацию.
Emmet

Git – плагин для работы с системой контроля версий.

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

GitGutter

Gitignore – плагин для загрузки шаблонов gitignore из коллекции шаблонов gitignore от Github
Google Search – поиск выделенного текста в Google.

Google Search ST3
Goto-CSS-Declaration – позволяет находить и переходить к id и классам в открытых CSS, LESS, SASS из редактируемых html, js и PHP-файлов.

Java​Script Enhancements – улучшенное автозаполнение JavaScript, а также множество функций по созданию, разработке и управлению Java​Script.

Java​Script & Node​JS Snippets – сниппеты JS и Node.

JavaScript Snippets for Sublime

jQuery и j​Query Snippets pack– наборы снипетов для jQuery. Эти плагины Sublime Text помогут с функциями jQuery. Они имеют почти все методы jquery в виде фрагментов для автозаполнения в коде и не конфликтуют друг с другом.

jQuery

j​Query​Docs – это пакет Sublime Text 3, который показывает выделенную функцию jQuery на api.jquery.com по alt+j.

HTML5 – аналогичный набор для набор снипетов для автозаполнения HTML5 в коде.

HTML Nest Comments – позволяет правильно комментировать код, который уже содержит комментарии по  ctrl+shift+/ .

Icon Fonts – автозаполнение для популярных шрифтов иконок, таких как Font Awesome, Glyphicons и других. (Ctrl+Space).

Sublime Text 3 icon fonts

Inc-Dec-Value – плагин позволяет уменьшать и увеличивать различные значения по горячим клавишам: числа, преобразовывать друг в друга цветовые форматы hex, rgb, rgba, hsl, hsla. С помощью этого плагина в коде мы можем одним движением заменять true на false, fadeIn на fadeOut, next на prev,  дни недели и так далее. Стандартные горячие клавиши больше не работают в Windows, потому добавим в настройки клавиш:

Laravel Blade Highlighter – подсветка синтаксиса шаблонов популярного PHP фреймворка Laravel.

LiveReload – полезный инструмент для автоматического обновления в браузере результата редактируемого кода, сразу же после его сохранения. Получается некое живое редактирование, когда мы сразу можем увидеть результат. Жмем ctr+shift+p – ищем livereload, его нужно активировать и в редактируемый файл добавить скрипт:

Удобно вставлять этот script из снипета – ctrl+shift+p, пишем livreload, выбираем пункт Snippet: insert livereload.js script, жмем на него. Так же активируем плагин ctrl+shift+p, пишем livreload, выбираем LiveReload Enable/disable plug-ins >Enable – Simple Reload. Обновляем в браузере нашу страничку один раз, правим в редакторе, сохраняем, смотрим результат в браузере. А если еще Auto-Save плагин активировать для текущей страницы, вообще сказка…

Темы: Material Theme  и  Theme – One Dark, пока не решил, какая мне больше нравиться, обе хороши. После установки можете скопировать в пользовательские настройки темы следующий код, который содержит настройки для темы, решение проблемы с русской кодировкой, настройки плагина Bootstrap 3,4 Snippets и другие полезные настройки:

Чтобы активировать Material Theme – измените настройки на :

PHP Completions Kit – автозаполнение PHP – файлов с поддержкой PHP-7. (Ctrl+Space).

PHP Format – форматирование PHP кода по стандартам PSR.

StyleToken – позволяет выделять определенные фрагменты текста разными цветами (аналогично функциональности “Token” Notepad ++).

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

Sublimerge

Горячие клавиши:
[ctrl]+[down] , [ctrl]+[up] – навигация по отличиям
[ctrl]+[left] – копировать выделенные изменения (или строку) справа на лево
[ctrl]+[right] – копировать выделенные изменения (или строку) слева на право
[ctrl]+[shift]+[left] – копировать все изменения справа на лево
[ctrl]+[shift]+[right] – копировать все изменения слева на право

SwapStrings – замена местами одинарных и двойных кавычек (ctrl+shift+alt+c) и замена слов в коде.

SwapStrings

Sass – плагин подсветки синтаксиса. SASS и SCSS это препроцессоры для быстрого написания CSS. Для работы с Emmet, необходимо в пользовательские настройки (Preferences>Package Setting>Emmet>Setting – User) добавить:

Compass (Compass Compass Build System) – компиляция SASS в CSS, нужен конфиг в папке проекта (config.rb).
Для работы необходимо установить Ruby и RubyGems . В консоли вводим:

Должна начаться установка RubyGems. После чего в командной строке:

В папке с проектом создаем файл config.rb, этот файл определяет, где CSS, JavaScript, изображения и Sass размещаются в каталоге проекта:

Откройте один из ваших .sass-файлов и нажмите CTRL + B (или Tools> Build). Если у вас есть несколько систем сборки, способных скомпилировать SASS, измените Build System на Compass в меню Tools> Build.

Less – подсветка синтаксиса в LESS.

Less2Css – компиляция LESS. Откроем настройки Sublime Text 3: Preferences → Settings → User, и в конец допишем строку: “lesscCommand”: “/usr/local/share/npm/bin/lessc”

SublimeOnSaveBuild – работает с препроцесорами LESS, SASS, JADE, выполняет компиляцию в момент сохранения файла. Иногда компилирует со второго раза:) В user-настройках плагина вставляем:

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

Terminus – отличный встроенный мультиплатформенный терминал для Sublime Text 3. Для настройки используем Key Bindings:

Trimmer – этот плагин поможет вам удалить ненужные пробелы, пустые строки, а также неправильные пробелы, что может привести к некоторым ошибкам в JavaScript. Теперь удалить пустые строки можно через меню Edit > Line > Delete Emty Line. Горячие клавиши  Windows: Ctrl+Alt+S

Vue Syntax Highlight – подсветка синтаксиса Sublime Text для однофайловых компонентов Vue. Для корректной работы еще потребуется установить Babel

Vuejs Snippets – фрагменты Vuejs для Sublime Text.

Vagrant – команды Vagrant для Sublime Text.

WordCount – счетчик слов и символов в документе при выделении. Меленькая полезная штука для оценки размера статей.

WordHighlight Подсветка, выделение и подсчет слов. Работает по: alt+enter

Minify – (minified and beauty) сжатие и форматирование CSS, HTML, JavaScript, JSON, SVG.

LiveStyle – редактируем CSS стили в Google Chrome через просмотр кода элемента, для него ставим дополнение Emmet LiveStyle.

RemoveDuplicateLines – удалит дубли строк.

Sublime-OpenUri – открывает ссылки в браузере.

Sublime-OpenUri

Настройки плагина:

SublimeLinter. Линтер – небольшая программа, которая проверяет код программирования и стилистические ошибки. Проверка кода для множества языков: C/C++, Java, Python, PHP, JS, HTML, CSS и др. Далее установим плагины к SublimeLinter для проверки:

SublimeLinter-csslint – линтер CSS.

SublimeLinter-html-tidy – линтер HTML.
Качаем tidy, прописываем в Windows path, например: C:\tidy

SublimeLinter-jshint – линтер JS.

SublimeLinter-php – линтер PHP.
Нужен Path в Windows к PHP.

Sublime-linter-PHP

Gutter Themes for SL – тема подсветки ошибок. Найдите свой Packages каталог с помощью Preferences > Browse Packages, переместите Gutter Themes for SL в свой каталог Packages.

Вот мой файл настройки SublimeLinter:

HTML-CSS-JS Prettify – форматирует HTML, JS, CSS файлы.

eCSStractor – создает css со стилями, вытянутыми из html

eCSStractor

CleanCSS – сортирует атрибуты в CSS

CleanCSS
Добавляем в Key Bindings:

В пользовательские настройки:

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

A File Icon Sublime Text 3

LocalizedMenu – в меню выбрать Preference -> Languages -> Русский.

Проверка орфографии. Качаем словарь, кидаем в папку с плагинами два файла Russian-English Bilingual.aff и Russian-English Bilingual.dic. Идем в Вид>Словарь, выбираем его. Для автоматической проверки правописания добавляем в настройки>User:

Вроде бы все, да не тут то было)…

INI – подсветка синтаксиса для .ini файлов. Редактируем наш любимый php.ini с комфортом.

Smarty – подсветка синтаксиса для .tpl файлов PHP-шаблонизатора Smarty, например шаблонов нашей любимой PrestaShop).

Yii​2 Auto-complete – автозаполнение для фреймворка Yii2

шпаргалка по горячим клавишам Sublime Text 3.

Мои настройки горячих клавиш:

Если все все сделали и у вас получилось – мои поздравления, теперь у вас есть мощный инструмент для редактирования кода, чтобы это добро не потерять, есть еще пару плагинов для резервного копирования и переноса настроек:

PackageSync и Sync Settings

PackageSync Sublime Text 3

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

Комментарии 16

  • Первая порядочная статья за 2 года!

  • Здравствуйте. Всё класс. Будет у Вас описание на видео (подробно) было бы классно. А то многое не понятно…

  • Добавлю хороший плагин EasyMotion, позволяет быстро пермещаться:
    https://packagecontrol.io/packages/EasyMotion

  • Отличная статья, спасибо!
    Не планируется подобной по сниппетам и настройке подсветки произвольного синтаксиса?

    • Подсветку произвольного не думал описывать, для начала я бы постарался найти готовый плагин подсветки для вашего формата. По сниппетам EMMET есть готовая инструкция, но кажется сайт заблокирован в РФ, вот вам в pdf, качайте.

  • Все отлично! А есть ли возможность в консоли смотреть выполнение php скрипта?

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

  • спасибо и правда полезная статейка )

    подскажите а не могли бы вы подробней расписать шаги по установке Node.js и Ruby , спаисбо )

  • Соглашусь. Спасибо автору. Настроил все для js и php.

  • Спасибо Вам огромное! Замечательная статья!

  • А можно путь к папке с плагинами (для LocalizedMenu )

  • добрый день, еще актуальны комментарии ?))
    есть плагин который в css помогает автозаполнять классы из html?
    Спасибо

    • Добрый день, он есть в статье – eCSStractor, если вы про это, или All Autocomplete – который не только классы автодополняет.

  • Здравствуйте!
    CleanCSS – сортирует атрибуты в CSS. Вроде бы все прописал, но при сортировке – все равно часть стилей рандомно выкидывает наверх, приходится делать копии и расставлять снова в ручном режиме их назад.
    Вопрос: не могли бы подсказать что не так может быть или где искать ошибку?
    Благодарю 🙂

    • Посмотрите может плагины node.js, у меня нормально сортирует, еще окончания строк посмотрите

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Яндекс.Метрика