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

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

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

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

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

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

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

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

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

Устанавливаем Ruby и RubyGems

Для работы необходимо установить Ruby и RubyGems . После установки Ruby, распакуйте RubyGems и кликаем правой кнопкой мышки с зажатым SHIFT на ней, выбираем PowerShell или консоль, вводим:

Должна начаться установка RubyGems.

Устанавливаем 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

или настройки-> Package Control -> вводим install Package (remove Package для удаления), выбираем, пишем название плагина, выбираем его из списка, жмем Enter.

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

Если вам лень читать дальше и хотите все и сразу -листайте страницу вниз, до заголовка — «Турбо настройки».

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

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

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

Топ плагины Sublime Text.

Я не зря поставил ссылки на все плагины, очень рекомендую ознакомиться с описанием и инструкциями от разработчиков, если плохо с английским, пользуемся 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. Идем в настройки модуля и пишем:

E501 — означает пропуск проверки длины строк (мне не нужно), ну и авто формат включил, пригодиться.
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.

Djaneiro — автозаполнение и синтаксис Python Django для 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

GhostText — один из самых крутых плагинов, позволяет связать редактор Sublime Text (со всеми вашими плагинами) с полями для ввода текста в браузере. Например, вы можете работать с CodePen, но все редактировать в Sublime Text. Просто нужно установить плагин и расширение для браузера. Просто выделите текстовую область, которую вы хотите связать, и щелкните расширение браузера: тогда произойдет волшебство.

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 & 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 и другие полезные настройки:

Посмотреть, что означают эти настройки можно на сайте неофициальной документации по Sublime Text 3.

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).

После чего в командной строке:

В папке с проектом создаем файл 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-настройках плагина вставляем:

Local History — локальная система контроля версий (аналог Git). Каждый раз, при открытии, закрытии файла, потери фокуса, создает снимок в своей базе. Через контекстное меню можно сравнить открытый файл и любой из его более старых версий из истории. Есть инкрементное сравнение файлов.

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

SublimeLinter-json — линтер json.

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 — плагин для бэкапа и восстановления настроек и плагинов.

Турбо установка и настройка Sublime Text 4

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

  1. Установите Sublime Text 4 в C:\Program Files\Sublime Text
  2. Tools->Install Package Control
  3. Preferences->Package Control->Package Control:Install Package->PackageSync
  4. Скопируйте на рабочий стол файл SublimePackagesList.txt
  5. Tools->PackageSync->Backup/Restore->Restore Installed SublimePackagesList Only (если ничего не происходит — перезагружаем Sublime Text, далее могут появиться окошки с предупреждениями — закрываем их и не паримся, можно запустить процедуру второй раз — пройдет гладко.)
  6. Preferences->Browse Packages… — сюда копируем с перезаписью файлы из Packages
  7. Копируем папку templates в C:\Program Files\Sublime Text
  8. Запускаем Turbo Install Sublime 4.bat, жмем 1, если все хорошо, жмем 2 и 3
  9. Если в пункте 1 что-то не так, фиксим, читаем инструкции тут intopsite.ru
  10. Preferences->Language->Русский и наслаждаемся прокачанным Sublime Text 4!

 

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

 

5/5 - (2 голоса)

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

  • Первая порядочная статья за 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, у меня нормально сортирует, еще окончания строк посмотрите

  • Здравствуйте, не подскажите плагин для TWIG-шаблонов? И ещё вопрос если к плагину нет описания настроек, значит его просто установить и он будет работать, или ими как-то надо специализировано пользоваться? Спасибо.

    • Здравствуйте, ищите в плагинах TWIG — там нет настроек, он просто включает расширенную подсветку синтаксиса.

  • Здравствуйте! Начал использовать Sublime Text 3. Пишу на С++ и Clarion. C синтакисиом C++ все понятно, а вот с Кларионом — проблема. Можно ли создать свой плагин или самостоятельно перестроить какой-то, чтобы появилась подсветка синтаксиса для Clarion? Язык очень похож на Си или С++, но есть и большие различия. Например, отсутствие открывающих и закрывающих скобок циклов, условий и т.д.; возможно написание функций с заглавной буквы или полностью заглавными буквами и еще многое.

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

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

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