Sublime text 3 полезные плагины: 15 прекрасных плагинов для Sublime Text

Sublime text3 — плагин умной подсказки js и другие часто используемые плагины

Перепечатанный адрес: http://blog.csdn.net/u013861109/article/details/53106074

 

Среди многих инструментов Sublime Text, несомненно, является оружием, имеет красивый интерфейс, мощные функции и удивительную производительность. Следует отметить, что это не IDE, а простой инструмент для редактирования текста, но его код выделен. Грамматические подсказки, автоматическое завершение и быстрый ответ, а также поддержка различных расширенных плагинов, что делает процесс редактирования текста очень стандартизированным, быстрым и эффективным.

Скачать и установить

Перейти непосредственно на официальный сайтhttp://www.sublimetext.com/3Скачайте официальную версию, постарайтесь не скачивать онлайн китайскую версию, возникнут различные странные проблемы. При установке next, затем next, обратите внимание на то, чтобы во время установки установить контекстное меню Add to explorer, как показано на рисунке, чтобы вы могли напрямую использовать Sublime Text для открытия при щелчке правой кнопкой мыши по выбранному файлу.

Sublime является платным программным обеспечением, но загруженное с официального сайта возвышенное ПО можно использовать в обычном режиме после установки, покупать не нужно, преимущество покупки заключается в том, что вам не будет предложено совершить покупку во время использования (на самом деле частота всплывающих окон очень низкая, что не влияет на нормальное использование).

Изменить шрифт и цвет фона

 

Установить размер шрифта и сохранить

Установить цвет фона

Общие плагины

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

Установить пакет управления

Поиск Baidu Package Control, чтобы открыть официальный сайт

 

 

 

Нажмите, чтобы скачать файл

 

Открыть каталог файлов

Поместите загруженный файл в каталог установленных пакетов и перезапустите редактор. Установка прошла успешно

 

Установить плагин

При установке плагина сначала используйте Ctrl + Shift + P (Инструменты → Палитра команд . ..), чтобы открыть панель управления, введите PackageControl и нажмите Enter, чтобы отобразить следующий рисунок:

 

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

 

Emmet

Front-end разработкаТребуется, меньше писать, показать больше, использовать клавишу Tab для запуска. После установки Emmet, вы можете ввести небольшое количество кода и нажать клавишу Tab, система автоматически завершит код.

AutoFileName

Быстро перечислите имена всех файлов в папке, которую вы хотите процитировать, например, вы хотите процитировать test / img / 1.png. Просто введите / img, плагин будет автоматически запрашивать все имена файлов в / img, как показано на рисунке

BracketHighlighter

Выделите символы [], (), {}, «», «», <tag> </ tag> для удобного просмотра начального и конечного тегов. Как показано на рисунке:

ColorPicker

Палитра, когда вам нужно ввести цвет, вы можете напрямую выбрать цвет. Используйте сочетание клавиш ctrl + shift + c, чтобы открыть цветовую палитру. Следует отметить, что эта комбинация клавиш может не открывать палитру, поскольку комбинация клавиш занята, наиболее прямым решением является настройка непосредственно в Предпочтения → Связывание клавиш-Пользователь: «{» keys «: [ «ctrl + shift + c»], «command»: «color_pick»}, «

 

JsFormat

JsForma может автоматически помочь вам отформатироватьJavaScriptКод для формирования общего формата, например, для сжатия, пробелов и новых строкjsКод организован так, чтобы сделать структуру кода js понятной и легкой для просмотра. В сжатом файле JS щелкните правой кнопкой мыши, чтобы выбрать jsFormat, или используйте горячую клавишу по умолчанию (Ctrl + Alt + F.). Если горячая клавиша занята, ее можно настроить в меню «Предпочтения» → «Привязки клавиш»: «{keys»: [» ctrl + shift + alt + j «],» command «:» js_format «,» context «: [{» key «:» selector «,» operator «:» equal «,» operand «:» source. js, source .json «}]},

DocBlockr

После установки плагина вы можете быстро создавать различные форматы комментариев. Когда вам нужно сгенерировать символ комментария, введите / *, /, а затем система возврата каретки автоматически сгенерирует его для вас. Если / находится сразу за определением функции, формат комментария будет основан на функции Генерация параметров.

Sidebar Enhancements

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

Перед установкой плагина есть несколько вариантов щелчка правой кнопкой мыши по файлам:

После установки плагина опция щелчка правой кнопкой мыши по файлу значительно расширяется:

Мои две часто используемые функции — настроить файл на использование сочетания клавиш F12, открытого браузером, и переименовать F2, вам нужно добавить его в Key-Bindings-User
{ «keys»: [«f12»], «command»: «side_bar_open_in_browser»,»args»:{«paths»:[], «type»:»testing», «browser»:»»}},
{ «keys»: [«f2»], «command»: «side_bar_rename»},

Alignment

Выполнить на определенных переменныхинтеллектуальныйВыравнивание, обычно «=» выравнивание знака, комбинация клавиш по умолчанию — Ctrl + Alt + A, но этот конфликт горячих клавиш и снимок экрана QQ не может быть использован, вам нужно сбросить его, я обычно устанавливаю его на Ctr + Alt + Shift + A, вставьте следующее в Key-Bindings-User: {«keys»: [«ctrl + alt + shift + a»], «command»: «alignment»},

CSS Format

Формат CSS может форматировать любой код CSS, SASS, SCSS, LESS в расширенную, компактную, сжатую форму, выбирать код стиля, который необходимо отформатировать, щелкните правой кнопкой мыши и выберите «Формат CSS» и выберите формат, который необходимо сформировать.

Tag

Плагин Tag предоставляет различные операции над тегом Tag с функциями: закрытие тега HTML в соответствии с / автоматически, автоматическое выравнивание тега (или выбор ctrl + alt + f), удаление тега и его содержимого и вставка тега + shift +, «Создать теги», удалять атрибуты в тегах, закрывать теги, проверять теги и т. д. Некоторые функции выполняются автоматически, некоторые функции должны быть выполнены вручную, ввод функции Строка меню Правка →
Tag。

Trailing spaces

Он может обнаруживать и удалять пробелы кода одним щелчком мыши и автоматически удалять лишние пробелы при сохранении, делая ваш код более компактным и стандартизированным. Функция входа: Изменить →
Trailing Spaces→
Удалите, вы также можете самостоятельно устанавливать горячие клавиши, обычно я устанавливаю их как ctrl + shift + alt + t, вставляя следующее в Key-Bindings-User: {«keys»: [«ctrl + shift + alt + t «],» command «:» delete_trailing_spaces «},

ConvertToUTF8

С помощью этого плагина вы можете редактировать и сохранять файлы, которые в настоящее время не закодированы в Sublime Text, особенно GB2312, GBK, BIG5, EUC-KR, EUC-JP и т. Д., Используемые пользователями из Китая, Японии и Кореи. Вы можете использовать Файл →
Установите File Encoding в меню, чтобы вручную преобразовать кодировку файла. Например, вы можете открыть файл в кодировке UTF-8 и указать сохранение как GBK, и наоборот.

 

HTML-CSS-JS Prettify

Формат HTML, CSS,javascriptИ формат кода Json. Чтобы использовать плагин, вам нужно установить nodejs и в Packages-Setting →
HTML/CSS/JS Prettify→
Установите путь установки вашего узла в поле set set path. Процесс использования: Инструменты →
Палитра команд (или Ctrl + Shift + P), введите и выберите htmlprettify, чтобы завершить форматирование всего документа. Вы также можете установить сочетания клавиш: «Настройка пакетов» → «HTML / CSS / JS Prettify» → «Установить сочетания клавиш», потому что мой ctrl + shift + h уже занят, поэтому я изменил на ctrl + shift + alt + h.

Terminal

Откройте терминал файла. Терминал по умолчанию CMD. Ctrl + Shift + T открывает папку, в которой находится файл, Ctrl + Shift + Alt + T открывает корневую папку проекта, где находится файл, и вы можете самостоятельно перенастроить сочетания клавиш. Вы также можете щелкнуть правой кнопкой мыши открыть терминал здесь, чтобы открыть.

Подведем итог плагинов, представленных ранее:
Alignment
AutoFileName
BracketHighlighter
ColorPicker
CSS Format
DocBlockr
Emmet
JsFormat
Sidebar Enhancements
Tag
Trailing Spaces
ConvertToUTF8
HTML-CSS-JS Prettify
Terminal
и сочетания клавиш, сбрасываемые этими плагинами:

[html] view plain copy

1. { «keys»: [«ctrl+alt+shift+a»], «command»: «alignment» },  
2. { «keys»: [«ctrl+shift+alt+f»], «command»: «show_panel», «args»: {«panel»: «find_in_files»} },  
3. { «keys»: [«ctrl+alt+u»], «command»: «soft_undo» },  
4. { «keys»: [«ctrl+shift+alt+t»], «command»: «delete_trailing_spaces» },  
5. { «keys»: [«f12»], «command»: «side_bar_open_in_browser»,»args»:{«paths»:[], «type»:»testing», «browser»:»»}},  
6. { «keys»: [«alt+f12»], «command»: «side_bar_open_in_browser»,»args»:{«paths»:[], «type»:»production», «browser»:»»}},  
7. { «keys»: [«ctrl+t»], «command»: «side_bar_new_file2»},  
8. { «keys»: [«f2»], «command»: «side_bar_rename»},  
9. { «keys»: [«ctrl+shift+c»], «command»: «color_pick»},  
10. { «keys»: [«ctrl+shift+alt+j»], «command»: «js_format»,»context»: [{«key»: «selector», «operator»: «equal», «operand»: «source. js,source.json»}]},  

Существует множество плагинов, которые необходимо добавить в соответствии с используемой библиотекой и инфраструктурой, например, jQuery, angular, node.js, less и т. д., если Ctr + Shift + p вводит ключевые слова. Плагин, который вы хотите установить.

 

JS умные советы, супер прост в использовании

 

Поскольку существует слишком много сочетаний клавиш, вот лишь некоторые из наиболее часто используемых сочетаний клавиш:

1. Операция
Ctrl + `: открыть консоль Sublime Text (выход Esc)
Ctrl + Shift + P: открыть панель команд (выход Esc)
Ctrl + K, Ctrl + B: комбинация клавиш, отображение или скрытие боковой панели.
Alt: переместить курсор в строку меню, ↑ ↓ ← → переместить курсор

2. Изменить
Ctr + Shift + D: скопировать и вставить строку, в которой находится курсор
Alt +.: закрыть тег
Ctrl + /: закомментировать текущую строку с помощью //.
Ctrl + Shift + /: комментарий с помощью / ** /.
Ctrl + Enter: добавить новую строку ниже текущей строки и перейти к этой строке

Ctrl + Shift + Enter: добавить строку над текущей строкой и перейти к ней
Ctrl + ← / →: перемещать слово за словом,
Ctrl + Shift + ← / →: выбрать слово за словом
Ctrl + Shift + ↑ / ↓: переместить текущую строку (файл будет изменен)
Ctrl + KK: удалить от курсора до конца строки
Ctrl + K Backspace: удалить от курсора до начала строки
Ctrl + Z: отменить
Ctrl + Y: возобновить отмену
Ctrl + J: объединить строки (если выбрано несколько строк для объединения)
Ctrl + [: сделать отступ для выбранного содержимого слева
Ctrl +]: сделать отступ для выбранного содержимого справа

3. Выберите
Alt + F3: после выбора ключевых слов выберите все те же слова. Может использоваться с Ctrl + D.
Ctrl + D Ctrl + K Ctrl + U: Ctrl + D выделяет слово под курсором и выделяет все вхождения слова, снова Ctrl + D, выберет появившееся слово Следующая позиция. В процессе выбора нескольких слов Ctrl + K пропустит выбранное в данный момент слово, а в процессе выбора нескольких слов Ctrl + U вернется назад.

Ctrl + L: выделить всю строку, где находится курсор
Ctrl + X: удалить строку, в которой находится курсор
Ctrl + J: объединить выделенную область в одну строку
Ctrl + Shift + M: выберите содержимое текущей скобки, повторите выбор самой скобки

4. Найти
(если всплывет какое-либо окно, Esc выйдет из всплывающего окна)
Ctr + p: введите контейнер @display (внутри css или js)
Ctrl + F: вызвать окно поиска
Ctrl + H: вызвать окно замены для замены
Ctrl + Shift + H: после ввода содержимого замены замените текущее ключевое слово
Ctrl + Alt + Enter. После ввода содержимого замены замените все подходящие ключевые слова. (ПРИМЕЧАНИЕ. Обратите внимание, что если в это время фокус мыши находится в окне редактирования, замена не удастся, а фокус мыши будет настроен на поле замены, будут работать Ctrl + Alt + Enter)

Ctrl + Shift + F: открыть поиск и замену нескольких файлов
Alt + C: переключить режим с учетом регистра
Alt + W: переключить режим соответствия всего слова
Alt + R: включить / выключить режим обычного соответствия

5. Прыжок
Ctrl + P: перечислить текущий открытый файл (или файл в текущей папке), введите имя файла и затем нажмите Enter, чтобы перейти к файлу, введите @symbol, чтобы перейти к символу , Введите #keyword, чтобы перейти к местоположению ключевого слова, введите: n, чтобы перейти к n-й строке
Ctrl + R: перечислить символы в текущем файле (например, имя класса и имя функции, но не может войти в имя переменной), введите имя символа Enter, чтобы перейти к этому месту.

перечислит схему файла уценки
F12: быстро перейти к определению символа под курсором (Перейти к определению). Например, если текущий курсор является вызовом функции, F12 перейдет к определению функции.
Ctrl + G: введите номер строки, чтобы перейти к указанной строке
Ctrl + M: перейти к другой половине скобки.

6. Окно и вкладка
Ctrl + N: создать новую метку в текущем окне
Ctrl + Shift + N: создать новое окно (сочетание клавиш конфликтует с сочетанием клавиш метода ввода Sogou)
Ctrl + W: закрыть вкладку, если вкладки нет, затем закрыть окно
Ctrl + Shift + W: закрыть все открытые файлы
Ctrl + Shift + T: восстановить только что закрытый ярлык.

Ctrl + Tag: переместить тег.

7. Экран
F11: переключиться в обычный полноэкранный режим
Shift + F11: переключение в полноэкранный режим без помех
Alt + Shift + 2: разделение влево и вправо
Alt + Shift + 8, чтобы разделить вверх и вниз
Alt + Shift + 5, чтобы разделить экран вверх, вниз, влево и вправо (т.е. разделить на четыре экрана)
Ctrl + цифровые клавиши: переход на указанный экран
Ctrl + Shift + цифровые клавиши: переместить текущий экран на указанный экран

Sublime Text для верстальщиков

Sublime Text для верстальщиков

Полезные инструменты и настройки Sublime Text 3 для верстальщиков

Готовь Sublime к полету в космос

сделано с занудством Андреем Алексеевым

Sublime Text 3

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

В этой презентации

1. Обзор основных возможностей ST
2. Интересные плагины для верстальщиков
3. Настройки, сокращения и сниппеты
4. Дополнительные статьи и плагины

Основные возможности

Сайдбар и дробление на секции

В боковой панели хранятся открытые файлы и папки.
Каждый файл открывается в новом табе, которые можно
распределить в несколько рядов или колонок.

Миникарта кода

Показывает весь код в панельке справа. Кстати, можно вставлять ASCII графику в комментарии,
чтобы видеть эти области на миникарте.

Темы оформления

Очень, очень, очень много тем.
Выбор за вами!

Множественные курсоры

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

Поиск

Целая куча функций поиска: обычный поиск по файлу, поиск с заменой (одного или всех значений), поиск по файлам и папкам, поиск с регулярными выражениями и многое другое.

Командные панели

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

Нечёткий поиск

Вы вводите лишь комбинацию символов –
нечеткий поиск выдаcт все возможные совпадения. Супер!
P.S. Смотрите, как полезен символ @ для CSS.

Сниппеты и клавиатурные сокращения

Cниппеты, плагины и шорткаты в разы ускоряют разработку. И всё это добро можно настроить под себя.
Вот так я верстаю менюшки:

Package Control

С Package Control установка плагинов займет примерно минуту. Вызовите командную панель, выберите Install Package, в загрузившемся списке плагинов найдите нужный и… готово!

Плагины

Необходимая вещь для верстальщика. Emmet дает возможность писать HTML и CSS сокращениями, используя нечеткий поиск на полную катушку, а также добавляет полезные шорткаты.

Перемещайте, копируйте, переименовывайте файлы и папки прямо из ST. На любимые функции, как обычно, можно установить шорткат. Кроме того, есть полезности вроде Data URI.

Быстрое создание нового файла.

Удобная подсветка открывающих и закрывающих скобок.

Этот плагин умеет подсвечивать текущую вкладку и ограничивать количество открытых вкладок заданным числом. При открытии новых вкладок закрываются самые старые.

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

Ну вы сами все видите.
P.S. есть еще очень похожий Color Highlighter

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

В любом обзоре обязательно должны рассказать про live-режим – автообновление браузера без нажатия клавиш.
Это настраивается и для ST, однако я бы советовал не привязываться к редактору, а установить приложение отдельно

Любопытная вариация LiveReload, если вы пишите код на CSS: Livestyle позволяет править стили прямо в инспекторе браузера, изменения сразу записываются в CSS файл.

2 режима работы с FTP: 1) подключение к удаленному серверу и работа на нем; 2) настройка FTP-соединения для каждого проекта, позволяющая быстро и просто синхронизировать файлы.

«Причесывает» CSS, расставляя свойства в заданном порядке. Потребует небольшой настройки: установки Node.js и конфигурации плагина в зависимости от своих предпочтений.

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

Лаконичный набор сниппетов для красивых комментариев.

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

Настройки, сокращения и сниппеты

Sublime Text – это гибкость и скорость:
для всех плагинов и функций есть настройки и клавиатурные сокращения. Часто пишете один и тот же код? Создайте сниппет и вызывайте код лишь несколькими символами. Работаете над несколькими проектами? Совсем не обязательно каждый раз открывать папку проекта и целый ворох необходимых файлов – воспользуйтесь системой проектов.Нужен дополнительный функционал?Откройте Package Control, скорее всего его уже кто-то написал 🙂

Настройки

В ST настройки есть как у самого редактора, так и у всех подключаемых плагинов. Найти их можно по пути
Preferences > Settings …
или
Preferences > Package Settings > …

Обратите внимание, что все настройки разбиты на категории User и Default.

Настройки

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

Настройки

Мои любимые настройки для ST. Полный список тут

"bold_folder_labels": true, // подсвечивать надписи папок в сайдбаре
				"draw_white_space": "all", // подсвечивать пробелы и табы в коде
				"highlight_modified_tabs": true, // подсвечивать табы, в которые внесены изменения
				"save_on_focus_lost": true, // забудьте о комбинации Cmd+S/Ctrl+S.  Код сохраняется всякий раз при переключении окна или смене таба
				"show_line_endings": true, // показывать переносы строк
				"tab_size": 2, // размер таба равен двум символам
				"translate_tabs_to_spaces": true, // табы - не табы, а пробелы
				"trim_trailing_white_space_on_save": true // "подчищать" код при сохранении, обрубая лишние табы и пробелы

Клавиатурные шорткаты

Шорткаты – это одна из мощнейших функций ST – практически любое действие можно повесить на комбинацию клавиш. Рассортированы они по папкам аналогично тому, как рассортированы настройки Preferences > Key Bindings.

Клавиатурные шорткаты

Чтобы ввести сокращение, в Key Bindings – User следует добавить новую строку, например:

{ "keys": ["ctrl+shift+o"], "command": "side_bar_open_in_browser" },

command – это команда, которую ST выполняет при нажатии.
Список команд плагинов не всегда лежит в разделе Preferences.
Если возникают трудности, посмотрите репозиторий плагина на github, искомые команды прячутся в файлах с расширением .sublime-keymap или .sublime-commands.

Сниппеты

Небольшие куски кода, которые можно вставлять по определенному сочетанию клавиш. Так, в этом примере фраза nav++ по нажатию на Tab превратится в emmet-цепочку для разметки навигации.
Создать свой сниппет невероятно просто

Не надо вспоминать, как называется папка вашего проекта, и над чем вы работали в прошлый раз — это дело ST. Создавайте и переключайтесь между проектами, храните специфичные настройки в отдельном файле.

Дополнительные материалы

Статьи

Perfect Workflow in Sublime Text 2
Превосходный двухчасовой скринкаст, до сих пор не потерявший актуальность. Бесплатный после регистрации.

Sublime Text Unofficial Documentation
Тот неловкий момент, когда неофициальная документация лучше официальной.

Getting Started With Sublime Text 3: 25 Tips, Tricks, And Shortcuts
Лучшая из статей по ST, что я когда-либо видел.

Статьи

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

Sublime Text 3 для работы с фронтэндом

Лучшие плагины для Sublime Text

Комментарий к прошлой статье
Про синхронизацию ST между устройствами.

Плагины, которые стоит поглядеть

Sublime Alignment – выравнивание нескольких строчек по определенной позиции.

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

HTML-CSS-JS Prettify – форматирует ваш код.

SublimeAllAutocomplete – автокомплит работает не только в рамках одного документа, но в рамках текущих открытых файлов.

Плагины, которые стоит поглядеть

Clipboard History – поможет вспомнить, что именно вы вставляли несколько итераций назад.

BufferScroll – запоминает позицию курсора при переключении окон.

14 лучших плагинов для Sublime Text

Как разработчик, моим любимым редактором кода на сегодняшний день является Sublime Text. Это связано не только с его простотой и ценой (бесплатно), но и с количеством доступных плагинов, которые увеличивают его мощность до неба. Эти плагины настолько сильно облегчают мой кодинг, что я с трудом могу представить себя кодером без этого комплекта.

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

Связанный: Почему вы должны нанять профессионального веб-разработчика?

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

Чтобы установить Package Control, вы можете следовать простым инструкциям, представленным на их сайте. После установки вы можете нажать CMD + SHIFT + P (Mac) // CTRL + SHIFT + P (Window), а затем выбрать, хотите ли вы установить или удалить пакет, выполнив поиск по словам «Установить пакет» или «Удалить пакет». ».

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

Фрагменты

Фрагменты — отличный способ ускорить код. Вы можете создать свои собственные или загрузить плагины, которые содержат множество фрагментов, полезных для разных языков или фреймворков, над которыми вы работаете. Основное использование этого состоит в том, чтобы написать слово и нажать вкладку; затем будет заполнена полная строка кода.

Emmet

Emmet на сегодняшний день является лучшим плагином для создания сниппетов, используемым в большинстве редакторов кода, таких как sublime, coda, visual studio и других. Этот плагин позволяет быстро создавать фрагменты кода для HTML и CSS, которые строятся с использованием сокращений, развернутых в полных тегах.

 

Emmet использует особый синтаксис для преобразования небольших фрагментов кода (похожих на селекторы CSS) в полноценный HTML-код. Например, последовательность:

div#page>div.logo+ul#navigation>li*5>a

Расширение на:

< DIV ID = «Page»>

< Div Class = «Logo»> Div >

< UL ID = «Навигация»>

< UL . li >< a href=»»> a > li >

         < li >< a href=»»> a href=»»> >

         < ли >< a href=»»> a > li >

         < li >< a href=»»>< a 900 >

< LI > < A href = ”> A > LI >

UL >

DIV >

15>

DIV > 9000.

.

Что касается поклонников jQuery, этот фрагмент предоставляет полный список всех наиболее часто используемых функций jquery. Эти функции легко выполнить, просто набрав начало метода, который заполняет список возможных результатов на выбор (см. пример ниже).

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

Bootstrap 4 Snippets

Если вы предпочитаете использовать bootstrap в качестве основы CSS для создания своих сайтов, этот плагин может вам очень помочь. Фрагменты Bootstrap 4 предоставляют полный список фрагментов из сетки, кнопок, утилит и/или чего-либо в классах начальной загрузки.

Визуальные улучшения

Улучшения боковой панели

Sublime Text по умолчанию поставляется с очень ограниченной боковой панелью; переименовывать файлы даже с натяжкой. Благодаря улучшениям боковой панели вы можете делегировать большую мощность боковой панели, давая ей возможность открывать файлы в разных приложениях, дублировать их, удалять их и выполнять другие различные действия в каждом из ваших файлов. Безусловно, стоит добавить эту мощную функцию в свой комплект.

Подсветка кронштейнов

Простой, но чрезвычайно полезный. Вы замечали, когда у вас есть несколько строк кода, и вы не понимаете, какая скобка или круглая скобка заканчивается или начинается? Что ж, этот инструмент выделяет конец и начало выбранного тега. Плагин работает со скобками, круглыми скобками и тегами HTML, такими как div.

Color Highlighter

Если вы много работаете над оформлением веб-сайтов, использование цветов может со временем привести к путанице из-за шестнадцатеричных кодов или кодов RGB. Кроме того, труднее понять, является ли цвет, который вы используете, правильным. По этим причинам существует цветной маркер. Добавив это расширение в свой комплект, вы сможете увидеть цвета, подчеркнутые в каждом цветовом коде, и если вы выберете цвет, он заполнит весь код или слово этим цветом. Это работает и с переменными Sass!

Значок файла

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

Другое

Ghost Text

Лично я думаю, что это самый впечатляющий плагин. Если вы привыкли редактировать код в очень плохих редакторах или в простых коробках, это может облегчить вашу ложь. Ghost Text, как говорится на веб-сайте: «Давайте использовать текстовый редактор, чтобы писать в браузере. Все, что вы вводите в редакторе, будет мгновенно обновлено в браузере (и наоборот)».

Livereload

Динамическая перезагрузка полезна, когда вы хотите увидеть свои изменения почти мгновенно. Для этого вам понадобится как плагин Sublime, так и расширение Chrome. По сути, Livereload автоматически перезагружает браузер каждый раз, когда вы сохраняете файл и/или когда в него вносятся изменения. Единственным недостатком является то, что он работает только при работе на локальном хосте; если это случится с вами, то Livereload точно вам поможет!

Приукрасить

Prettify действительно полезен для минифицированных и неминифицированных CSS и JS. Хотя это не тот инструмент, которым я часто пользуюсь, всегда хорошо иметь его под рукой.

LiveStyle

LiveStyle — это плагин, меняющий правила игры. Мы говорили об автоматической перезагрузке вашего браузера, чтобы показать последние изменения, которые вы внесли в текст Sublime, но как насчет внесения изменений в режиме реального времени? Да, LiveStyle позволяет вам подключить текущую открытую таблицу стилей к странице, которую вы просматриваете. Изменения вносятся мгновенно с помощью инструментов веб-разработчика Google. Самое лучшее в этом то, что если вы измените CSS в инструментах веб-разработчика, он автоматически обновит открытую таблицу стилей в возвышенном! Этот мощный плагин поддерживает препроцессоры emmet и CSS.

Единственное, что вам нужно сделать, чтобы использовать LiveStyle, это установить плагин и возвышенное. Затем загрузите расширение Chrome, и вы готовы к работе! Проверьте документы для получения дополнительной информации.

Связано: Топ 5 современных инструментов разработки, которые улучшат ваш сайт Ну, вот оно у вас. Палитра цветов позволяет выбирать цветовую гамму или использовать палитру цветов, чтобы выбрать цвет из любого места на экране. Вы можете легко открыть средство выбора после установки, нажав cmd + shift + C.

TermX

Простой, но полезный, TermX позволяет открывать терминал из любого места, где вы редактируете файл. Это очень полезно для людей с сильными навыками программирования. Вы можете открыть терминал такого файла, открыв этот файл и нажав ctrl+cmd+ t . Вы можете изменить его по своему усмотрению в настройках привязки клавиш.

 

Плагины | Документация сообщества Sublime Text

См. также

Справочник по API

Дополнительная информация об API Python.

Справочник по подключаемым модулям

Дополнительная информация о подключаемых модулях.

Этот раздел предназначен для пользователей с навыками программирования.

Sublime Text можно расширить с помощью плагинов Python. Плагины создают функции повторное использование существующих команд или создание новых. Плагины — это логическая сущность, а не физическое.

Предварительные условия

Чтобы писать плагины, вы должны уметь программировать на Python (открывается в новом окне). На момент написания этой статьи Sublime Text использует Python 3.3.

Где хранить плагины

Sublime Text будет искать только плагины только в этих местах:

• Установленные пакеты (только .sublime-package файлы)
• 9029
7272727272727272727272727272323232323232н
• .

Как следствие, любой плагин, вложенный глубже в Packages , не будет загружен.

Не рекомендуется хранить плагины непосредственно в Packages . Sublime Text сортирует пакеты предопределенным образом перед их загрузкой, поэтому, если вы сохраните файлы плагинов прямо под Пакеты вы можете получить запутанные результаты.

Ваш первый плагин

Давайте напишем "Hello, World!" плагин для Sublime Text:

1. Выберите Инструменты | Разработчик | Новый плагин... в меню.
2. Сохранить в Packages/User/hello_world.py .

Вы только что написали свой первый плагин! Применим:

1. Создайте новый буфер ( Ctrl   N ).
2. Откройте консоль Python ( Ctrl   ` ).
3. Введите: view.run_command("пример") и нажмите Enter.

Вы должны увидеть текст "Hello, World!" во вновь созданном буфере.

Анализ вашего первого плагина

Плагин, созданный в предыдущем разделе, должен выглядеть примерно так:

Оба модуля sublime и sublime_plugin предоставляются возвышенный текст; они не являются частью стандартной библиотеки Python.

Как мы упоминали ранее, плагины повторно используют или создают команд . Команды важный строительный блок в Sublime Text. Это просто классы Python которые можно вызывать аналогичным образом из разных средств Sublime Text, например API плагинов, файлы меню, макросы и т. д.

Команды Sublime Text происходят от классов *Command , определенных в sublime_plugin (подробнее об этом позже).

Остальная часть кода в нашем примере связана с деталями TextCommand или с помощью API. Мы обсудим эти темы в следующих разделах.

Прежде чем двигаться дальше, мы посмотрим, как мы вызвали новую команду: сначала мы открыли консоль Python, а затем вызвали view.run_command() . Это довольно неудобный способ вызова команд, но это часто полезно, когда вы находитесь на этапе разработки плагина. За теперь имейте в виду, что ваши команды могут быть доступны через привязки клавиш и другими способами, как и другие команды.

Условные обозначения для имен команд

Возможно, вы заметили, что наша команда называется ExampleCommand , но мы вместо этого передал строку example в вызов API. это необходимо потому что Sublime Text стандартизирует имена команд, удаляя Command суффикс, разбивая подслова PhrasesLikeThis символами подчеркивания и переводя их в нижний регистр, например: фраз_like_this .

Новые команды должны иметь тот же шаблон именования.

Типы команд

Вы можете создать следующие типы команд:

• Window Commandmes ( Sublime_plugin.windowcommand )
• Текстовые команды ( sublime_plugin.textcommand ). выбрать подходящий вид команды.

  Общие признаки команд

  Все команды должны реализовать метод .run() для работы. Кроме того, они могут получить произвольное количество параметров ключевого слова.

  Примечание. Параметры команд должны быть действительными значениями JSON из-за того, как ST сериализует их внутри.

  Оконные команды

  Оконные команды работают на уровне окна. Это не значит, что вы не можете управлять видами из оконных команд, а не тем, что вам не нужны виды в чтобы команды окна были доступны. Например, встроенная команда new_file определяется как WindowCommand , поэтому он работает даже при отсутствии просмотра открыт. Требование существования представления в этом случае не имело бы смысла.

  Экземпляры команды Window имеют атрибут .window , указывающий на окно экземпляр, который их создал.

  Метод .run() оконной команды не требует позиционного параметр.

  Оконные команды могут направлять текстовые команды в активное представление своего окна.

  Текстовые команды

  Текстовые команды работают на уровне представления, поэтому для их существования требуется представление чтобы быть доступным.

  Экземпляры текстовых команд имеют .view атрибут, указывающий на экземпляр представления что создало их.

  Для метода текстовых команд .run() требуется экземпляр edit как его первый позиционный аргумент.

  Текстовые команды и

  редактирование Объект

  Объект редактирования группирует изменения в представлении так, чтобы отмена и макросы работали разумно.

  Примечание: В отличие от более старых версий, Sublime Text 3 не поддерживает программные управление объектами редактирования. API отвечает за управление их жизненным циклом. Создатели плагинов должны убедиться, что все операции по изменению происходят внутри .run метод новых текстовых команд. Для вызова существующих команд вы можете использовать view.run_command(, ) или аналогичные вызовы API.

  Реагирование на события

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

  Другой пример подключаемого модуля: подача списка завершений

  Давайте создадим подключаемый модуль, который извлекает данные из службы автозаполнения Google и затем передает его в список дополнений Sublime Text. Обратите внимание, что в качестве идей для плагинов, это очень плохо.

  Примечание

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