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

Содержание

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

WebInspector

Мощный инструмент для дебаггинга JavaScript, полноценный инспектор кода для Sublime. Фичи: установка брейкпоинтов прямо в редакторе, показ интерактивной консоли с кликабельными объектами, остановка с показом стек трейса и управление шагами дебаггера. Все это работает на ура! А еще есть

Fireplay

от Mozilla, который позволяет подключаться к Firefox Developer tools и максимально простой дебаггер

JSHint

Emmet

Один из самых популярных плагинов для редакторов. Emmet, бывший Zen Coding, является также одним из самых значительных методов повышения продуктивности веб-разработчиков. После нажатия на табуляцию Emmet преобразует простые сокращения в объемные фрагменты кода для HTML и CSS. Хочется еще поделиться плагином

Hayaku

— коллекцию удобных аббревиатур для каскадных стилей.

Видео с лучшими приемами от автора проекта:

Git

Суть этого плагина понятна из названия — возможность работать с Git прямо в вашем любимом редакторе. Данный способ работы с Git позволит вам сэкономить массу времени. Во-первых: вам не придется постоянно переключаться между окнами Sublime и терминала. Во-вторых: есть грамотный автокомплит и вместо

git add -A

, достаточно написать

add

. В-третьих: существуют такие мелочи как Quick commit, который одной командой

quick

добавляет все изменения и коммитит их.

Если от Git вам необходима возможность только забирать содержимое с удаленных репозиториев, то с этой задачей прекрасно справляется Fetch.

Существует еще Glue, который выводит внизу небольшое окошко, где можно писать на Shell. Благодаря этому из редактора теперь будет доступен не только Git…

GitGutter и Modific

Данные плагины подсвечивают строки измененные последним коммитом, другими словами diff tools в режиме реального времени.

BracketHighlighter

Мега круто! Открытие и закрытие любого фрагмента в коде должно выглядеть именно таким образом.

EditorConfig

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

Пример файла

# Корневой файл EditorConfig
root = true

# Для всех файлов используем unix-совместимые переносы строк
[*]
end_of_line = lf
insert_final_newline = true

# отступы в 4 пробела
[*.py]
indent_style = space
indent_size = 4

# Используем табы для отступов (Не указываем размер)
[*.js]
indent_style = tab

# Перезависываем настройку отступов для js файлов в папке lib
[lib/**.js]
indent_style = space
indent_size = 2

# Только для файлов package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

Sublimall

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

BufferScroll

AllAutocomplete

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

CodeIntel

, который воплощает в себе возможности IDE и помимо умного автокомплита привносит в Sublime «Code Intelligence» для ряда языков: JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP.

SublimeREPL

Вероятно, один из самых полезных плагинов для разработчиков. SublimeREPL позволяет прямо в редакторе интерпретировать целое множество языков: Clojure, CoffeeScript, F#, Groovy, Haskell, Lua, MozRepl, NodeJS, Python, R, Ruby, Scala, shell.

DocBlockr

DocBlockr станет для вас эффективным помощником при документировании кода. После ввода

/**

и нажатия на клавишу

Tab

плагин автоматически распарсит любую функцию и подготовит соответствующий шаблон.

Floobits

Потрясающее расширение для SublimeText, Vim, Emacs, IntelliJ IDEA, которое позволяет разработчикам совместно работать на кодом, причем из разных редакторов.

AutoFileName

Автозаполнение путей к подключаемым файлам — очень удобно. Без лишних слов.

ColorPicker

Обычно, когда нам требуется цветовая палитра мы привыкли использовать Photoshop или Gimp. Но полноценный color picker может быть прямо в окне вашего редактора —

Ctrl/Cmd + Shift + C

. А еще есть замечательные

GutterColor

ColorHighlighter

, которые упрощают ориентирование в цветовых кодах:

Colorcoder

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

PlainTasks

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

MarkdownEditing

Вероятно лучший плагин для работы с Markdown: подсветка, сокращения, автодополнение, цветовые схемы и др. Как альтернативно решение, можно попробовать

MarkdownPreview

Напоследок:

Sublime SFTP

CTags — поддержка CTags в Sublime.

SideBarEnhancement — множество дополнительных функций контекстного меню в сайдбаре.

ActualVim — Vim в Sublime — два любимых редактора в одном.

SublimeLinter — поддержка линта для множества языков: C/C++, Java, Python, PHP, JS, HTML, CSS и др.

CSScomb — комбинирует CSS свойства в определенном порядке.

FixMyJS, Jsfmt и JsFormat — плагины для форматирования JS/JSON-кода.

AStyleFormatter — форматирует C/C++/C#/Java код.

SVG-Snippets — большая коллекция полезных шаблонов при работы с SVG.

Inc-Dec-Value — позволяет изменять числа, даты, HEX цвета с помощью стрелок на клавиатуре, подобно инспектору в браузере.

Trailing Spaces — подсвечивает удаляет все случайные пробелы в конце строк при сохранении файла.

Alignment — функциональное выравнивание фрагментов кода от автора Package Control.

Placeholders — коллекция шаблонов с параграфами, изображениями, списками, таблицами и тд.

ApplySyntax — налету определяет синтаксис в текущем файле.

StylToken — подсветка определенных фрагментов текста, как в Notepad++.

EasyMotion — удобный переход к определенному символу с помощью клавиатуры.

ZenTabs и AdvancedNewFile — усовершенствуют стандартное отображение вкладок и создание файлов.

EncodingHelper — отображает кодировку файлов в строке статуса и оповещает о соответствующих ошибках.

Gist — синхронизирует GitHub Gist с Sublime (ST2).

Clipboard History (ST2) — плагин ведет историю буфера обмена, что позволяет вставить не только последний скопированный фрагмент кода, но и любой из предыдущих.

Темы и цветовые схемы:

* В некоторых репозиториях указано, что плагин написан под ST2, но я все проверял и многое использую сам под ST3.
* Я не стал описывать ряд плагинов, которые выполняют действия по форматированию, компиляции, оптимизации, ибо искренне убежден, что это задачи для Grunt, Gulp, Prepros или CodeKit.

Показать активные плагины в Sublime Text 2 и отключить их

Я только что установил sublime text 2 и был ошеломлен php плагинами, которые я установил ALL из них. Теперь автозаполнение-это безумие, миллион ненужных предложений, и я не помню, какой плагин что делает или какие из них я установил. Есть ли способ увидеть все активные плагины для конкретного файла, чтобы я мог отключить некоторые из них?

plugins

sublimetext2

sublimetext

Поделиться

Источник

frazras

01 февраля 2013 в 14:29

3 ответа

Я не уверен в активном плагине в файловой части, но вы можете быстро войти и удалить установленные плагины, открыв панель команд (Cmd-Shift-P на Mac) и набрав команду удалить, если у вас установлен контроль пакетов.

Вы увидите Управление пакетами: Удалить Package**

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

Вы можете сделать обратное и быстро переустановить пакеты, если чего-то не хватает.

Вы, вероятно, уже знали об этом, поэтому я не уверен, что это будет полезно или нет.

BTW: Бета-версия Sublime Text 3 только что вышла и доступна для лицензированных пользователей. Я еще мало что с ним сделал, но он загружается почти мгновенно.

Поделиться

Jordan

01 февраля 2013 в 14:52

Нет необходимости удалять пакеты , так как пакеты можно просто отключить , используя опцию Package Control: Disable Package в палитре команд .

Поделиться

Rakesh

06 июля 2017 в 11:37

Нажмите на Preferences > Package Settings > Package Control > Settings - User , чтобы просмотреть список установленных пакетов. Это будет выглядеть примерно так:

{
    "bootstrapped": true,
    "in_process_packages":
    [
    ],
    "installed_packages":
    [
        "Package Control",
        "PyCover",
        "Python 3",
        "SublimeLinter",
        "SublimeLinter-csslint",
        "SublimeLinter-html-tidy",
        "SublimeLinter-jshint",
        "SublimeLinter-json",
        "SublimeLinter-lua",
        "SublimeLinter-pyflakes",
        "SublimeLinter-pyyaml",
        "SublimeREPL"
    ]
}

Вы не можете отключить пакеты, но вы можете их удалить. Нажмите на Preferences > Package Control и введите Package Control: Remove Package , затем выберите пакет.

Поделиться

Al Sweigart

23 ноября 2016 в 21:19

Как установить плагины для редактора Sublime Text 2?
Как установить плагины в текстовый редактор Sublime? Я хотел бы установить плагин Emmet в редактор Sublime Text 2.
Переустановите все плагины sublime text 2
Я запускаю Sublime Text 2 с установленным управлением пакетами, а также несколькими синтаксическими плагинами. Но без всякой причины всякий раз, когда я открываю файл rspec, sublime text выдает мне эту ошибку: Error loading syntax file Packages/RSpec/RSpec.tmLanguage: Error parsing plist xml:…

Как стать блатным фронтендером ? — Webstacker

В чем сила, брат?

Сила в Саблайме. Особенно если ты фронтендер. В мире существует множество IDE для веб-разработки для каждой ОС, каждая из которых имеет свои сильные стороны — будь то HTML, CSS, Javascript или PHP, Python и так далее.

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

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

Пожалуй, начнем.

Package Control

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

Готово? Нажимаем Ctrl + Shift + P (Windows) или Cmd + Shift + P (Mac) и пишет название плагина. Выбираем — ставим. Синк эбаут ит.

Emmet

Sublime Text и Emmet — практически одно и то же. Расширение Emmet не служит только одной функции или цели. Это массовый инструментарий для веб-разработчиков с множеством удобных функций кодирования, дополнительных сочетаний клавиш и функций для автоматизации Вашего рабочего процесса. Это может помочь Вам управлять фрагментами кода или добавлять дополнительные функции. Например, html + tab создаст готовый каркас для html-документа, а div.wrapper + tab превратится в <div></div>

Увидев обширную документацию Emmet, Вы обязательно найдете для себя кучу полезных плюшек. Нет лучшего расширения для Sublime Text, чем Emmet. Особенно для тех, кто часто пишет веб-сайты с нуля. Детальнее — на официальном сайте.

Minify

Minify — функционал

Неожиданно, но Minify позволяет быстро минимизировать(или наоборот) для CSS, JavaScript, JSON, HTML и SVG файлов. Очень удобный плагин для минимизации веса проекта и файлов без какой-либо потери функциональности. Больше деталей — здесь.

Отдельно, для работоспособности плагина нужно установить node.js и ввести команду в консоле:

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

Color Highlighter

Color Highlighter — Функционал

Этот плагин позволит визуально выделять цвета, указанные в CSS-файлах. Вы сможете увидеть написанный цвет в режиме реального времени. Также, в Color Highlighter есть поддержка Sass, Less и Stylus, благодаря чему этот плагин становится пригодным для любых боевых условий.

Детальнее о плагине Вы можете узнать на официальной странице.

AdvancedNewFile

AdvancedNewFile — функционал

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

BracketHighlighter

Функционал BracketHighlighter

Этот плагин подсвечивает скобки в коде, такие как: [], (), {}, "", '', #! Xml <tag> </ tag>, что очень удобно когда нужно увидеть начало-конец ветки. Особенно эффективно сказывается на больших проектах, где один файл может содержать целую тучу веток с табами.

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

Autoprefixer

Автопрефиксер — Sublime Text 3

Многие из новых свойств CSS3 имеют префиксы для обработки различных механизмов рендеринга. Они в основном используются для движков WebKit, Gecko и Microsoft, которые сгруппированы в качестве «vendor prefixes». (-moz-, -webkit-,-ms-,-o-)

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

Суммируя

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

Моя задача в этой статье — дать понимание что это такое и с чем его едят. Думаю, взять и найти нужные плагины с помощью PackageControl — не проблема. Удачи в разработке!

Также подписывайтесь на наш офигенный Телеграм-канал 🤘: постим крутые статьи, авторские мнения, новости и шутки из мира Web-разработки. Понравилась статья? Расскажи об этом друзьям!

Поделиться статьей:

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

WebInspector
А еще есть Fireplay от Mozilla, который дозволяет подключаться к Firefox Developer tools и очень обычный дебаггер JSHint. Мощнейший инструмент для дебаггинга JavaScript, настоящий инспектор кода для Sublime. Все это работает на ура! Фичи: установка брейкпоинтов прямо в редакторе , показ интерактивной консоли с кликабельными объектами, остановка с показом стек трейса и управление шагами дебаггера.

Emmet
Emmet, прошлый Zen Coding, является также одним из самых значимых способов увеличения продуктивности интернет-разрабов. Опосля нажатия на табуляцию Emmet преобразует обыкновенные сокращения в большие фрагменты кода для HTML и CSS. Один из самых фаворитных плагинов для редакторов. Охото еще поделиться плагином Hayaku — коллекцию комфортных аббревиатур для каскадных стилей.

Видео с наилучшими приемами от создателя проекта:

Git
В-третьих: есть такие мелочи как Quick commit, который одной командой quick добавляет все конфигурации и коммитит их. Во-первых: для вас не придется повсевременно переключаться меж окнами Sublime и терминала. Во-вторых: есть грамотный автокомплит и заместо git add -A, довольно написать add. Сущность этого плагина понятна из наименования — возможность работать с Git прямо в вашем возлюбленном редакторе. Данный метод работы с Git дозволит для вас сэкономить массу времени.

Раз от Git для вас нужна возможность лишь забирать содержимое с удаленных репозиториев, то с данной задачей отлично справляется Fetch.

Благодаря этому из редактора сейчас будет доступен не лишь Git… Существует еще Glue, который выводит внизу маленькое окошко, где можно писать на Shell.

GitGutter и Modific
Данные плагины подсвечивают строчки модифицированные крайним коммитом, иными словами diff tools в режиме настоящего времени.

BracketHighlighter
Открытие и закрытие хоть какого фрагмента в коде обязано смотреться конкретно таковым образом. Мега круто!

EditorConfig

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

Пример файла# Корневой файл EditorConfig
root = true

# Для всех файлов используем unix-совместимые переносы строк
[*]
end_of_line = lf
insert_final_newline = true

# отступы в 4 пробела
[*.py]
indent_style = space
indent_size = 4

# Используем табы для отступов (Не указываем размер)
[*.js]
indent_style = tab

# Перезависываем настройку отступов для js файлов в папке lib
[lib/**.js]
indent_style = space
indent_size = 2

# Лишь для файлов package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

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

AllAutocomplete
AllAutocomplete осуществляет поиск по всем файлам открытым в текущем окне, что существенно упрощает процесс разработки. Также существует плагин CodeIntel, который воплощает в для себя способности IDE и кроме умного автокомплита привносит в Sublime «Code Intelligence» для ряда языков: JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP. Классическое автодополнение в Sublime Text работает лишь с текущим файлом.

SublimeREPL
SublimeREPL дозволяет прямо в редакторе интерпретировать целое множество языков: Clojure, CoffeeScript, F#, Groovy, Haskell, Lua, MozRepl, NodeJS, Python, R, Ruby, Scala, shell. Возможно, один из самых нужных плагинов для разрабов.

DocBlockr
DocBlockr станет для вас действенным ассистентом при документировании кода. Опосля ввода /** и нажатия на кнопку Tab плагин автоматом распарсит всякую функцию и подготовит соответственный шаблон.

Floobits
Классное расширение для SublimeText, Vim, Emacs, IntelliJ IDEA, которое дозволяет разрабам вместе работать на кодом, при этом из различных редакторов.

AutoFileName
Без излишних слов. Автозаполнение путей к подключаемым файлам — чрезвычайно комфортно.

ColorPicker
А еще есть примечательные GutterColor и ColorHighlighter, которые упрощают ориентирование в цветовых кодах: Традиционно, когда нам требуется цветовая гамма мы привыкли применять Photoshop либо Gimp. Но настоящий color picker может быть прямо в окне вашего редактора — Ctrl/Cmd + Shift + C.

Colorcoder
Разукрашивает все переменные, тем самым существенно упрощая ориентацию в коде. В особенности полезно для разрабов с дислексией.

PlainTasks
Грамотный интерфейс и шорткаты. Возможность создавать проекты, указывать теги, выставлять даты. Все таски хранятся в файлах, потому их чрезвычайно комфортно сопоставлять с проектами. Великолепный задачник!

MarkdownEditing
Как альтернативно решение, можно испытать MarkdownPreview. Возможно наилучший плагин для работы с Markdown: подсветка, сокращения, автодополнение, цветовые схемы и др.

Напоследок:

Sublime SFTP
CTags — поддержка CTags в Sublime.
SideBarEnhancement — множество доп функций контекстного меню в сайдбаре.
ActualVim — Vim в Sublime — два возлюбленных редактора в одном.
SublimeLinter — поддержка линта для множества языков: C/C++, Java, Python, PHP, JS, HTML, CSS и др.
CSScomb — комбинирует CSS характеристики в определенном порядке.
FixMyJS, Jsfmt и JsFormat — плагины для форматирования JS/JSON-кода.
AStyleFormatter — форматирует C/C++/C#/Java код.
SVG-Snippets — крупная коллекция нужных шаблонов при работы с SVG.
Inc-Dec-Value — дозволяет изменять числа, даты, HEX цвета с помощью стрелок на клавиатуре, подобно инспектору в браузере.
Trailing Spaces — подсвечивает удаляет все случайные пробелы в конце строк при сохранении файла.
Alignment — функциональное выравнивание фрагментов кода от создателя Package Control.
Placeholders — коллекция шаблонов с параграфами, изображениями, перечнями, таблицами и тд.
ApplySyntax — налету описывает синтаксис в текущем файле.
StylToken — подсветка определенных фрагментов текста, как в Notepad++.
EasyMotion — удачный переход к определенному символу с помощью клавиатуры.
ZenTabs и AdvancedNewFile — усовершенствуют обычное отображение вкладок и создание файлов.
EncodingHelper — показывает шифровку файлов в строке статуса и оповещает о соответственных ошибках.
Gist — синхронизирует GitHub Gist с Sublime (ST2).
Clipboard History (ST2) — плагин ведет историю буфера обмена, что дозволяет вставить не лишь крайний скопированный фрагмент кода, но и хоть какой из прошлых.
Темы и цветовые схемы:

Soda
Spacegray
Flatland
Tomorrow
Base 16
Solarized
Predawn
itg.flat
Для всех остальных предпочтений есть Color Schemes и Сolorsublime.

* В неких репозиториях указано, что плагин написан под ST2, но я все инспектировал и почти все использую сам под ST3.
Да

Нет

Проголосовало 1786 человек. Приглянулась ли Для вас выборка? Войдите, пожалуйста. Воздержался 171 человек. * Я не стал обрисовывать ряд плагинов, которые выполняют деяния по форматированию, компиляции, оптимизации, ибо искренне убежден, что это задачки для Grunt, Gulp, Prepros либо CodeKit. Лишь зарегистрированные юзеры могут участвовать в опросе. habrahabr.ru

Sublime Text 3. Руководство по созданию плагина для начинающих

Команда разработки Sublime Text 3 позаботилась о том, чтобы писать плагины под ST было просто. Когда я писал плагин впервые, я даже не знал синтаксис Python. В общем, поехали!

Мы напишем плагин UnicodeCharacterInsert, который по нажатию горячей клавиши откроет всплывающее окно с таблицей Unicode символов. При выборе символа он будет вставлен в текущую позицию курсора. Таблица символов будет находится во внешнем HTML файле.

Я работаю в OS Ubuntu Linux, учитывайте, что на других OS некоторые моменты могут отличаться.

Внимание!

Пользователь github указал на ошибку в консоле при открытии контекстного меню:

warning: mnemonic f not found in menu caption Unicode Characters

Цитирую:

В отличие от Menu Bar в контекстное меню Sublime Text не требуется добавлять mnemonics.

Документация

Сразу приведу ссылки на документацию по модулям и API для Sublime Text, которая вам пригодится при создании собственного плагина.

Events & Idle Watcher: http://www.sublimetext.com/docs/plugin-examples
API Reference: http://www.sublimetext.com/docs/3/api_reference.html
Commands: http://www.sublimetext.com/docs/3/commands.html
Commands: http://sublimetext.info/docs/en/core/commands.html
EventListener: https://www.sublimetext.com/docs/3/api_reference.html#sublime_plugin.EventListener

Костяк плагина

Открываем редактор Sublime Text и создаем костяк нового плагина: Tools » New Plugin.. Сохраняем сгенерированный файл в подкаталоге плагинов ~/.config/sublime-text-3/Packages/UnicodeCharacterInsert с именем UnicodeCharacterInsert.py.

* Путь к плагинам в Windows: C:\Documents and Settings\username\Application Data\Sublime Text\Packages.

Переименуйте название класса команды на UnicodeCharacterInsertCommand:

import sublime, sublime_plugin

class UnicodeCharacterInsertCommand(sublime_plugin.TextCommand):
    def run(self, edit):
        self.view.insert(edit, 0, "Hello, World!")

Примечания

Окончание Command указывает на то, что это команда.
Метод run вызывается по умолчанию при запуске плагина.
Аргумент sublime_plugin.TextCommand указывает на тип плагина. Подробнее о типах плагинов Sublime Text.

Для запуска плагина, выполните в консоли Sublime Text следующий код:

view.run_command('unicode_character_insert')

Чтобы вызвать панель консоли нажмите: Ctrl+~.

Этот плагин просто вставит текст «Hello, World!» с начала текущего открытого документа.

Вставка текста

Данный код будет вставлять текст в начало файла, что не очень полезно для нас. Чтобы вставить текст на место курсора, вы можете определить его позицию и задать это значение вместо 0:

pos = self.view.sel()[0].begin()
self.view.insert(edit, pos, "Unicode Character")

Чтобы вставить текст после курсора вы можете использовать команду view.run_command("insert"):

self.view.run_command("insert", {"characters": "Unicode Character"})

Горячие клавиши

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

В каталоге плагина создайте файл Default.sublime-keymap со следующим содержимым:

[
    { "keys": [ "ctrl+shift+u", "ctrl+shift+i" ], "command": "unicode_character_insert" }
]

Теперь команда unicode_character_insert из вашего плагина будет вызываться при нажатии Ctrl+Shift+U+I, проверьте это.

Popup окно

Чтобы показать всплывающее окно с некоторым HTML контентом, в нашем случае это будет набор некоторых Unicode символов, используйте метод view.show_popup(content):

content = '<b>bold</b> text and <a href="link value">link</a>'
self.view.show_popup(content, sublime.HTML, location=-1, on_navigate=print)

Параметры метода show_popup:

flags        sublime.HTML, sublime.COOPERATE_WITH_AUTO_COMPLETE
location     -1
max_width    максимальная ширина popup окна
max_height   максимальная высота popup окна
on_navigate  метод, который будет вызван при нажатии на ссылку
on_hide      метод, который будет вызван при сокрытии окна

Код класса UnicodeCharacterInsertCommand (блок import я буду опускать для экономии места):

class UnicodeCharacterInsertCommand(sublime_plugin.TextCommand):
    def run(self, edit):
        content = '<b>bold</b> text and <a href="link value">link</a>'
        self.view.show_popup(content, flags=sublime.HTML, location=-1, max_width=400, on_navigate=print)

Всплывающее окно c HTML разметкой

При нажатии на ссылку, в консоль будет выводится значение этой ссылки, текст link value.

Контент popup-окна в HTML файле

Теперь вынесем HTML разметку всплывающего окна во внешний файл unicode-characters.html, который сохраним в каталоге нашего плагина.

<style>
    html { background-color: #272822; margin: 0px; }
    body { margin: 10px; padding: 0; }
    a { text-decoration: none; margin: 0px; font-size: 24px; font-family: monospace; color: #EEF8F2; height: 30px; }
</style>

<div>
    <a href="«">«</a>
    <a href="»">»</a>
    <a href="‹">‹</a>
    <a href="›">›</a>
    <a href="§">§</a>
    <a href="¶">¶</a>
    <a href="©">©</a>
    <a href="®">®</a>
    <a href="™">™</a>
    <a href="؟">؟</a>
</div>

Внимание!

Popup-окна в Sublime Text 3 поддерживает лишь небольшой набор HTML тегов, атрибутов и CSS правил. При этом заявленная поддержка правила text-decoration: none у меня не работает.

Получить контент из внешнего файла можно так:

tpl_path = os.path.dirname(os.path.realpath(__file__)) + '/unicode-characters.html'
content = open(tpl_path, 'r').read()

При публикации плагина в репозитории packagecontrol.io мне подсказали, что внешние ресурсы необходимо подгружать методом sublime.load_resource. Этому методу нужно передавать путь к внешнему файлу относительно каталога ~/.config/sublime-text-3:

Packages/UnicodeCharacterInsert/unicode-characters.html

Финальная реализация

Реализуем методы get_characters_html для получения разметки всплывающего окна из файла unicode-characters.html и метод on_choice_symbol, который будет вставлять в документ выбранный Unicode символ и закрывать popup:

class UnicodeCharacterInsertCommand(sublime_plugin.TextCommand):
    def run(self, edit):
        content = self.get_popup_content
        self.view.show_popup(content, flags=sublime.HTML, location=-1, max_width=400, on_navigate=self.on_choice_symbol)

    def get_characters_html(self):
        resources = sublime.find_resources('unicode-characters.html')
        content = sublime.load_resource(resources[0])
        return content

    def on_choice_symbol(self, symbol):
        self.view.run_command("insert", {"characters": symbol})
        self.view.hide_popup()

В результате у нас получилось вот такое popup-окно с таблицей Unicode символов:

Вид панели с Unicode символами

Добавление команды Command Palette

Создайте файл Default.sublime-commands в каталоге плагина:

[
    { "caption": "Unicode Character Insert: Show Panel", "command": "unicode_character_insert" }
]

Контекстное меню

Для добавление пунктов в контекстное меню создайте файл Context.sublime-menu в каталоге плагина:

[
    {
        "caption": "Unicode Characters",
        "mnemonic": "f",
        "id": "unicode_character_insert",
        "children":
        [
            {
                "command": "unicode_character_insert",
                "caption": "Show Characters Table"
            }
        ]
    },
	{
        "caption": "-",
        "id": "separator"
    }
]

Чтобы добавить пункты в основное меню создайте файл Main.sublime-menu:

[
    {
        "mnemonic": "n",
        "caption": "Preferences",
        "id": "preferences",
        "children": [
            {
                "mnemonic": "P",
                "caption": "Package Settings",
                "id": "package-settings",
                "children": [
                    {
                        "caption": "Unicode Character Insert",
                        "children": [
                            {
                                "caption": "Key Bindings – Default",
                                "command": "open_file",
                                "args": {
                                    "file": "${packages}/UnicodeCharacterInsert/Default.sublime-keymap"
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

Внимание!

Плагин Unicode Character Insert конфликтует с Colortip (https://github.com/jbrooksuk/Colortip). Просто имейте в виду..

#sublime text 3, #ST3, #st3 create plugin manual

Настройка Sublime Text для Unity

Эта заметка больше для разработчиков использующих OS X (Mac OS уже). Потому как, разница между Visual Studio и MonoDevelop, просто разительна, как и скорость работы.

Но есть отличное решение — Sublime Text (ST). Установив несколько плагинов, и без того быстрый и многофункциональный ST, прекрасно подойдет для разработки на C# в Unity. После настройки, вы получите:

Автодополнение кода — autocompletion
Переход к функции — go to definition
Подсветка ошибок и синтаксиса
Сворачивание фрагментов кода — code folding
XML документирование

Установка Mono

Сначала нужно поставить Mono — open-source реализация .NET фреймворка, он нужен для компиляции и запуска C# скриптов на маке. Его можно установить, например, с помощью Brew:

brew install mono

Установка Package Control для Sublime

Если в вашем ST еще не установлен пакетный менеджер, то сделать это очень просто: нужно открыть консоль внутри ST, вставить кусок кода и нажать Enter.

Установка Omnisharp

Основной плагин который позволит ST работать с C#. Для установки: открывает пакетный менеджер (cmd+shift+p → Install Package), ищем Omnisharp и устанавливаем.

Настройка проекта

Теперь надо создать Sublime Project и связать его с Unity проектом. Для этого: открываем в ST корневую папку с проектом и идем в меню Project → Save Project As…. Сохраняем файл проекта рядом с *.sln файлом для удобства.

Открываем только что созданный файл MyProject.sublime-project в текстовом редакторе, можно в том же ST и редактируем его:

{
    "folders":
    [
        {
            "path": ".",
            "file_exclude_patterns": ["*.meta"],
        },
    ],
    "solution_file": "./MyProject.sln"
}

Тут немного объясню:

path — путь до папки со скриптами, в данном случае корневая папка, но вы можете написать например Scripts, или ту где у вас лежат скрипты
file_exclude_patterns — файлы с какими расширениями не показывать в проекте
solution_file — самое главное, тут должно быть название вашего SLN файла проекта

Устанавливаем плагины

Для документирования устанавливаем плагин — XmlDocs, для сворачивания кода — SyntaxFold. Устанавливаем также, через пакетный менеджер. Чтобы задокументировать код: вводим три слеша и жмем табуляцию — (/// + tab). А для настройки сворачивания кода, после установки плагина, нажмите shit+f5 и выберите C#.

Последние штрихи

Чтобы автодополнение кода работало не только по ctrl+space, а каждый раз когда вы ставите точку, в конфиг надо добавить правки. Убедитесь, что у вас открыт C# файл, и выбран синтаксис C# (в правом нижнем углу), далее идем в меню: Sublime Text → Preferences → Settings — More → Syntax Specific — User и вставляем этот код:

{
    "auto_complete": true,
    "auto_complete_selector": "source - comment",
    "auto_complete_triggers": [ {"selector": "source.cs", "characters": ".<"} ],
 }

Если вдруг автодополнение кода не заработало, перезагрузить ваш SLN файл: жмем cmd+shift+p, и выбираем OmniSharpSublime: Reload Solution.

Еще момент: это настройка ST для редактирования уже имеющего проекта. И мы не делаем его редактором по-умолчанию. Т. е. если вы откроете файл двойным кликом из Unity, то Omnisharp сервер не запустится. Для «корректного» открытия проекта, нужно в ST выбрать меню: Project → Open Project… и выбрать MyProject.sublime-project файл.

Готово

Теперь можно быстро и комфортно писать C# код для Unity на маке. Конечно, можно поставить еще плагинов, тут уже на ваше усмотрение. Например, есть плагин со сниппетами для C#, ищется в пакетном менеджере по словам C# Snippets.

Только для любителей Sublime Text 🙂 Удачи!

Настройка Sublime Text для Python — TechCave

Программисты любят спорить о том, у кого «лучшая» среда разработки — какие инструменты лучше? Должен ли я использовать текстовый редактор или полноценную среду IDE? Какие плагины и пакеты следует использовать? Это все правильные вопросы, но суть в том, что: после того, как вы выбрали предпочтительный текстовый редактор/IDE, вы должны потратить значительное количество времени на его настройку и понять, как извлечь максимальную пользу из этого, так как это сэкономит вам время в будущем.

Мой выбор текстового редактора — Sublime Text 3. В этой статье я дам вам пятиэтапное руководство по настройке Sublime Text 3 для разработки с помощью Python.

1. Установка

Вы можете скачать и установить Sublime Text 3 здесь.

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

Откройте консоль Sublime с помощью CTRL + `. Затем скопируйте и вставьте код отсюда в консоль и нажмите enter. Установка пакета займет несколько секунд. После этого вы можете открыть командную панель с помощью CTRL + SHIFT + P и ввести имя пакета. Список параметров должен выглядеть следующим образом:

Если вы видите параметры управления пакетами, то вы знаете, что все правильно установили!

2. Рекомендуемые Sublime Text 3 плагины

Одна из лучших вещей в Sublime Text заключается в том, что разработчики могут использовать сторонние плагины для улучшения своей среды разработки. Нажмите «CTRL + SHIFT + P» и выберите «Package Control: Install Package». Затем вы cможете найти плагины, которые я рекомендую вам использовать для разработки в Python:

Anaconda

Anaconda — чрезвычайно мощный пакет Python для Sublime. Он предлагает:

Автодополнение кода Python
Python linting (подчеркивает как синтаксические ошибки, так и нарушения PEP8)
Документация Python
McCabe — проверка сложности
и много чего еще

Djaneiro

Djaneiro предлагает подсветку синтаксиса для HTML-шаблонов Django и автоматическое заполнение табуляцией для синтаксиса языка Django, например {% block%} {% endblock%}.

После того, как вы установили Djaneiro, откройте HTML-файл, а в правом нижнем углу выберите язык, который используется в данный момент, затем выберите Djaneiro -> HTML (Django), чтобы обеспечить выделение синтаксиса Jango Template:

Автодополнение означает, что вам не нужно записывать фрагменты кода снова и снова. Например:

var + TAB генерирует {{}}.
block + TAB генерирует {% block%} {% endblock%}
url + TAB генерирует {% url%}
static + TAB генерирует {% static%}

Полный список автодополнений в Djaneiro доступен здесь.

SideBar Enhancement

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

Requirements Txt

Это простой плагин, который предлагает подсветку синтаксиса для файлов requirements.txt. Используй это!!!

All AutoComplete

All AutoComplete расширяет автодополнение по умолчанию.

GitGutter

GitGutter помещает поле в Sublime Text, которое указывает, была ли строка добавлена, удалена или отредактирована. Это полезно для отслеживания внесенных изменений в предыдущие коммиты.

Другие (JavaScript/CSS) пакеты

Есть куча пакетов JavaScript/CSS, которые я также использую для моей разработки в Python Sublime Text 3. Я не буду подробно останавливаться на них, но вы все равно должны их посмотреть:

AngularJS — предлагает подсветку синтаксиса AngularJS и автодополнение.
jQuery — предлагает подсветку синтаксиса jQuery.
Trimmer — пакет для удаления конечных пробелов
CSS3 — подсветка синтаксиса CSS3 и автодополнение
Sass — подсветка синтаксиса Sass и автодополнение
Color Highlighter — показывает шестнадцатеричные, RGB и буквенные обозначения цвета для соответствующего цвета. Например, синий цвет в таблице стилей CSS будет выделен синим цветом, так что вы получите визуальное представление о цвете.

3. Макет

Большинство вариантов компоновки доступны в меню view.

В Views -> Columns вы можете переключить представление, чтобы отобразить 1, 2, 3 или 4 столбца, 1 или 2 строки или сетку 2 * 2. Мое предпочтение состоит в том, чтобы использовать раскладку из двух столбцов.

Другие настройки макета, которые вы, возможно, захотите рассмотреть:

используйте CTRL + KB для переключения боковой панели (я предпочитаю держать ее открытой всегда)
нажмите F11 для переключения полноэкранного режима
перейдите в меню View -> Ruler, чтобы выбрать отображаемый правый край. Я кодирую в соответствии со стандартами PEP8, поэтому установил правую границу в 80 символов.
перейдите в View -> Hide Minimap, чтобы скрыть мини-карту! Я нахожу ее раздражающей.

4. Горячие клавиши

Очень полезно потратить немного времени на изучение быстрых клавиш Sublime Text. Комбинации, которые я использую наиболее часто, перечислены ниже:

CTRL + K: удаляет текущую строку.
CTRL + X: разрезает текущую строку.
CTRL + SHIFT + UP перемещает выделенный текст вверх.
CTRL + SHIFT + DOWN перемещает выделенный текст вниз.
CTRL + W: закрывает текущую вкладку.
CTRL + KK: удаляет все от курсора до конца строки.
CTRL + F: найти.
CTRL + H: найти и заменить.
CTRL + KU: преобразование выбранного текста в верхний регистр.
CTRL + KL: преобразование выбранного текста в нижний регистр.
CTRL + KB: переключить боковую панель.
CTRL + [: отменить текущую строку.
CTRL +]: отступ текущей строки.
CTRL + M: перейти к закрывающей скобке или нажмите еще раз, чтобы перейти к открывающей скобке.
CTRL + /: комментарий/раскомментирование текущей строки или выбора.

HTML-горячие клавиши:

ALT +.: Завершает текущий тег HTML.
ALT + SHIFT + W: обернуть тег (по умолчанию — <p>).

Некоторые специфичные горячие клавиши:

ALT + SHIFT + [NUMBER]: разбивает представление на столбцы [NUMBER], где [NUMBER] — 1-4.
ALT + SHIFT + 8: разбивает представление на сетку 2×2.
CTRL + 0: фокусируется на боковой панели.
CTRL + 1-4: фокусируется на столбце 1-4.
CTRL + SHIFT + 1-4: перемещает файл в столбец 1-4.

Полный список сочетаний клавиш Sublime Text 3 доступен здесь.

5. Консоль

Когда я впервые начал программировать на Python, я использовал Enthought Canopy. По умолчанию это отличная встроенная консоль IPython. Настройка консоли ST3 немного сложнее, но это того стоит.

Следуя этому видео на YouTube, откройте командную панель, используя CTRL + SHIFT + P и выберите install package. Установите пакет SublimeREPL. Затем перейдите в Preferences -> Browse Packages -> SublimeREPL -> Config -> Python. Откройте файл Main.sublime-menu. Найдите «id»: «repl_python_run» с помощью CTRL + F и добавьте параметр «-i» в раздел «cmd» под «args».

Затем перейдите в Tools -> Build System -> New Build System и введите код из этого ответа на StackOverflow:

{
    "target": "run_existing_window_command", 
    "id": "repl_python_run",
    "file": "config/Python/Main.sublime-menu"
}

Сохраните файл как Python-REPL.sublime-build. Затем создайте простой .py-файл, выберите свою систему сборки с помощью Tools -> Build System -> Python-REPL и используйте CTRL + B для запуска вашей программы. Теперь переменные из вашей программы будут доступны в появившейся консоли.

Вот и все.

25 лучших плагинов Sublime Text для Front End разработчиков — Front End Development

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

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

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

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

Чтобы упростить задачу, я разбил плагины на следующие категории:

Если вы хотите убедиться, что то, что вы создаете, безопасно, обязательно ознакомьтесь с нашей статьей о безопасности веб-сайтов.

Установка

1. Пакетный контроль

Package Control — первый и, вероятно, самый важный плагин Sublime Text. Это позволяет легко устанавливать, загружать и обновлять пакеты или плагины в Sublime Text. Термины пакет и плагин часто используются как синонимы.

Чтобы установить Package Control, следуйте инструкциям на веб-сайте Package Control. Оттуда вы можете просто ввести ctrl + shift + p в Windows или cmd + shift + p на Mac, чтобы открыть палитру команд.

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

После открытия палитры команд вы можете ввести Install Package , чтобы установить надстройку с веб-сайта Package Control. Вы также можете ввести Добавить репозиторий , что позволяет вам добавлять плагины, которые не размещены на веб-сайте управления пакетами, просто используя URL-адрес их репозитория (убедитесь, что в конце не указан .git). И, наконец, Remove Package позволит вам удалить плагин из вашей системы, удалив его, а также любые ресурсы из каталога пакетов Sublime.

Найдите свой новый любимый редактор Markdown в нашем обзоре.

Фрагменты и стиль кода

Snippets — отличная встроенная функция Sublime Text. Вы можете создать свой собственный, в дополнение к предустановленным, или использовать плагин, у которого есть куча для вас, например Emmet. Принцип работы фрагментов прост — вы просто начинаете вводить ключевое слово, которое активирует фрагмент, и нажимаете вкладку, чтобы развернуть текст.

2. Эммет

Расширяем разметку с помощью Emmet.

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

Например, чтобы построить навигацию, вам нужно всего лишь ввести следующий код:

, который расширится до:

Просмотр плагина Emmet

3. Выравнивание

Выравнивание определений переменных с помощью Alignment. Плагин

Alignment помогает легко выровнять множественные выделения или многострочные выделения. Это означает, что вы можете выровнять несколько выделений или строк с помощью разделителя, например = . Просто введите ctrl + alt + a в Windows или cmd + ctrl + a на Mac, чтобы выровнять ваш выбор.Чтобы согласовать с : , следуйте этому руководству по настройке пользовательских разделителей.

Плагин View Alignment

Интеграция с Git

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

4. SublimeGit

SublimeGit переносит Git в Sublime, поэтому вам не нужно переключаться между командной строкой и текстовым редактором.Раньше вам приходилось платить за этот плагин (вот как он классный), но в прошлом году он был с открытым исходным кодом. У него огромный список функций, которые вы можете найти в документации SublimeGit. Чтобы быстро приступить к работе, установите плагин и используйте палитру команд для запуска команд Git.

Просмотр подключаемого модуля SublimeGit

5. GitGutter

Измененная линия, удаленные границы области и вставленные линейные индикаторы в поле Sublime Text.

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

Ознакомьтесь с нашим списком из 21 лучших пакетов Atom для интерфейсных разработчиков.

Просмотр подключаемого модуля GitGutter

6. GitHubinator

Открытие Git обвиняет Github в выбранных строках.

GitHubinator — это плагин, который показывает выделенный текст в удаленном репозитории GitHub или Bitbucket.Вы просто выделяете текст, который хотите найти, щелкаете правой кнопкой мыши, чтобы открыть контекстное меню, и запускаете соответствующую веб-страницу Github или Bitbucket в браузере по умолчанию. Этот плагин великолепен, если вам нужно выяснить, кто работал с файлом ранее, или проверить, виноват ли Git.

Просмотр подключаемого модуля GitHubinator

7. GitOpenChangedFiles

GitOpenChangedFiles не скромничает в том, что делает; его название говорит само за себя. Просто установите и запустите cmd + option + o на Mac или ctrl + shift + o в Windows, и наблюдайте, как этот плагин открывает для вас соответствующие файлы в Sublime Text со всеми файлами, которые вы изменили в своем ветвь.

Просмотр подключаемого модуля GitOpenChangedFiles

Вам также может понравиться: Основной список ресурсов для разработки тем Shopify.

Линтеры и подсветка синтаксиса

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

8. SublimeLinter

SublimeLinter — самый популярный линтер, доступный на Sublime, так как в настоящее время он входит в топ-25 загрузок в Package Manager.После установки вы также захотите установить плагины для различных языков, на которых вы можете писать код.

Для этого просто откройте Package Control, чтобы установить плагины с таким же именем. Просто введите SublimeLinter- , например SublimeLinter-jshint . Вы должны установить плагины линтера с SublimeLinter — версия для Sublime Text 3 не поставляется с предустановленной версией.

Просмотр плагина SublimeLinter

9. ChangeQuotes

Замена двойных кавычек на одинарные с помощью палитры команд.

ChangeQuotes «преобразует одинарные и двойные кавычки и повторно экранирует кавычки внутри строки», согласно их документам. После установки, когда вы хотите изменить кавычки, убедитесь, что ваш курсор находится внутри цитируемого текста. Откройте палитру команд, чтобы запустить ChangeQuotes — нет необходимости выделять текст для изменения кавычек.

Посмотреть плагин ChangeQuotes

Существует множество плагинов для подсветки синтаксиса. Это два основных плагина, которые мы используем в Shopify, которые выходят за рамки существующей подсветки синтаксиса, которая поставляется с Sublime Text.

10. SASS

Плагин Sass добавляет подсветку синтаксиса, а также завершение кода табуляции / кода для файлов Sass и SCSS.

Просмотр плагина Sass

11. Вавилон

Подсветка синтаксиса любезно предоставлена Babel.

Babel добавляет определения синтаксиса для ES6 JavaScript с расширениями React JSX.

Просмотр плагина Babel

12. Жидкий синтаксис Siteleaf

Liquid Syntax

Siteleaf добавляет жидкую подсветку синтаксиса для Liquid, а также некоторые удобные фрагменты.

Просмотреть жидкий синтаксис Siteleaf

Улучшения редактора

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

Слева: до улучшений боковой панели. Справа: после улучшений боковой панели.

SideBarEnhancements обеспечивает усовершенствования операций на боковой панели файлов и папок для Sublime Text. В частности, он устанавливает параметры удаления как «Переместить в корзину», включает «Открыть с помощью…», дает вам возможность перемещать файлы и многое другое.

Плагин View SideBar Enhancements

14.Maybs бросить

Maybs Quit включает быструю панель для подтверждения выхода из Sublime Text. И cmd / ctrl + w , и cmd / ctrl + q расположены слишком близко друг к другу на клавиатуре и могут привести к ошибкам. Избегайте непреднамеренного выхода из Sublime Text, когда вы только пытаетесь закрыть файл, с помощью Maybs Quit!

Просмотр плагина Maybs Quit

15. AutoFileName

AutoFileName следует его имени: он автоматически дополняет имена файлов.Он запускает раскрывающийся список с именами файлов относительно вашего существующего файла и последующим путем по мере ввода.

Просмотр подключаемого модуля AutoFileName

Вам также может понравиться: Как добавить анимацию текста CSS в пользовательские темы.

16. Просмотр в браузере

Просмотр в браузере позволяет запускать проекты в браузере по умолчанию с помощью простого ярлыка ctrl + alt + v . Он также позволяет использовать ярлыки для различных других браузеров, установленных на вашем компьютере, таких как Chrome, Firefox, Internet Explorer и других.

Плагин Checkout View In Browser

17. GhostText

Связывание CodePen с Sublime Text с помощью плагина GhostText. 👻

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

Просмотр подключаемого модуля GhostText

18. Кронштейн осветителя

Выделение скобок в Sublime Text 3.

BracketHighlighter делает именно то, что говорит: выделяет скобки в вашем коде. Он соответствует множеству скобок, например [] , () , {} , ”” , '' , #! Xml , а также пользовательские скобки, если вы их добавите.

Плагин View BracketHighlighter

19.Цвет желоба

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

20. ColorPicker

ColorPicker включает диалоговое окно выбора цвета и позволяет пользователям вставлять или изменять выбранный цвет.Чтобы открыть палитру цветов, просто введите cmd + shift + c на Mac или ctrl + shift + c в Windows или Linux. По умолчанию вставлен шестнадцатеричный код в верхнем регистре, но вы можете изменить его для использования строчных букв, перейдя в настройки, а затем в настройки пакета.

Просмотр плагина ColorPicker

21. Значок файла

Значок файла отлично подходит для быстрого сканирования файлов, имеющихся в вашем проекте. Он просто добавляет красивые и настраиваемые значки к поддерживаемым файлам на боковой панели вашего проекта.Он поддерживается Material и Boxy Themes для создания настраиваемых тематических значков.

Плагин View A File Icon

Темы и развлечения

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

Ресурсы для развития навыков

Получите бесплатную копию CSV-файла технологического продукта, отправленную прямо на ваш почтовый ящик.

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

Наши виртуальные винтики крутятся.

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

22. Цвет Sublime

Переключение различных цветовых схем с помощью Color Sublime.

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

Плагин View Color Sublime

23. DA UI

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

Просмотр плагина DA UI

24. Тема — Spacegray

Тема

— Spacegray — это набор настраиваемых тем пользовательского интерфейса для Sublime Text 2 и 3, которые очень минималистичны и чисты. Spacegray также имеет цветовую схему Base16.

25. Emoji

Потому что … почему бы и нет. Плагин Emoji позволяет вставлять смайлики через палитру команд. Удивительный!

Посмотреть плагин Emoji

Вам также может понравиться: Как создать лучшие страницы 404 для ваших клиентов.

Плагины для всех! 🎉

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

Развивайте свой бизнес с помощью партнерской программы Shopify

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

Зарегистрироваться

Страница не найдена — Shopify

404: Страница не найдена — Shopify

Перейти к содержанию

Начать
Начать свой бизнес
Брендинг
Выглядите профессионально и помогите клиентам соединиться с вашим бизнесом
Присутствие в Интернете
Найдите домен, изучите стоковые изображения и продвигайте свой бренд
Настройка магазина
Используйте мощные функции Shopify для начала продаж
Продать
Продать повсюду
Интернет-магазин
Продать через Интернет через веб-сайт электронной коммерции
Пункт продажи
Продать в розничных точках, всплывающих окнах и за их пределами
Кнопка покупки
Преобразование существующий веб-сайт или блог в интернет-магазине
Оформление заказа
Обеспечение быстрой и удобной оплаты
Каналы продаж
Охват миллионов покупателей и увеличение продаж
Индивидуальные инструменты витрины
Выделяйтесь с индивидуальной торговлей

Открыть главную навигацию

Начать
Начать свой бизнес
Брендинг
Выглядите профессионально и помогите клиентам соединиться с вашим бизнесом
Присутствие в Интернете
Найдите домен, изучите стоковые изображения и продвигайте свой бренд
Настройка магазина
Используйте мощные функции Shopify для начала продаж
Продать
Продать повсюду
Интернет-магазин
Продать через Интернет через веб-сайт электронной коммерции
Пункт продажи
Продать в розничных точках, всплывающих окнах и за их пределами
Кнопка покупки
Преобразование с существующего веб-сайта или блога в интернет-магазин
Касса
Обеспечьте быстрое и удобное оформление заказа
Каналы продаж
Охватите миллионы покупателей и увеличьте продажи
Индивидуальные инструменты витрины
Выделитесь с индивидуальной торговлей
Рынок
Управление

Открывается в новом окне Открывает внешний сайт Открывает внешний сайт в новом окне

Проверьте веб-адрес и попробуйте еще раз или вернитесь на домашнюю страницу Shopify.

Дополнительные ресурсы

Страница не найдена — Shopify

404: Страница не найдена — Shopify

Перейти к содержанию

Начать
Начать свой бизнес
Брендинг
Выглядите профессионально и помогите клиентам соединиться с вашим бизнесом
Присутствие в Интернете
Найдите домен, изучите стоковые изображения и продвигайте свой бренд
Настройка магазина
Используйте мощные функции Shopify для начала продаж
Продать
Продать повсюду
Интернет-магазин
Продать через Интернет через веб-сайт электронной коммерции
Пункт продажи
Продать в розничных точках, всплывающих окнах и за их пределами
Кнопка покупки
Преобразование существующий веб-сайт или блог в интернет-магазине
Оформление заказа
Обеспечение быстрой и удобной оплаты
Каналы продаж
Охват миллионов покупателей и увеличение продаж
Индивидуальные инструменты витрины
Выделяйтесь с индивидуальной торговлей

Открыть главную навигацию

Начать
Начать свой бизнес
Брендинг
Выглядите профессионально и помогите клиентам соединиться с вашим бизнесом
Присутствие в Интернете
Найдите домен, изучите стоковые изображения и продвигайте свой бренд
Настройка магазина
Используйте мощные функции Shopify для начала продаж
Продать
Продать повсюду
Интернет-магазин
Продать через Интернет через веб-сайт электронной коммерции
Пункт продажи
Продать в розничных точках, всплывающих окнах и за их пределами
Кнопка покупки
Преобразование с существующего веб-сайта или блога в интернет-магазин
Касса
Обеспечьте быстрое и удобное оформление заказа
Каналы продаж
Охватите миллионы покупателей и увеличьте продажи
Индивидуальные инструменты витрины
Выделитесь с индивидуальной торговлей
Рынок
Управление

Открывается в новом окне Открывает внешний сайт Открывает внешний сайт в новом окне

Проверьте веб-адрес и попробуйте еще раз или вернитесь на домашнюю страницу Shopify.

Дополнительные ресурсы

Топ 17 бесплатных плагинов Sublime Text

[Всего: 3 Среднее: 5/5]

Текстовые редакторы — один из самых основных инструментов, которые необходимо иметь в арсенале каждого разработчика. Однако независимо от того, выберете ли вы Vim, Atom или Sublime Text, одно можно сказать наверняка: вам потребуются плагины, чтобы получить желаемую функциональность.

Неважно, веб-разработчик вы или программист на Python. Если вы хотите улучшить свой текстовый редактор, чтобы он стал удобным инструментом для кодирования? Вам нужно будет скачать и установить плагины или расширения.

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

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

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

Топ 17 плагинов для возвышенного текста

1. Пакетный контроль

Прежде чем вы сможете установить какие-либо пакеты для расширения функциональности Sublime text, вам понадобится менеджер пакетов.Это делает Package Control наиболее важным плагином для Sublime Text.

Как следует из названия, Package Control позволяет устанавливать, загружать и обновлять пакеты в Sublime Text. Он включает в себя список из более чем 2500 пакетов, доступных для установки . Более того, вы можете добавить любой репозиторий GitHub или BitBucket в виде пакета.

Package Control также автоматически обновляет установленные пакеты, чтобы минимизировать время, которое вы тратите на обслуживание. Таким образом, вы можете сосредоточиться на фактическом кодировании и поиске обновлений пакетов для Sublime Text.

2. Табнин

Наше собственное решение для прогнозирующего завершения кода на базе искусственного интеллекта имеет собственный плагин Sublime Text. Он заменяет встроенную функцию автозаполнения Sublime Text гораздо более комплексным решением.

Tabnine индексирует весь ваш проект, читая ваш .gitignore или другие файлы, и определяет, какие файлы нужно проиндексировать. Имея эти данные, он может предугадывать длинные имена файлов, прежде чем вы их вводите, используя механизм мнемонического завершения с почти мгновенными предложениями по мере ввода.

3. Эммет

Если вы фронтенд-разработчик, скорее всего, вы знакомы с Emmet независимо от того, какой редактор или IDE вы используете в повседневном кодировании. Эммет упрощает работу с HTML и CSS, по сути помогая вам печатать намного меньше. Он позволяет использовать сокращения, которые автоматически сдуваются до полнофункционального кода . Затем вы можете взаимодействовать с полученными фрагментами кода, чтобы добавлять теги и вносить другие изменения.

Как и ожидалось, Emmet доступен в виде загружаемого пакета Sublime Text из расширения Package Control.

4. Центровка

Хотя этот плагин устарел и изначально был создан для Sublime Text 2, он продолжает поддерживать постоянный поток загрузок на packagecontrol.io

Выравнивание — полезный инструмент для выравнивания нескольких секций или многострочных секций . Это простой пакет для привязки клавиш, который выравнивает ваш выбор, когда вы набираете ctrl + alt + a в Windows или cmd + ctrl + a на Mac . Конечно, вы можете назначить разные разделители для экономии времени и нажатия клавиш.

5. JSHint

Качество кода имеет значение. Нам не нужно вам об этом говорить. Когда дело доходит до разработки JavaScript, одним из решений, которые должен знать каждый разработчик JavaScript, является JSHint.

JSHint — это интуитивно понятное расширение, которое добавляет возможности отладки JavaScript в вашу IDE или текстовый редактор по выбору . Конечно, есть пакет для интеграции с Sublime Text.

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

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

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

Стоит отметить, что SideBarEnhancements не только один из самых загружаемых пакетов, но и поддерживается на GitHub.

7. SublimeLinter

SublimeLinter — это плагин для Sublime Text, который предоставляет основу для линтинга кода. Один из самых загружаемых пакетов, доступных для Sublime Text (находится в топ-25), SublimeLinter на самом деле не делает линт сам по себе. Для выполнения линтинга вашего кода вам также необходимо установить пакет, подходящий для языка или языков, на которых вы кодируете.

8. AutoFileName

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

Чтобы сделать вещи еще более эффективными, вы можете настроить AutoFilename так, чтобы оно автоматически отображалось при нажатии /. Еще меньше нажатий клавиш!

9. GitGutter

GitGutter — это подключаемый модуль Sublime Text, который показывает информацию о файлах в репозитории git способом, который вдохновлен Atom .

Как видно из названия, он будет показывать вам значки желоба для обозначения вставленных, измененных или удаленных строк. При наведении курсора на значки появится всплывающее окно с подробностями об измененных линиях. Затем вы можете перемещаться между изменениями и выполнять команды при каждом изменении.

10. ColorPicker

Выполняет именно то, что указано в названии, добавляет диалоговое окно выбора цвета, чтобы вы могли легко вставлять или изменять ссылки на цвета в коде . Чтобы открыть палитру цветов, просто введите cmd + shift + c на Mac или ctrl + shift + c в Windows или Linux.По умолчанию шестнадцатеричный код вставляется в верхнем регистре, но вы можете настроить его для вставки нижнего регистра в настройках пакета.

11. FileDiffs

Кто трогал ваши файлы и что они делали? Кто менее критичен, чем внесенные изменения, и здесь нам пригодится пакет плагинов FileDiffs.

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

12. Кронштейн Highlighter

Когда вы работаете с кодом, скобки и теги могут быть бесконечным источником ошибок и ошибок компиляции. Это делает Bracket Highlighter незаменимым пакетом плагинов для большинства пользователей Sublime Text.

Выделение скобок соответствует различным открывающим и закрывающим скобкам, таким как: [] , () , {} , "" , '' , , а также нестандартные скобки и бирки .

Стоит отметить, что упомянутый выше плагин Emmet добавляет некоторые функции выделения скобок. Тем не менее, если вы ищете более настраиваемый и всеобъемлющий инструмент, Bracket Highlighter — это ваш пакет плагинов.

13. GitHubinator

GitHubunator — это пакет, который позволит вам выбрать текст в файле Sublime Text и увидеть выделенные строки в удаленном репозитории GitHub или BitBucket . Все, что вам нужно сделать, это выделить текст, который вы хотите найти, а затем щелкнуть правой кнопкой мыши, чтобы открыть контекстное меню.Затем вы можете запустить соответствующую веб-страницу Github или Bitbucket в браузере по умолчанию.

14. ChangeQuotes

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

15. Themr

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

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

16. LiveReload

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

17. Терминал

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

Этот список ни в коем случае не является исчерпывающим. Фактически, на момент написания только с packagecontrol.io для загрузки было доступно чуть более 5000 пакетов! Поэтому нет никаких сомнений в том, что мы упустили несколько плагинов и расширений, без которых вы просто не можете жить. Что он?

10 лучших пакетов Sublime Text для веб-разработчиков

У каждого веб-разработчика есть любимый редактор кода.Некоторые люди предпочитают интегрированную среду разработки (IDE), тогда как другие просто хотят простоты. Если вы предпочитаете последнее, вы можете оценить пакеты Sublime Text.

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

Введение в пакеты Sublime Text и способы их установки

Пакеты

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

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

Что касается установки пакетов Sublime Text, процесс очень прост. Для начала зайдите в репозиторий нужного расширения и загрузите его:

Как только у вас будет. zip , перейдите в каталог Sublime Text Packages и разверните его внутри. Если вы не можете его найти, каталог должен находиться под именем пользователя / appdata / roaming / Sublime Text / Packages . Большинство расширений будут готовы к использованию в Sublime Text, как только вы извлечете папку, не требуя перезапуска редактора.

Если вам нужен более оптимизированный процесс, вы также можете использовать официальный Sublime Text Package Control . Вкратце, этот инструмент позволяет просматривать репозиторий общедоступных пакетов и устанавливать их с помощью простых команд.

Чтобы настроить Sublime Text Package Control, перейдите к Tools> Install Package Control :

После настройки Package Control вы можете использовать его через консоль Sublime Text. Нажмите CTRL + ~ , чтобы открыть его, затем введите УПРАВЛЕНИЕ ПАКЕТОМ: , чтобы увидеть полный список команд, которые вы можете использовать:

Чтобы установить новый пакет, введите Package Control: Install Package , и инструмент откроет список всех общедоступных пакетов в своем репозитории:

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

10 лучших пакетов Sublime Text для веб-разработчиков

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

1. Выравнивание

Alignment — это простой пакет, который берет ваш код и выравнивает символы, для которых вы его настраиваете. Его функциональность проста, но он делает чтение кода намного более приятным.

После установки пакета вам нужно будет настроить, какие символы он должен выровнять. Вы можете сделать это, открыв настройки пакета — Пользовательский файл:

Когда файл откроется, скопируйте и вставьте в него следующий код:

 {
    "alignment_chars": [
        "(", ":"
    ]
}

Этот фрагмент кода сообщает пакету о необходимости выравнивания символов ‘(‘ и ‘:’ в любом коде, к которому вы его применяете.В качестве примера приведу PHP, который вы будете использовать для постановки стилей дочерней темы в WordPress:

Он уже довольно организован. Однако, если вы выделите его и нажмете CTRL + Alt + A, Alignment применит ваши новые настройки, что приведет к следующему:

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

2. Эммет

Если вы фронтенд-разработчик или иным образом проводите много времени, работая с HTML и CSS, то Emmet является обязательным дополнением к вашему набору инструментов.Этот пакет позволяет вам вводить динамические выражения CSS или «аббревиатуры» и превращать их в полнофункциональный код.

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

 
     
    
          Элемент 1  
          Пункт 2  
          Пункт 3

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

 #page> div.logo + ul # navigation> li * 3> a {Item $}

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

«Из коробки» Emmet включает в себя так много сокращений, что вам почти наверняка понадобится свериться с его документацией, прежде чем начать.

3. SFTP

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

Доступ к удаленному серверу через SFTP прост. Перейдите к File> SFTP / FTP > Setup Server. Здесь вы можете настроить параметры подключения FTP / SFTP:

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

4. JSHint

Если вы работаете с JavaScript, качественная программа проверки синтаксиса значительно упростит устранение неполадок. С помощью JSHint вы можете получить быстрый обзор любых ошибок в вашем коде, а консоль пакета позволяет вам переходить от одного столбца к другому.

После установки JSHint вы можете включить его, нажав Control + J или Alt + J , что вызовет консоль для любого файла, с которым вы работаете:

Имейте в виду, вам нужен узел.js, чтобы JSHint работал на вашем компьютере. В противном случае пакет может вернуть ошибку при попытке отладки файла.

5. AutoFileName

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

С установленным AutoFileName, если вы попытаетесь связать файл с помощью тега href , вы можете нажать Control + Пробел , и он автоматически покажет список файлов и каталогов, расположенных на том же уровне, что и родительский.Вы можете легко просматривать его с помощью курсора или клавиатуры и выбирать любой файл, который хотите. Пакет автоматически добавит свой путь.

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

Если вы хотите еще больше упростить процесс, вы можете настроить AutoFilename так, чтобы он запускался без необходимости нажимать Control + Space . Для этого откройте файл User Settings и добавьте следующий код:

 "auto_complete_triggers":
[
  {
     "символы": "<",
     "селектор": "текст.html "
  },
  {
     "персонажи": "/",
     "селектор": "string.quoted.double.html, string.quoted.single.html, source.css"
  }
]

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

6. LiveReload

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

Чтобы LiveReload заработал, вам нужно сделать две вещи:

Добавьте скрипт LiveReload в HTML-файл, над которым вы работаете, нажав Ctrl + Shift + P и выбрав опцию Insert livereload.js script (показано ниже).
Установите соответствующее расширение для используемого программного обеспечения.

Вот краткий обзор того, что вы должны увидеть, добавив необходимый скрипт в локальный файл:

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

7. FileDiffs

Иногда вам нужно пробираться через длинные отрезки кода, чтобы найти недавние модификации или изменения, внесенные кем-то другим. Однако поиск невооруженным глазом может быть неэффективным. Если у вас есть предыдущая или отдельная версия определенного файла, вы можете использовать FileDiffs, чтобы показать вам несоответствия.

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

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

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

8. Минификатор

Минификация может быть отличной практикой, если вы пытаетесь повысить производительность веб-сайта.Обычно вы используете сторонние инструменты для минимизации кода, но с правильным пакетом вы можете сделать это в Sublime Text.

Minifier позволяет обрабатывать файлы как JavaScript, так и CSS. Все, что вам нужно сделать, это настроить пакет и использовать одну из этих двух комбинаций кнопок:

CTRL + Alt + M : Непосредственно уменьшает текущий открытый файл.
CTRL + Alt + Shift + M : Минимизирует текущий открытый файл и сохраняет вывод в новом.

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

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

9. TodoReview

Если вы склонны оставлять напоминания в коде задач, над которыми нужно работать или к которым нужно вернуться, вам понравится TodoReview. Вкратце, пакет компилирует списки комментариев, найденных в ваших проектах, и выводит их в новый файл, например:

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

 "patterns": {
    "TODO": "TODO [\\ s] * ?: [\\ s] * (? P . *) $",
    "СРОЧНО": "СРОЧНО [\\ s] * ?: [\\ s] * (? P <срочно>. *) $",
}

В этом примере мы устанавливаем новый тип шаблона для распознавания пакета (срочно!). Вы можете настроить столько, сколько захотите.

10. Все автозаполнение

По умолчанию Sublime Text пытается автозаполнить код в файле, над которым вы работаете.Это хорошее начало, но что, если вы работаете над проектом с несколькими файлами?

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

Если вы хотите настроить конфигурацию пакета или отключить его для определенных типов файлов, вы можете легко изменить его настройки, используя следующий код:

 "exclude_from_completion": [
    "css",
],
"min_word_size": 5, // не показывать завершения для слов с меньшим количеством символов, чем это количество, много символов

В этом примере мы исключаем. css файлов с автозаполнением и отключением функции для более коротких слов. Таким образом, пакет не запускается с прерывистой или раздражающей частотой.

Заключение

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

Когда дело доходит до выбора, какие пакеты Sublime Text вы должны использовать, это зависит от вашего уникального рабочего процесса.Если вы используете HTML и CSS, Эммет просто необходим. Другие пакеты, такие как AutoFilename и All Autocomplete, обычно являются лучшим выбором независимо от того, какой тип разработки вы выполняете.

У вас есть вопросы о пакетах Sublime Text? Дайте нам знать в комментариях ниже!

Миниатюра статьи изображение MchlSkhrv / shutterstock.com

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

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

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

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

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

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

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

Фрагменты

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

Эммет

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 = «навигация»>

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

ul >

div >

jQuery

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

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

Фрагменты начальной загрузки 4

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

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

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

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

Кронштейн Highlighter

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

Цветной маркер

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

Значок файла

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

Прочие

Призрачный текст

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

Livereload

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

Украсить

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

LiveStyle

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

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

Связано: 5 лучших современных инструментов разработки, которые улучшат ваш сайт

ColorPicker

Что, если бы у вас была палитра цветов Sublime? Ну вот и все. Палитра цветов позволяет вам выбирать цветовую гамму или использовать палитру, чтобы выбрать цвет из любого места на экране.После установки вы можете легко открыть сборщик, нажав cmd + shift + C.

TermX

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

подключаемых модулей Sublime Text | Интернет | Разработчики Google

В ту минуту, когда вы начнете разработку сайта, вы сразу же воспользуетесь первым инструментом.
текстовый редактор, будь то простой блокнот или полноценный
IDE.

В этом выпуске Адди и Мэтт посмотрите на их коллекцию плагинов.
для Sublime Text и обсудите, как
каждый помогает в их рабочем процессе.

Управление пакетами

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

JSHint

JSHint - это линтер JavaScript, который проверяет ваш JavaScript.
и выделяет любые возможные ошибки или недопустимые практики в вашем коде.

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

  var foo = {bar: 'Hello, World.' };
var msg = fo.bar;

Плагин JSHint
указывает на проблемы, отображая желтую рамку вокруг соответствующих
текст и размещение курсора в этом фрагменте кода приведет к ошибке
сообщение отображается в нижнем левом углу Sublime.

Другие проблемы, которые он улавливает:

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

Для установки пакета SublimeLinter-JSHint
вам также необходимо установить пакет SublimeLinter и следить за установкой
инструкции на странице пакета SublimeLinter-JSHint.

Некоторым разработчикам может быть полезно включить
JSHint Gutter
плагин. Он помещает маленькую точку в
желоб любой строки с проблемой JSHint.

АОС

JSCS выделит любые места, где
ваш JavaScript не соответствует определенному стилю кодирования.

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

Пакет SublimeLinter-JSCS
выделяет любые проблемы, встроенные в стиль, аналогичный JSHint
что позволяет легко исправить любые проблемы.

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

Самое лучшее, что с пакетом JSCS-Formatter вы можете автоматически исправить любые проблемы на странице
нажав ctrl + shift + p , набрав "JSCS Formatter: Format this file"
и нажав Enter.Вы узнаете больше в сообщении блога Адди.

Цветной маркер

Цветной хайлайтер
добавит цвет к фону
любые определения цвета в вашем CSS или Sass.

Вы можете указать, будет ли он отображаться как подчеркивание с
полный фон при наведении на него или всегда
отображает цвет на фоне определения. Просто зайдите в
«Настройки пакета»> «Цветовой маркер»>
«Настройки - По умолчанию», чтобы увидеть начальные настройки.
и измените свои настройки в «Настройки - Пользователь».

Для полного выделения фона
добавьте в файл «Настройки - Пользователь» следующее:

  {
  "ha_style": "заполненный"
}

Цвет желоба

Цвет желоба
альтернатива цветному хайлайтеру,
вместо отображения цвета поверх цветовой переменной,
он помещает цвет в желоб этой строки.

Палитра цветов

Если вам когда-нибудь понадобится быстрый и простой способ выбора цвета на экране
затем Пакет выбора цвета
может для тебя.

Нажмите ctrl + shift + c и стрелка - у вас есть палитра цветов.

AutoFileName

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

Автоприставка

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

Значит идем от этого ..

  .container-thingy {
  дисплей: гибкий;
  flex-direction: столбец;
  выровнять элементы: гибкий старт;
}

.. для следующего, просто нажав ctrl + shift + p и набрав
'Autoprefix CSS' и нажмите клавишу ВВОД.

  .container-thingy {
  дисплей: -webkit-flex;
  дисплей: -ms-flexbox;
  дисплей: гибкий;
  -webkit-flex-direction: столбец;
      -ms-flex-direction: столбец;
          flex-direction: столбец;
  -webkit-align-items: гибкий старт;
      -ms-flex-align: start;
          выровнять элементы: гибкий старт;
}

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

Подробнее ...

Существует множество других плагинов для
Sublime Text, поэтому обязательно изучите Package Control.

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

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

WebInspector

Emmet

Git

GitGutter и Modific

BracketHighlighter

EditorConfig

Sublimall

AllAutocomplete

SublimeREPL

DocBlockr

Floobits

AutoFileName

ColorPicker

PlainTasks

MarkdownEditing

Напоследок:

Показать активные плагины в Sublime Text 2 и отключить их

3 ответа

Похожие вопросы:

Как стать блатным фронтендером ? — Webstacker

В чем сила, брат?

Package Control

Emmet

Minify

Color Highlighter

Advanced​New​File

Bracket​Highlighter

Autoprefixer

Суммируя

Поделиться статьей:

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

Sublime Text 3. Руководство по созданию плагина для начинающих

Внимание!

Документация

Костяк плагина

Примечания

Вставка текста

Горячие клавиши

Popup окно

Контент popup-окна в HTML файле

Внимание!

Финальная реализация

Добавление команды Command Palette

Контекстное меню

Внимание!

Настройка Sublime Text для Unity

Установка Mono

Установка Package Control для Sublime

Установка Omnisharp

Настройка проекта

Устанавливаем плагины

Последние штрихи

Готово

Настройка Sublime Text для Python — TechCave

1. Установка

2. Рекомендуемые Sublime Text 3 плагины

Anaconda

Djaneiro

SideBar Enhancement

Requirements Txt

All AutoComplete

GitGutter

Другие (JavaScript/CSS) пакеты

3. Макет

4. Горячие клавиши

5. Консоль

25 лучших плагинов Sublime Text для Front End разработчиков — Front End Development

Установка

1. Пакетный контроль

Фрагменты и стиль кода

2. Эммет

3. Выравнивание

Интеграция с Git

4. SublimeGit

5. GitGutter

6. GitHubinator

7. GitOpenChangedFiles

Линтеры и подсветка синтаксиса

AdvancedNewFile

BracketHighlighter