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 или консоль, вводим:

1
ruby setup.rb

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

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

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

1
import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

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

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
    "anaconda_linting": true,
    "auto_formatting": true,
    "autoformat_ignore":
    [
        "E501"
    ],
    "pep8_ignore":
    [
        "E501"
    ],
    "anaconda_gutter_theme": "hard",
    "anaconda_linter_underlines": true,
    "anaconda_linter_mark_style": "none",
}

E501 – означает пропуск проверки длины строк (мне не нужно), ну и авто формат включил, пригодиться.
Anaconda

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

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

1
{ "keys": ["ctrl+shift+s"], "command": "auto_save" }

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

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

1
2
3
{
  "browsers": ["last 2 versions"]
}

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

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

1
2
3
4
5
6
7
"auto_complete_triggers":
[
{
"characters": "bs3",
"selector": "text.html"
}
],

Пример работы: пишем в 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, потому добавим в настройки клавиш:

1
2
{ "keys": ["ctrl+alt+w"], "command": "inc_dec_value", "args": { "action": "inc_all" } },
{ "keys": ["ctrl+alt+s"],"command": "inc_dec_value", "args": { "action": "dec_all" } },

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

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

1
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>

Удобно вставлять этот 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 и другие полезные настройки:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
{
"added_words":
[
"github",
"ru",
"oauth",
"ctrl",
"bs3"
],
"auto_complete_commit_on_tab": true,
"auto_complete_cycle": true,
"auto_complete_triggers":
[
{
"characters": "<",
"selector": "text.html"
},
{
"characters": "bs3",
"selector": "text.html"
},
{
"characters": "bs4",
"selector": "text.html"
},
{
"characters": ".",
"selector": "source.python"
}
],
"auto_complete_with_fields": true,
"bold_folder_labels": true,
"caret_extra_bottom": 1,
"caret_extra_top": 2,
"caret_extra_width": 1,
"caret_style": "solid",
"color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme",
"convert_tabspaces_on_save": true,
"dictionary": "Packages/Russian-English Bilingual.dic",
"draw_minimap_border": true,
"draw_white_space": "none",
"enable_in_sublime_repl": true,
"ensure_newline_at_eof_on_save": true,
"fallback_encoding": "Cyrillic (Windows 1251)",
"file_exclude_patterns":
[
"*.DS_Store",
"*.pyc",
"*.git"
],
"font_size": 12,
"highlight_line": true,
"highlight_modified_tabs": true,
"ignored_packages":
[
"Vintage"
],
"indent_guide_options":
[
"draw_normal",
"draw_active"
],
"indent_to_bracket": true,
"lesscCommand": "/usr/local/share/npm/bin/lessc",
"line_padding_bottom": 1,
"line_padding_top": 1,
"margin": 0,
"material_theme_arrow_folders": true,
"material_theme_big_fileicons": true,
"material_theme_bold_tab": true,
"material_theme_bullet_tree_indicator": true,
"material_theme_compact_panel": true,
"material_theme_compact_sidebar": true,
"material_theme_contrast_mode": true,
"material_theme_small_statusbar": true,
"material_theme_small_tab": true,
"material_theme_tabs_autowidth": true,
"reindent_on_save":
[
"json"
],
"remember_open_files": true,
"remember_open_folders": true,
"save_on_focus_lost": true,
"scroll_past_end": false,
"show_encoding": true,
"show_line_endings": true,
"spell_check": true,
"tab_size": 4,
"theme": "Material-Theme-Darker.sublime-theme",
"translate_tabs_to_spaces": true,
"trim_automatic_white_space": true,
"trim_trailing_white_space_on_save": true,
"vintage_start_in_command_mode": false,
"wide_caret": true,
"word_wrap": "true"
}

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

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

PHP Format – форматирование PHP кода по стандартам PSR. В пользовательские настройки плагина пишем:

1
2
3
4
5
6
7
{
"enable_auto_align": false,
"format_on_save": false,
"option": "value",
"psr2": true,
"version": 1
}

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) добавить:

1
2
3
{
"css_completions_scope": "source.scss - comment - variable - keyword.control - entity.other, source.sass - comment - variable - keyword.control - entity.other",
}

Compass (Compass Compass Build System) – компиляция SASS в CSS, нужен конфиг в папке проекта (config.rb).

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

1
2
gem install compass
gem update --system

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

1
2
3
4
5
6
7
8
9
http_path = "/" # определяет путь к корню
css_dir = "/" # определяет путь к сss
sass_dir = "/" # определяет путь к sass
images_dir = "img" # определяет путь к каталогу изображений
javascripts_dir = "js" # определяет путь к каталогу JavaScript
# Предпочитаемый стиль вывода:
# output_style = :expanded или :nested или :compact или :compressed
# Разрешить относительные пути.
relative_assets = true

Откройте один из ваших .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”

1
2
3
npm i -g less
npm i -g less-plugin-clean-css
npm i -g less-plugin-autoprefix

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

1
2
3
{
"filename_filter": "\\.(css|js|sass|less|scss)$", "build_on_save": 1
}

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

1
pip install Send2Trash

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

1
2
3
4
5
6
7
8
9
10
11
{
    "keys": ["ctrl+alt+t"], "command": "toggle_terminus_panel", "args": {
      "config_name": "Default",
      "cwd": "${file_path:${folder}}"
    }
  },
  {
    "keys": ["alt+`"], "command": "terminus_open", "args": {
      "config_name": "Default"
    }
  }

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.

1
npm i -g clean-css-cli uglifycss js-beautify html-minifier uglify-js minjson svgo

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

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

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

Sublime-OpenUri

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

1
2
3
4
{
    "show_open_button": "hover",
    "popup_text_html": "<span>Открыть ссылку</span>",
}

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

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

1
npm i -g csslint

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

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

1
npm i -g jshint

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
// SublimeLinter Settings - User
{
    "debug": false,
    "lint_mode": "save",
    "delay": 0.5,
    "gutter_theme": "Packages/Gutter Themes for SL/Minimal/Minimal.gutter-theme",
    "styles": [
        {
          "mark_style": "solid_underline",
          "icon": "Packages/Gutter Themes for SL/Minimal/warning.png",
          "types": ["warning"]
      },
      {
          "mark_style": "solid_underline",
          "icon": "Packages/Gutter Themes for SL/Minimal/error.png",
          "types": ["error"]
      }
  ],
    "linters": {
        "csslint": {
            "@disable": false,
            "args": [],
            "errors": "",
            "excludes": [],
            "ignore": "",
            "warnings": ""
        },
        "htmltidy": {
            "@disable": false,
            "args": [],
            "excludes": []
        },
        "jshint": {
            "@disable": false,
            "args": [],
            "excludes": []
        },
        "php": {
            "@disable": false,
            "args": [],
            "excludes": []
        },
        "phpcs": {
            "@disable": false,
            "args": [],
            "excludes": [],
            "standard": "PSR2"
        },
        "json": {
            "strict": false
        }
    },
    "no_column_highlights_line": false,
    "syntax_map": {
        "html (django)": "html",
        "html (rails)": "html",
        "html 5": "html",
        "javascript (babel)": "javascript",
        "magicpython": "python",
        "php": "php",
        "python django": "python",
        "pythonimproved": "python"
    }
}

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

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

eCSStractor

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

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

1
{"keys": ["f6"], "command": "clean_css"},

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

1
2
3
{
  "add_space_between_categories" : false,
}

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

A File Icon Sublime Text 3

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

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

1
"spell_check": true,

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
[
{ "keys": ["alt+shift+f"], "command": "reindent" },
{ "keys": ["ctrl+shift+s"], "command": "auto_save" },
{ "keys": ["ctrl+alt+w"],  "command": "inc_dec_value", "args": { "action": "inc_all" } },
{ "keys": ["ctrl+alt+s"],"command": "inc_dec_value", "args": { "action": "dec_all" } },
{ "keys": ["ctrl+alt+t"], "command": "toggle_terminus_panel", "args": {"config_name": "Default", "cwd": "${file_path:${folder}}"}},
{ "keys": ["alt+`"], "command": "terminus_open", "args": {"config_name": "Default"}},
{ "keys": ["f6"], "command": "clean_css"},
]

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

PackageSync – плагин для бэкапа и восстановления настроек и плагинов.

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

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

  • Достаньте из архива на рабочий стол список плагинов – SublimePackagesList.txt, восстановите его через PackageSync, потом так же c SublimePackagesBackup.zip
  • Packages – скопируйте в Sublime Text 3\Packages (Опции -> Просмотр плагинов…)
  • Sublime.cmd – все плагины из статьи (Python, Node, Ruby)
  • template – в ней выполнить reg – файл, для контекстного меню – создать файл (появиться PHP и html), саму папку кинуть в Sublime Text 3 (можно открыть reg файл и станет ясно.)

PackageSync Sublime Text 3

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

 

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

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

      Ответить

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

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

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