Лучшие плагины для sublime text 3: Топ 75 Sublime Text 3 плагинов 2020

Содержание

Лучшие плагины для 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. Плагины, их установка и настройка для Sublime Text

«Окей, кажется, у меня есть блог. Так далеко я еще не заходил. Что дальше?»

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

Sublime: докатился

Долгое время в разработке я использовал Webstorm от JetBrains. Это довольно солидная IDE с огромным количеством плюсов: автокомплит кода, встроенный многооконный терминал и отдельный терминал для запуска node.js сервера, множество интеграций и плагинов, file watchers и ещё куча всего полезного. Однако, не обошлось без минусов, и главным минусом для меня оказался недостаток производительности. Запуск большого проекта длился чуть ли не минуту, постоянные переиндексации выливались в заметные подтормаживания — даже после всяких танцев с бубном, увеличения выделяемой памяти и отключения всего и вся.

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

А затем я взглянул на количество и качество плагинов для ST3, и понял, что вряд ли у меня появятся какие-либо сожаления по этому поводу.

Итак, какие же плагины я нахожу полезными для js-разработчика?

Terminal
По чему я действительно скучаю, так это по встроенному терминалу в Webstorm. Этот плагин хоть немного избавляет от этой легкой тоски. При настройках по умолчанию ctrl + shift + t открывает терминал.

Git
Интеграция с гитом. Наверное, можно вообще не лезть в терминал, но пока не очень доверяю. Еще есть SideBarGit , позволяет коммитить (и не только) прямо из контекстного меню сайдбара.
Визуальные

Seti UI Icons for Sublime Text
То, чего мне сразу стало не хватать в ST3 по сравнению с Вебштормом — иконки файлов в сайдбаре. Выглядят мило, времени на идентификацию файла уходит меньше. В Package Control его нет — с установкой придется поприседать. А, и еще нет иконки для jsx-файлов.

Oceanic Next Color Scheme
Симпатичная темная тема. Нраица.

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

На этом всё, если найду интересные и полезные плагины — может, ещё напишу подобный пост. До связи!

Правильный набор плагинов может повысить эффективность работы в любом приложении. Если вы являетесь веб-разработчиком, работающим с Sublime Text 3 Package Ccontrol
, мы настоятельно рекомендуем внимательно ознакомиться с рассмотренными в этой статье плагинами:

Package Control
;
HTMLPrettify
;
Emmet
;
Bracket Highlighter
;
jQuery
;
Case Conversion
.

Package Control

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

Как установить

Перейдите по ссылке https://packagecontrol.io/installation
и скопируйте команду, которая будет выглядеть примерно так:

Нажмите Ctrl
— обратный апостроф (; `), чтобы открыть Sublime Text Console
:

Вставьте команду и нажмите Enter
.

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

Нажмите «ОК
».
Закройте и перезапустите Sublime Text
.
Введите команду Package Control
, чтобы просмотреть все команды:

Мы будем использовать Package Control Sublime Text
для остальных плагинов.

HTMLPrettify

Принимает длинные строки HTML
, CSS
, JavaScript
и JSON
и форматирует их так, чтобы вы могли их прочитать, а не пытались разобраться в сплошном наборе текста.

Как установить

Нажмите Ctrl-Shift-P
в Windows
, чтобы открыть «Панель команд
».
Введите команду Package Control
, чтобы просмотреть все команды. Выберите Package Control: Install Package
. На экране появится меню доступных плагинов:

Введите HTMLPrettify
:

Нажмите на HTML-CSS-JS Prettify
. Данное название немного отличается, но это тот же плагин.

Emmet

Это плагин раньше назывался Zen Coding
. Он позволяет писать сокращенные коды HTML
и CSS
. Например, набрав следующее:

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

И нажав клавишу tab
, вы получите:

После установки Emmet
с помощью Sublime Text Package Control
перезапустите Sublime Text
.

Чтобы Emmet
работал, необходимо установить синтаксис для документа. Иначе он работать не будет:

Теперь проверьте. Введите следующее:

nav#menuSystem.navMenu.isOpen>div#hotelLogo>div.navMenuIcon.logoIcon+div#arrowPointer+ul#navMenuMain>li.navMenuItem.navMenuItem$$$*2>div.navMenuIcon{Item $}+a{Item $}

И нажмите tab
. Вы получите:

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

BracketHighlighter

Плагин подсвечивает скобки и теги. После установки с помощью Sublime Text Package Control install
можно щелкнуть в любом месте JavaScript
или HTML-кода
, и увидеть в левом столбце открытие и закрытие скобок:

JQuery

Плагин jQuery
подсвечивает корректный синтаксис методов jQuery
и предоставляет фрагменты кода для его завершения:

Case Conversion

Позволяет переключаться между snake_case
, camelCase
, PascalCase
и т. д. После установки плагина с помощью Package Control
(введите «pic
» для быстрого доступа к Install Package

), попробуйте:

До: navMenu

Нажмите: ;;c, затем;;c

После: nav_menu

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

До:

Нажмите: ;;c, затем;;c (для camelCase

)

После: navIDMenuSystemClassNavMenuIsOpen

Если вы являетесь веб-разработчиком, использующим Sublime Text 3 Package Control
, советую попробовать перечисленные в этой статье плагины! Если они вам не понравятся, всегда можно удалить их с помощью Package Control: Remove Package
.

Перевод статьи «Sublime Text 3 Plugins for Web Developers
» дружной командой проекта

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

WebInspector

Удивительный инструмент для debagging наличие полноценного инспектора кода для Sublime. Особенности: точки останова для реализации проекта, сохраненного в пользовательских настройках с абсолютными путями, консоль, Отладчик и останова, трассировки стека. Все это работает на ура! А еще есть
Fireplay от Mozilla, который позволяет подключаться к Firefox Инструменты разработчика и простейшей debagger
JSHint .

Муравей

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

Git

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

Если с Git вам нужно всего лишь возможность содержания взять из удаленных репозиториев, то я рекомендую Nettuts + Fetch .

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

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

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

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

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

Обычно, когда мы должны цветовую палитру мы привыкли использовать Photoshop или Gimp. Но полное выбора цвета могут быть доступны непосредственно в редакторе — Ctrl / Cmd + Shift + C
И ты замечательно. GutterColor и ColorHighlighter , которые упрощают ориентацию в цветовых кодов:

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

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

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

В конце концов

Sublime SFTP
CTags — CTags поддержка FO Sublime.
SideBarEnhancement — множество дополнительных возможностей контекстного меню в боковой панели.
ActualVim — Вим в Sublime — два любимых редакторов в одном.
SublimeLinter — Встроенный нибудь вкусненькое подсветка для C / C ++, Java, Python, PHP, JS, HTML, CSS, и т.д.
CSScomb — CSS стиль кодирования форматирования.
FixMyJS , Jsfmt и JsFormat — JS / JSON форматтеры стиль кодирования.
AStyleFormatter — C / C ++ / C # / Java кодирования форматирования стиля.
SVG-фрагменты — набор пользовательских фрагменты SVG.
Inc-Dec-Value — увеличение / уменьшение числа, даты, цвет шестнадцатеричные значения, и т.д.

Привет, друзья! По многочисленным просьбам обновил руководство по быстрой настройке редактора кода Sublime Text 3
, установке необходимых для вёрстки плагинов и создании своего пресета настроек для быстрого старта на новом рабочем месте.

Класснуть

Плюсануть

Запинить

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

Сегодня мы рассмотрим максимально быструю настройку Sublime Text, самые популярные среди верстальщиков плагины для ускорения вёрски и установим одну из лучших и комфортных тем оформления редактора One Dark Material Theme
.

По-умолчанию Sublime Text выглядит довольно печально:

Для начала необходимо настроить Package Control
. Для этого нажимаем хоткей Ctrl+Shift+P. Во всплывающем окне набираем Install Package Control и выбираем соответствующий пунк. Через несколько секунд Package Control будет установлен, о чём вы получите соответствующее уведомление.

Если вы пользователь MacOS, необходимо нажать на клавиатуре Cmd+Shift+P.

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

Установка плагинов в Sublime Text

Далее необходимо установить нужные для работы плагины. Мы рассмотрим установку самых популярных среди верстальщиков плагины, которые значительно упрощают разработку. Вы также можете поэкспериментировать с другими плагинами в Package Control, может быть вам понравятся и другие из огромного количества доступных пакетов.

Для установки плагинов в Sublime Text через Package Control необходимо вызвать меню, как мы это делали ранее: Ctrl+Shift+P. Затем вводим команду «Install Package» и выбираем нужный пакет из списка.

Самые популярные плагины для Sublime Text:

Emmet
— ускоряет написание HTML и CSS кода до скорости света. Урок по Emmet ;
AutoFileName
— дополняет код при написании путей до файлов в вёрстке;
Gist
— подключает в Sublime Text возможность использовать сервис сниппетов кода GitHub Gist. Урок по Gist ;
Sass
— плагин для подсветки Sass синтаксиса в Sass и Scss файлах. Раскрывает Emmet в Sass файлах.

Установка внешнего оформления Sublime Text

Мне очень нравится тема оформления One Dark Material Theme
и подсветка кода соответствующей цветовой гаммой. Это наиболее сбалансированные, достаточно контрастные, но не слишком резкие цвета для комфортной работы в редакторе.

Дя установки цветового оформления One Dark нам необходимо доустановить следующие пакеты через Package Control:

One Dark Color Scheme
— цветовая схема для подсветки кода;
One Dark Material — Theme
— тема оформления UI Sublime Text.

Установка плагина вручную

Некоторые плагины более не обновляются в Package Control или просто там не фигурируют. Кое-какие из этих плагинов имеют жизненную необходимость при работе с кодом и их приходится устанавливать вручную.

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

Для установки BufferScroll вручную, перейдите на GitHub страницу плагина , скачайте и распакуйте его в любое удобное место на вашем диске. Далее в Sublime Text выбираем пункт меню Preferences > Browse Packeges. Откроется папка пользовательских данных на вашем диске. Скопируйте сюда папку, содержащую файлы Buffer Scroll и перезапуститие Sublime Text. Теперь плагин работает.

Тонкая настройка редактора, пресет моих настроек

Переходим к настройкам Sublime Text.

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

Код пресета для пользовательских настроек (Preferences.sublime-settings | Preferences > Settings):

{
«show_definitions»: false,
«auto_complete»: false,
«bold_folder_labels»: true,
«color_scheme»: «Packages/One Dark Material — Theme/schemes/OneDark.tmTheme»,
«fold_buttons»: false,
«font_size»: 13,
«highlight_line»: true,
«indent_guide_options»:
[
«draw_normal»,
«draw_active»
],
«line_padding_bottom»: 2,
«line_padding_top»: 2,
«margin»: 2,
«material_theme_compact_sidebar»: true,
«material_theme_compact_panel»: true,
«material_theme_small_statusbar»: true,
«material_theme_small_tab»: true,
«tab_size»: 2,
«theme»: «OneDarkMaterial.sublime-theme»,
«word_wrap»: «false»,
}

Код пресета для пользовательских клавиатурных сокращений (Default (Windows).sublime-keymap | Preferences > Key Bindings):

[
{ «keys»: [«alt+shift+f»], «command»: «reindent» },
]

Теперь при выделении и по нажатию Alt+Shift+F
ваш код будет автоматически выравниваться отступами с соответствующей иерархией вложенности элементов.

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

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

Для того, чтобы сделать бэкап всех ваших настроек и быстро развернуть Sublime Text на другом рабочем месте, достаточно скопировать папку
«C:\Users\{Ваш пользователь}\AppData\Roaming\Sublime Text 3»

в потаённое резервное место на вашем диске или на флешку, а затем разместить у другого юзера или на другом компьютере в этой-же директории под пользователем.

Также дополнительно на ваше усмотрение можно отключить миникарту справа и скрыть меню. Это можно сделать перейдя в меню View > Hide Minimap и View > Hide Menu. Показать меню можно нажатием клавишы Ctrl на клавиатуре.

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

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

Запуск Sublime Text из консоли

В Mac OS открыть любой файл или директорию из консоли в sublime можно так:

open -a «Sublime Text» .
sudo open -a «Sublime Text» /etc/hosts

Для большего комфорта лучше использовать консольную утилиту, которая идет вкупе
с Sublime Text
. Устанавливается она так:

ln -s «/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl» /usr/local/bin/sublime

Кроме того, я сразу добавляю пару строк в.zshrc:

alias s=»sublime» # теперь можно набирать `s .` вместо `sublime .`
export EDITOR=»subl -w» # а так git commit будет открывать sublime вместо vi

Тема

Практически во всех редакторах, с которыми я работаю, я использую тему
Birds of Paradise . Sublime
не стал исключением, благо он умеет
импортировать темы из TextMate.

Линтинг

Для линтинга JavaScript я использую jshint . Для того, чтобы заставить
его работать в sublime text 3
, я использую комбинацию из двух плагинов:

SublimeLinter — движок для большого количества различных линтеров;
SublimeLinter-jshint — собственно, сам линтер.

Мой.jshintrc выглядит так (в основном я пишу под nodejs)
:

{
«browser»: false,
«curly»: true,
«expr»: true,
«indent»: false,
«jquery»: false,
«laxcomma»: true,
«laxbreak»: true,
«maxcomplexity»: 10,
«maxdepth»: 3,
«maxparams»: 4,
«node»: true,
«trailing»: true,
«quotmark»: «single»,
«strict»: true,
«undef»: true
}

Описание опций можно узнать .

CSScomb

Git

Для интеграции с git мне хватает GitGutter — этот плагин отмечает еще
незакомиченные изменения в файле соответствующими значками на полях.

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

Emmet

Emmet — набор удобных сниппетов для html и css. Так, к примеру, лаконичное
html:5>ul>li.item-$*5>span.title+span.author легким нажатием на tab превращается в…

Document

TodoReview

Я часто пишу todo-комментарии в коде, вроде такого: /* TODO: переписать на промисы */ .
TodoReview умеет находить все подобные коментарии в проекте и выводить их
в виде списка, чтобы можно было избавляться от технического долга систематически,
а не просто в очередной раз случайно наткнувшисть на оставленное замечание.

SideBarEnhancements

SideBarEnhancements учит не особенно-то и сговорчивый сайдбар 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 добавляет все изменения и коммитит их.

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

GitGutter — diff tool в режиме реального времени

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 редакторами. Все абсолютно бесплатно, требуется только создать аккаунт.

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 плагин автоматически распарсит любую функцию и подготовит соответствующий шаблон.

ColorPicker

Обычно когда нам требуется цветовая палитра мы привыкли использовать Photoshop или Gimp. Но полноценный color picker может быть прямо в окне вашего редактора — Ctrl/Cmd + Shift + c. А еще есть замечательный Gutter Color, который с помощью ImageMagick упрощает ориентирование в цветовых кодах:

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

MarkdownEditing

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

Напоследок:

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

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

Автор: ilusha_sergeevich

Источник

40+ Sublime Text лучший обзор плагинов

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

Отличный инструмент для отладки JavaScript, зрелый инструмент обнаружения Sublime-кода. Особенности продукта: Использование абсолютных путей, консоли, этапов отладки и точек останова, трассировки стека, точек останова для элементов, сохраненных в пользовательских настройках. Мгновенный эффект! Существует также Fireplay от Mozilla, который позволяет подключаться к инструменту разработчика Firefox и простейшему отладчику JSHint.

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

Лучшее техническое презентационное видео от автора проекта: (нужно самостоятельно найти лестницу)

https://youtube.com/watch?v=sxW-V24MTXI%3Ffeature%3Dplayer_embedded

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

Если вам нужно только получить содержимое удаленного репозитория из Git, то я предлагаюNettuts+ Fetch.。

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

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

Отлично! Код для открытия и закрытия любой части должен выглядеть следующим образом.

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

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true

# 4 space indentation
[*.py]
indent_style = space
indent_size = 4

# Tab indentation (no size specified)
[*.js]
indent_style = tab

# Indentation override for all JS under lib directory
[lib/**.js]
indent_style = space
indent_size = 2

# Matches the exact files either package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

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

Классическое автозаполнение в Sublime Tex применяется только к текущему файлу. Полностью автоматический поиск во всех открытых файлах в текущем окне может значительно упростить процесс разработки. Существует также CodeIntel, который воплощает функции IDE и предоставляет «интеллектуальный код» на нескольких языках, включая: 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 запускает интерпретаторы для многих языков непосредственно в редакторе, включая Clojure, CoffeeScript, F #, Groovy, Haskell, Lua, MozRepl, NodeJS, Python, R, Ruby, Scala, shell

DocBlockr может быть эффективным инструментом для документирования вашего кода. Введите / **, а затем нажмите клавишу Tab, плагин автоматически проанализирует любую функцию и подготовит соответствующий шаблон.

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

Автоматически заполнять путь к файлу — очень удобно. Так что не говори ерунды.

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

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

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

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

в конце концов

Sublime SFTP
CTags-CTags поддерживает Sublime.
SideBarEnhancement-В контекстном меню боковой панели есть много дополнительных функций.
ActualVim-Vim- в Sublime объединяет два любимых редактора в одном.
SublimeLinter- Встроенная подсветка линтов для C / C ++, Java, Python, PHP, JS, HTML, CSS и т. Д.
CSScomb-CSS форматирования стиля кодирования.
FixMyJS,JsfmtandJsFormat-JS / JSON форматирование стиля кодирования.
AStyleFormatter-C / C ++ / C # / Форматировщик стиля кодирования Java.
SVG-Snippets-Установить пользовательские фрагменты SVG.
Inc-Dec-Value- Увеличение / уменьшение чисел, дат, шестнадцатеричных значений цвета и т. Д.
Trailing Spaces-Выделите место в конце и удалите его в одно мгновение.
AlignmentМногострочный выбор и множественный выбор для супер простого выравнивания.
PlaceholdersФрагмент коллекции текста, картинок, списков, таблиц и т. Д.
ApplySyntax-Быстрое определение грамматики.
StylToken- Разрешить выделение некоторых фрагментов текста разными цветами (аналогично функции «Стиль токена» в Notepad ++)
EasyMotion-Быстрый переход к любому символу в видимой области активного просмотра.
ZenTabsиAdvancedNewFile-Улучшение внешнего вида вкладок по умолчанию и создание файлов.
EncodingHelper-Угадайте кодировку файла, которая отображается в строке состояния и конвертируйте различные кодировки в UTF-8
Gist-Sync GitHub Gist с возвышенным (ST2).
Clipboard History (ST2)-Ведение истории элементов буфера обмена.

Тема и цветовая гамма:

Soda
Spacegray
Flatland
Tomorrow
Base 16
Solarized
Predawn
itg.flat
Работает со всеми другими предпочтениямиColor SchemesиСolorsublime.

Sublime Text 3 лучший пакет CoffeeScript

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

coffeescript

sublimetext

sublimetext3

Поделиться

Источник

romek

19 декабря 2014 в 18:06

2 ответа

Плагин Sublime Text 3: SublimeLinter
Я использую Sublime Text 3. Недавно я удалил свой плагин sublimelinter и переустановил его, чтобы получить последнюю версию. Предыдущая версия sublimelinter работает нормально. Я знаю, что в новой версии sublimelinter все линтеры теперь должны устанавливаться отдельно. 1) Итак, сначала я установил…
Расположение Системного Пакета Sublime Text 3?
Где находятся системные пакеты расположенном в СТ3? Я хорошо знаю этих двоих: ~/Library/Application Support/Sublime Text 3/Packages ~/Library/Application Support/Sublime Text 3/Installed Packages Но я не могу найти, где находятся такие пакеты, как HTML или PHP. Это системные пакеты, которые я хочу…

Хорошо, пакет был отключен (понятия не имею, почему). Управление пакетом: Включить пакет -> Лучше CoffeeScript решил мою проблему.

Поделиться

romek

19 декабря 2014 в 18:32

У меня была такая же проблема, и я решил ее таким образом:

Управление пакетами > Отключить пакет > Лучше CoffeeScript

и затем

Управление пакетами > Включить пакет > Лучше CoffeeScript

Поделиться

iorrah

12 сентября 2016 в 08:33

Как стать блатным фронтендером ? — 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 для Front-End разработчика

Подсветка синтаксиса

Скоро наступает 2015 год, и за последние несколько лет в вебе изменилось очень многое — в CSS появились новые возможности, в JavaScript представили новую функциональность и синтаксис; также появилось множество языков, компилируемых в HTML, CSS и JS.

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

JavaScript Next

Плагин, подсвечивающий синтаксис лучше, чем стандартный JavaScript-хайлайтер. К тому же этот плагин поддерживает фичи EcmaScript 6, такие как модули, классы, генераторы и многое другое. Открыть сайт плагина

CSS3

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

Sass

Разработчики, использующие Sass, должны установить плагины SCSS или Sass (в зависимости от используемого синтаксиса). Обратите внимание на то, какой именно плагин вы установили. Распространённая ошибка — установить плагин Sass, но при этом использовать синтаксис SCSS, и наоборот. Открыть сайт плагина

Разумеется, также существуют плагины для подсветки синтаксиса Stylus и Less.

Пишете на CoffeeScript? Убедитесь, что у вас установлен плагин Better CoffeeScript. Важно использовать именно его, так как официальный плагин CoffeeScript больше не поддерживается его разработчиками. Также доступен плагин для подсветки синтаксиса TypeScript.

Плагин Haml расширяет стандартные возможности для работы с Haml и подсвечивает также код на других языках, записанный в haml-файле: JS, CSS, Sass и так далее. Плагины Slim и Jade добавляют возможность подсветки синтаксиса этих языков.

Плагины

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

Можно весь день обсуждать лучшие плагины для Sublime Text (я надеюсь, что именно этим вы и займётесь в комментариях), однако в этой статье мы рассмотрим must-have плагины для фронтэндера.

Color Highlighter

При работе с таблицами стилей полезно иметь какое-то наглядное представление того, как выглядит тот или иной цвет. Color Highlighter будет сканировать вашу таблицу стилей и подсвечивать все цвета, закрашивая фон текста в тот цвет, который указан. Также есть возможность настроить плагин так, чтобы он подчёркивал цвета или ставил маркер нужного цвета слева от кода.

Недавно в Color Highlighter была добавлена поддержка Sass, Less и Stylus переменных, благодаря чему этот плагин становится пригодным практически для любого рабочего окружения.

Emmet

Практически все знают об Emmet, и многие его используют ещё с тех пор, когда он назывался «Zen Coding». Однако, я часто вижу, что разработчики упускают из вида довольно полезные возможности этого плагина.

HTML

Emmet великолепен для быстрого написания разметки. Просто напечатайте css-селекторы для нужной вам разметки, и нажмите tab. Используете Jade, Slim или Haml? Emmet работает с ними так же хорошо, как и с HTML.

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



element + tab создаёт элемент и позиционирует курсор внутри него.
span + tab → <span></span>

element.className или element#ID + tab создаёт элемент с указанным классом или идентификатором.
span.hello + tab → <span></span>
p.odd.warning + tab → <p></p>
div#contact + tab → <div></div>

element>childElement + tab создаёт вложенные элементы.
ul>li + tab → <ul><li></li></ul>

[element*5] + tab создаёт указанный элемент столько раз, сколько указано.
p.hello*2 + tab → <p></p><p></p>

Также вы можете использовать символ $ в качестве счётчика. Используйте $$ для счётчика, начинающего отсчёт с нуля.

li.item$*3 + tab →



<li&gt</li&gt
<li&gt</li&gt
<li&gt</li&gt

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

figure*2>img[src=»dog$.jpg»]+figcaption{This is dog $} →



<figure&gt
  <img src="" alt=""&gt
  <figcaption&gtThis is dog 1</figcaption&gt
</figure&gt
<figure&gt
  <img src="" alt=""&gt
  <figcaption&gtThis is dog 2&gt/figcaption&gt
</figure&gt

CSS

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

В CSS emmet работает при помощи сокращений, напоминающих пары свойство/значение. Нет чётко определённых сокращений, emmet работает на основе так называемого fuzzy matching — он делает выбор, какое свойство использовать, на основе того, что вы ввели.

Примеры:

posrel → position: relative;

posab → position: absolute;

fl → float:

fr → float: right;

db → display: block;

dib → display: inline-block;

tdn → text-decoration: none;

c → color: #

w → width:

w100 → width: 100px;

w100p → width: 100%;

p → padding:

p10 → padding: 10px;

p10p → padding: 10%;

bt1-s-red → border-top: 1px solid red;

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

Sublime Linter

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

С помощью Sublime Linter вы можете легко проверить практически любой код. Как фронтэндеры, мы должны проверять наш JavaScript и, по возможности, CSS. Если вы совершите ошибку в коде, Sublime Linter подсветит её небольшим красным кружком.

Голосов: 1185 | Просмотров: 4803

плагинов и пакетов Sublime Text, которые вам стоит попробовать

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

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

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

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

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

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

Плагины

Sublime Text: установка пакетов

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

Загрузите zip-файл репозитория пакетов. Вы можете сделать это на странице пакета GitHub.
Извлеките файлы в папку Sublime Text Packages. Вы должны найти его в: {{имя пользователя}} \ AppData \ Roaming \ Sublime Text {{версия}} \ Packages \

или

Установите пакет с помощью официального элемента управления пакетами Sublime Text. Щелкните ссылку и скопируйте код, который подходит для вашей версии Sublime Text.
Вставьте код в консоль Sublime Text, к которой вы можете получить доступ, нажав CTRL + ~.
Перезапустите редактор кода, откройте командное окно, нажав CTRL + Shift + P, и введите «Package Control: Install Package» (или просто «Install Package» — автозаполнение покажет желаемые параметры).

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

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

, которые должны попробовать все веб-разработчики

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

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

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

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

Хотя «плагин» и «пакет» часто используются взаимозаменяемо, пакеты включают в себя плагины, меню, фрагменты и другие элементы, которые можно использовать для расширения Sublime Text по своему вкусу.

Вместо того, чтобы загружать файлы пакетов самостоятельно и устанавливать их в нужную папку, пусть этот плагин сделает все за вас, не выходя из Sublime Text. Если вы программист, подумайте об этом как о pip для Python или npm для node.js.

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

Alignment делает именно то, о чем говорит его название: это один из тех плагинов Sublime Text, которые упрощают вашу работу в 10 раз, выравнивая ваш код, чтобы сделать его более аккуратным и легким для чтения. Он отлично работает с PHP, JavaScript, CSS и другими.

Вы можете выравнивать разделы, многострочные выделения или весь код с помощью разделителей, таких как «=». Даже если вы думаете, что это не очень помогает, как только вы начнете использовать его, вы станете зависимым от того, насколько он полезен.

Эммет

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

Например, если вы напишете html: 5 и нажмете CTRL + E при использовании Emmet, вы получите доступ к базовому шаблону страницы HTML5 для работы. Плагин прост, но чрезвычайно эффективен и определенно улучшит вашу работу.

ИзменитьЦитаты

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

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

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

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

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

SublimeLinter

Если вы пользователь Sublime Text 3, вам понравится SublimeLinter. Не многие плагины Sublime Text были обновлены для последней версии редактора, поэтому всегда приятно видеть, что разработчики плагинов сосредоточены на обновлении своих продуктов.Вместо того, чтобы иметь все ваши линтеры в одном пакете, этот плагин позволяет вам устанавливать те, которые вы используете регулярно.

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

SublimeGit

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

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

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

GitGutter

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

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

SASS

Выделение имеет первостепенное значение для быстрого обнаружения ошибок и ошибок. Для разработчиков быстрое и эффективное исправление ошибок является абсолютной необходимостью. SASS поможет вам в этом. Он подчеркивает синтаксис SASS и SCSS и поможет любому разработчику CSS, использующему эти языки расширения.

GitHubinator

Те, кто использует репозитории GitHub / Bitbucket, должны попробовать GitHubinator. Этот плагин показывает выделенный текст в удаленном репозитории. Таким образом, текст, который вы ищете, выделяется, и вы можете просто щелкнуть контекстное меню, чтобы запустить соответствующую веб-страницу в браузере.

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

GitOpenChangedFiles

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

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

Терминал

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

При выполнении командных строк в заданной папке вам необходимо выполнить несколько этапов, которые отнимают много времени и довольно утомительны.Терминал сокращает эти шаги до сочетания клавиш CTRL + SHIFT + T.

SublimeREPL

Использование SublimeREPL упростит работу программиста в 10 раз. Этот плагин позволяет запускать интерпретаторы наиболее распространенных языков, включая NodeJS, Python, Ruby, Scala или Haskell.

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

Вавилон

Если вам нужны определения языков для ES6 + Javascript, вам следует использовать Babel. Не многие плагины Sublime Text предлагают хорошие языковые определения, особенно для последней версии. Babel специально создан для Sublime Text 3 и не поддерживает более ранние версии. Он также поддерживает синтаксис React JSX.

AllAutocomplete

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

CSSComb

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

MarkdownПредварительный просмотр

Многие разработчики привыкли создавать файлы Markdown в GitHub, StackEdit или Markable в облаке. Если вы писатель старой школы и предпочитаете хранить файлы локально, вам следует попробовать MarkdownPreview.

Вы также можете установить MarkdownEditing и выделить свой код Markdown.

DocBlockr

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

Вам нужно будет только ввести / **, и плагин сделает всю работу за вас.

Материализованные фрагменты CSS

MaterializeCSSisa запоминающийся интерфейсный фреймворк, созданный Google. Он современный, полностью адаптивный и готов к использованию всеми дизайнерами и разработчиками. Этот плагин Sublime Text поможет вам использовать Materialize CSS в текстовом редакторе с использованием общих фрагментов.

Materialized CSS Snippets добавляет компоненты CSS непосредственно в редактор кода, поэтому вы можете получить к ним доступ с помощью основных команд. Материализованные фрагменты CSS могут сэкономить массу времени и энергии, которые обычно уходят на ввод синтаксиса вручную и добавление компонентов CSS отдельно.

Стандартный формат

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

Плагин основан на библиотеке Standard Format JS, которая будет применяться к тому, что вы пишете. Все знают, как читать традиционный формат JS, поэтому этот плагин оказывается довольно полезным для разработчиков.

Фрагменты медиа-запросов CSS

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

CSS Media Query Snippets призван помочь вам с этой задачей, предлагая заранее написанные шаблоны для медиа-запросов.Вы можете просто использовать шаблон для внесения изменений.

Shell Exec

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

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

Laravel BladeHighlighter

Laravel — это фреймворк с открытым исходным кодом для PHP, который заметно повлиял на разработку PHP. Laravel использует Blade Engine, синтаксис, который позволяет разрабатывать новое программное обеспечение поверх фреймворка.

Sublime Text не был бы таким же без Laravel Blade Highlighter, если вы используете Laravel каждый день.Этот плагин, который установили более 300 000 раз, не должен пропустить ни один разработчик PHP.

Завершение мыслей об этих плагинах Sublime Text

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

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

Удачи в выполнении задач по кодированию!

Если вам понравилось читать эту статью о плагинах Sublime Text, вам стоит проверить эту статью о темах Sublime Text.

Мы также писали о нескольких связанных темах, например о лучших пакетах Atom и о том, как стать фронтенд-разработчиком.

18 лучших текстовых пакетов для веб-разработчиков

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

Используя правильные пакеты, можно создать среду Sublime Text, отражающую полностью всеобъемлющую среду сборки, тестирования и запуска, которая не только повышает производительность, но и повышает качество кода / программного обеспечения, которое вы создаете.Sublime Text предлагает полностью дружественную среду разработки для тех, кто много работает с языками внутреннего и внешнего программирования. Front-end разработчики без ума от Sublime, и вы найдете их страсть бесценной для вашего обучения.

Что сделало Sublime Text отличным от любого другого редактора кода на рынке, так это интеграция диспетчера пакетов, который можно использовать для добавления настраиваемых плагинов и настраиваемых тем Sublime Text для персонализации процесса кодирования. Это привело к разработке тысяч уникальных плагинов Sublime, которые добавляют самые универсальные функции в вашу среду разработки.Некоторые плагины были загружены более миллиона раз, что свидетельствует об их большом успехе в превращении Sublime Text в лучший редактор кода на планете. Мы будем демонстрировать только лучшие плагины Sublime Text как для версии 2, так и для версии 3. Мы постарались включить как можно больше разнообразия, чтобы эти плагины использовались как интерфейсными, так и внутренними разработчиками. Поделитесь своими в комментариях!

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

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

Скачать

Материализованные фрагменты CSS

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

Скачать

Стандартный формат

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

Скачать

Терминал

Все сводится к производительности. Плагины Sublime Text предназначены для экономии вашего времени. Предоставляя вам инструменты и функции, которые сделают вашу среду разработки намного более плавной, более гибкой и, безусловно, удобной для использования. Терминал — одна из тех библиотек, которые, по вашему мнению, вам не нужны, пока вы не начнете его использовать. Что делает пакет / плагин, он создает ярлыки и пункты меню, которые можно использовать для открытия вашего Терминала в позиции файла, который вы редактируете в данный момент, или вы можете быстро перейти к корневой папке, в которой находится ваш проект, также в терминал конечно.Это простой пакет с простыми функциями, но он каким-то образом облегчает жизнь уже более чем 220 000 человек. Вы один из них?

Скачать

Laravel Blade Highlighter

Вы, возможно, были разработчиком PHP в прошлом, но вам надоел язык и вы решили попробовать что-то новое … ну, прежде чем вы решите, что закончили с PHP навсегда, возможно, вам стоит попробовать Laravel, потрясающий открытый — исходный фреймворк PHP, который изменил ландшафт PHP и общей разработки PHP.Без сомнения, одна из самых популярных фреймворков десятилетия, вся представленная сообществу одним разработчиком, у которого было видение создания чего-то уникального, и это видение, само собой разумеется, было реализовано довольно быстро. Честно говоря, Laravel использует так называемый Blade Engine, особый синтаксис, который поддерживает разработку нового программного обеспечения поверх фреймворка … Трудно представить кодирование Laravel на Sublime без помощи этого плагина, и 120 000 человек согласятся со мной. что.

Скачать

Простые задачи

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

Скачать

j Запрос

Мы в Colorlib любим jQuery. У нас есть сильная страсть к jQuery, и наши прошлые публикации, основанные на этой теме, должны быть достаточным доказательством этого: см. Здесь, здесь и здесь. Мы очень рады и счастливы продвигать плагин jQuery для пользователей Sublime Text, плагин, которым активно пользуются и используют более 500 000 разработчиков. jQuery — это язык Интернета, он делает Интернет более интерактивным и дружелюбным для пользователя.

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

Скачать

Sass

SASS — это препроцессор, который вам нужно изучить! Если вы хотите по-новому взглянуть на программирование CSS, полезно изучить препроцессор, который может легко преобразовать язык сценариев в реальный функциональный язык программирования, где вам не нужно повторно использовать один и тот же синтаксис и шаблоны каждые десять секунд.SASS просто упрощает «программирование» с помощью CSS и рассматривает CSS как функциональную альтернативу. Во всяком случае, плагин SASS уже скачали почти 480 000 раз. Этот невероятно универсальный плагин добавит функциональность SASS в ваш рабочий процесс Sublime, что позволит вам использовать Sass более эффективно и с большей точностью.

Скачать

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

Забудьте о том, чтобы каждые несколько минут возвращаться в Интернет, чтобы найти нужный вам цвет. Вся эта тяжелая работа должна выполняться прямо в вашем редакторе или, как сказали бы разработчики интерфейса: в вашем браузере.ColorPicker придаст вашему редактору Sublime Text дополнительную функциональность, которая даст вам простой способ выбора правильных цветов для всего, что вы пытаетесь стилизовать в данный момент. ColorPicker работает на всех платформах, и его проще использовать, чем научиться говорить Hello World на Haskell!

Скачать

МЕНЬШЕ

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

Скачать

Формат Js

JS Beautifier снова делает ваш код JavaScript красивым! Так устроены круги разработчиков. Код нужно оптимизировать и хорошо оптимизировать. JsFormat — это плагин Sublime, который работает с форматированием вашего кода JavaScript с использованием библиотеки JS Beautifer.

Скачать

Кронштейн Highlighter

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

Анаконда

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

Значок файла

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

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

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

Скачать

HTML-CSS-JS Prettify

Очень важно сделать код более аккуратным! Это помогает согласовать код для использования в будущем для всех, кто хочет исследовать и развивать ваши идеи.Это приложение работает, в частности, с форматами кода HTML5, CSS3, JavaScript и JSON. Все обрабатывается через Node.js!

Скачать

Word Press

Конечно, как мы можем забыть разработчиков WordPress? Есть актуальный пакет для тех из вас, кто активно работает с WordPress. Sublime Text работает таким образом, что вы можете установить столько плагинов, сколько захотите. Об этом нужно помнить. Они начнут работать только тогда, когда вы начнете использовать код, поддерживающий назначение плагинов.Здесь также есть плагин WordPress. Это модуль, который поможет в написании синтаксиса, связанного с WordPress, для проектов, связанных с WordPress, над которыми вы работаете. Выведите свой WP на новый уровень!

Скачать

Java Script Next — синтаксис ES6

Вышел

ECMAScript 2016, и все в восторге от этого! Браузеры уже работают над интеграцией ES7. А пока давайте немного отдышимся и сосредоточимся на том, что здесь доступно для непосредственного использования.Если вы все еще испытываете трудности с изучением синтаксиса ES6, вам нужно скачать копию JavaScriptNext. Разработчики специально создали плагин Sublime для автозаполнения и помощи с подсветкой синтаксиса ES6.

Скачать

Вавилон

Однако вы можете быть поклонником Babel, который также поддерживает синтаксис ES6. В этом случае вам просто нужно взять копию плагина Babel и таким образом выполнить программирование на ES6. Удачного кодирования, что бы вы ни решили делать!

Скачать

Лучший редактор кода для серьезного разработчика

Успех

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

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

Функции, плагины и настройки

— Scotch.io

Sublime Text 3 — замечательная программа. Для начала, это чистый, функциональный и быстрый редактор кода.Он не только имеет невероятные встроенные функции (режим multi-edit и vim), но и поддерживает плагины, фрагменты и многое другое.

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

Характеристики

Палитра команд

ctrl + shift + p

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

Например, вы можете вызывать команды Git add, branch, commit, push и pull из палитры команд.

Для использования : ctrl + shift + p

Переключение файлов

ctrl + p

Sublime Text предоставляет действительно быстрый способ открывать новые файлы. Просто нажмите ctrl + p и начните вводить имя нужного файла. Как только он появится, просто нажмите Enter и начните вводить текст прямо в этот файл!

Для использования : ctrl + p

Символы перехода

ctrl + r

Если у вас есть большой файл с множеством методов, нажатие ctrl + r перечислит их все и упростит их поиск.Просто начните вводить тот, который хотите, и нажмите Enter. для использования : ctrl + r

Начать с JavaScript
бесплатно!

Sublime Text 3 также имеет новую функцию (Goto Definition). Он предоставляет Sublime Text больше возможностей ближе к IDE. Взгляните на это, если вам интересно.

Мультиредактирование

ctrl + щелчок

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

ctrl + d : выбрать текущее слово и следующее же слово
ctrl + click : каждое место, где вы щелкаете, создает курсор для редактирования
ctrl + shift + f AND alt + введите : найдите слово в своих файлах и затем выберите их все

Фрагменты

Snippets — еще одна замечательная функция Sublime Text.Вы можете использовать предустановленные, создать свои собственные или установить пакет, в котором их больше. Все, что вам нужно сделать, это ввести слово, и оно развернется в вашем фрагменте. Например, набрав lorem , вы получите текст lorem ipsum.

Использование : введите слово, которое активирует фрагмент (например, lorem ), и нажмите вкладку .

Вот отличная статья о создании сниппетов.

Сочетания клавиш

Количество сочетаний клавиш в Sublime просто поражает.Это еще одна моя лучшая особенность Sublime. Чем меньше я могу отойти от клавиш «Домой» на клавиатуре, тем эффективнее я стану.

Полный список сочетаний клавиш Sublime Text можно найти в нашей статье о сочетаниях клавиш.

Проектов

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

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

Чтобы сохранить проект : войдите в палитру команд и введите сохранить проект

Для переключения проектов : ctrl + alt + p

Пакеты / плагины

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

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

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

Использование : войдите в палитру команд ( ctrl + shift + p ) и введите install .

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

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

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

Использование : выделите линии, которые нужно выровнять, и нажмите ctrl + alt + a

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

Этот плагин обеспечивает выделение скобок для всех видов скобок.

Colorpicker

Иметь возможность менять цвета с помощью палитры на лету.

Использование : ctrl + shift + c Примечание: этот плагин намного красивее при использовании на Mac

Эммет

Emmet — абсолютная экономия времени. Вы можете легко и быстро создавать HTML на лету.

Чтобы использовать : ctrl + alt + введите и начните вводить свой HTML-код в стиле Emmet

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

DocBlockr

Действительно отличный способ легко создавать блоки документов для многих языков, включая JavaScript, PHP и CoffeeScript. Просто введите / ** над вашей функцией и нажмите вкладку . Наблюдайте за волшебством, поскольку DocBlockr берет имя функции и переменные и создает ваш блок документа.

Git

Git помогает вам взаимодействовать с вашим репозиторием Git. Он поддерживает всевозможные вещи, такие как init , push , pull , branch , stash и другие.Узнайте больше о том, как именно можно

используйте Git внутри Sublime text, чтобы улучшить свой рабочий процесс.

GitGutter

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

Gist

Этот плагин позволяет извлекать ваши Gists и вставлять их в свой файл. Это полезно, когда у вас есть Gist для запуска файла HTML или любой другой имеющийся у вас код многократного использования.

Использование : откройте палитру команд и введите gist . Вы также можете использовать показанные ярлыки.

Боковая панель Улучшения

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

Вот старое меню в сравнении с расширенным меню боковой панели.

шаблоны

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

Установите тему с помощью Package Control, а затем обновите свои пользовательские настройки, чтобы использовать ее.

  // Пользователь / Preferences.sublime-settings
{
    "тема": "Soda Light.sublime-тема"
}

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

Некоторые популярные темы:

Theme — Soda

состоит из светлого и темного

Тема — Flatland

Предрассвет

Ответвление Флатландии.Посмотрите репо и замечательную работу Джейми Уилсона.

Спейсирей

«Гиперминимальная тема пользовательского интерфейса». Более подробную информацию можно найти здесь. Благодаря ссылке Джентана Бернардуса.

Другие темы

Чтобы узнать о других отличных темах, прочтите «Лучшие темы для возвышенного текста 2014 года».

Цветовые схемы

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

Чтобы изменить цветовую схему : войдите в свое меню, Настройки > Цветовая схема и выберите один.

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

Настройки

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

Чтобы перейти к пользовательским настройкам, используйте палитру команд и введите пользователь .

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

  // Пользователь / Preferences.sublime-settings
{
    "bold_folder_labels": правда,
    "color_scheme": "Пакеты / Тема - Flatland / Flatland Monokai.tmTheme",
    "font_face": "Ubuntu Mono",
    "font_options": "subpixel_antialias",
    "font_size": 14,
    "highlight_line": правда,
    "highlight_modified_tabs": правда,
    "ignored_packages":
    [
    ],
    "line_padding_bottom": 1,
    "line_padding_top": 1,
    «правители»:
    [
        80
    ],
    "scroll_past_end": правда,
    "tab_size": 4,
    "tab_completion": ложь,
    «тема»: «Сода Лайт.возвышенная тема ",
    "translate_tabs_to_spaces": правда,
    "trim_trailing_white_space_on_save": правда,
    "vintage_start_in_command_mode": правда,
    "word_wrap": правда
}

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

Приведенные выше настройки автоматически включают винтажный режим при открытии файла. Если вам не нравится эта функция, просто удалите vintage_start_in_command_mode , а если вы хотите полностью отключить Vintage, удалите параметр ignored_packages .

Заключение

В Sublime так много деталей, что я уверен, что пропустил некоторые замечательные вещи. Дайте мне знать, если вы найдете какие-либо другие замечательные пакеты или функции и удачного кодирования!

Жажда большего…

Ознакомьтесь с нашей обширной серией очень , в которой рассматриваются все аспекты Sublime Text 3:

Понравилась эта статья?

Подпишитесь на @chris__sev в Twitter

Какие плагины Sublime Text 3 для веб-разработки самые лучшие?

Здесь я собираюсь продемонстрировать вам несколько классных плагинов для веб-разработчиков, позволяющих легко кодировать в Sublime Text 3. Итак, приступим.

Почему нам нужно устанавливать плагины в Sublime Text 3?

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

Всякий раз, когда вы открываете возвышенное, вид будет выглядеть так.

Sublime New Window View

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

Теперь давайте начнем обсуждение плагинов Sublime и их установки.

нажмите Инструменты меню
нажмите Командная палитра .. [Ctrl + Shift + P]
Поиск Управление пакетами: Установите и щелкните по нему.
После этого вы автоматически получите весь список плагинов.

Часть — I

Часть — II Список плагинов после установки Package Control

Emmet
SublimeLinter
Sass
Babel
GhostText
Git
Terminal
DocBlockr
Emoji

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

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

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

Уведомление Facebook для ЕС!
Вам необходимо войти в систему, чтобы просматривать и оставлять комментарии в FB!

Старший инженер-программист в CotocusEmail — свяжитесь с @ DevOpsSchool.com

Будьте разработчиком полного стека и стремитесь изучать новые технологии.
Знание: CSS, Bootstrap, Javascript, PHP, WordPress, Joomla, Moodle, Laravel, AJAX, Jquery, Java, Dart, Flutter, Photoshop, CorelDraw, Pagemaker
и пакет Office

Последние сообщения Чандана Кумара (все)

обязательных расширений Sublime Text для веб-разработчиков

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

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

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

Если вы ищете расширения Sublime Text для WordPress, попробуйте эту коллекцию.

Панель инструментов веб-дизайнера

Неограниченное количество загрузок: более 1 000 000 веб-шаблонов, тем, плагинов, ресурсов дизайна и многое другое!

Sublime Text и Emmet практически одно и то же. Расширение Emmet не служит только одной функции или цели.

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

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

Нет лучшего расширения для Sublime Text, чем Emmet. Особенно для тех, кто часто кодирует веб-сайты с нуля.

Многие из новых свойств CSS3 имеют префиксы для обработки различных механизмов рендеринга. Они в основном используются для движков WebKit, Gecko и Microsoft, которые сгруппированы вместе как префиксы поставщиков.

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

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

Sublime поставляется с парой тем по умолчанию с определенными стилями подсветки синтаксиса.Но вы можете захотеть пополнить свой арсенал, и именно здесь Themr может вам помочь.

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

Plus, вы можете добавлять новые темы по мере их нахождения и систематизировать их все вместе. Ваши «любимые» темы можно даже сохранить в виде предустановок на основе любых типов файлов, которые вы используете (например, файлы HTML, JS и PHP).

Отладка JavaScript — это боль.Если вы попрактикуетесь в отладке, вы, естественно, станете лучше в этом процессе, но сделать это все равно непросто.

С помощью расширения Sublime JSHint вы можете перенести отладку JavaScript прямо в свою IDE. Это простое дополнение позволяет тестировать код JavaScript из любого файла JS.

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

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

Почти каждая веб-страница где-то в коде ссылается на другие файлы. Эти файлы могут быть изображениями, сценариями JS, таблицами стилей или даже другими динамическими страницами, такими как файлы .php.

С помощью Auto Filename вы сэкономите массу времени, вводя эти файлы вручную. Просто начните вводить имя, и это расширение обработает все остальное с помощью поля автозаполнения. Он работает для всех элементов внутри вашего HTML, поэтому вы можете быстро добавлять пути к каталогам для изображений, файлов CSS, плагинов JavaScript и т. Д.

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

Sidebar Enhancements берет стандартную боковую панель Sublime и, ну … улучшает ее! Это дает вам несколько представлений папок, дополнительные параметры в контекстном меню, вызываемом правой кнопкой мыши, простое копирование URI путей и другие удобные параметры, такие как «открыть с помощью» для графики.

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

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

Расширение ColorPicker

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

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

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

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

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

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

20 самых полезных плагинов Sublime Text

Sublime text — потрясающий редактор, который выбирают многие программисты. На домашней странице самого Sublime Text: «Sublime Text — это сложный текстовый редактор для кода, разметки и прозы. Вам понравится приятный пользовательский интерфейс, необычные функции и потрясающая производительность.«А еще лучше, это бесплатно или платно, только если вы захотите. Если вы ищете редактор, Sublime предлагает красивый макет, почти ежедневные обновления, скорость, автоматическое завершение кода и легко устанавливаемые плагины. Если у вас уже есть Sublime или вам нужно больше причин для его получения, ознакомьтесь с 20 САМЫМИ полезными плагинами, которые доступны сегодня (как было решено 20 наиболее популярными плагинами, установленными с помощью управления пакетами).

Вы можете загрузить и установить плагины Sublime несколькими способами, но, пожалуй, самый популярный способ — через сам плагин Sublime Package Manager (да).Проверьте это в Package Control.
Emmet позиционирует себя как необходимый инструментарий для разработчиков и, хотя это не совсем важно, это отличный помощник для повышения качества вашей жизни Sublime Text Editor. Он позволяет использовать сокращения для набора селекторов html и css, возможность быстро заключать код в новые теги, быстро перемещаться, комментировать и полностью настраивать. Он обновляется почти каждый день. Проверьте это на Github или на сайте Sublime Package Control.

Линтеры

существуют уже давно и позволяют в реальном времени проверять стилистические, синтаксические ошибки и ошибки.Sublime Linter — третий по популярности плагин для packagecontrol, но следует отметить, что на самом деле это не линтер, который связывает ваш код, вам также понадобятся языковые плагины для линтера, такие как flake8 для python, jshint для javascript, csslint для css и ruby-wc для ruby. Проверьте Sublime Linter на их странице Github или в разделе управления пакетами.
Если вы когда-нибудь смотрели учебные пособия, в которых докладчик использует Sublime, и задавались вопросом, как у них есть боковая панель, которая включает папки и файлы в одном каталоге, и задавались вопросом, как они это настраивают, на самом деле это плагин.SideBarEnhancements — четвертый по популярности плагин для Sublime Text, который позволяет открывать, оценивать, удалять, переименовывать и просматривать подробные сведения о наборах файлов и папок, над которыми вы работаете. По мере роста вашей кодовой базы это очень полезно! Проверьте SideBarEnhancement на Github или Package Control.
Возможно, вы видели соответствие скобок в другом редакторе или плагинах. Но они, вероятно, не были чем-то похожим на Bracket Highlighter, плагин Sublime, который включает в себя настраиваемые подсветки для ваших типов скобок, режим скобок с высокой видимостью (в котором совпадающие скобки показаны более заметными парами), возможность переключаться между открывающими и закрывающими скобками и ряд других качеств жизни.Проверьте BracketHighlighter на Github или в Package Control.
Если вы когда-либо смотрели на экран в течение 12 часов, вы знаете, насколько важна качественная тема для того, чтобы ваши глаза были расслабленными, то, на что вы пытаетесь смотреть, и т. Д. Тема Soda — одна из самых популярных в Sublime, и, помимо приятного набора цветов, она также обеспечивает дополнительную функциональность. Тема Soda включает отображение пользовательского интерфейса Retina, позволяет вам выбирать между параметрами вкладок, предлагает боковые папки, предлагает цветовые темы подсветки синтаксиса и позволяет вам изменять шрифт вашего кода.Проверьте плагин темы Soda в Package Control или на Github.
SublimeCodeIntel позиционирует себя как полнофункциональный интеллектуальный код и интеллектуальный механизм автозаполнения. Он работает на широком спектре языков и фреймворков и поддерживает следующие функции: переход к файлу и строке определения данного символа, показывает автозаполнение в реальном времени для доступных модулей и символов и отображает информацию в строке состояния о рабочие функции. Проверьте SublimeCodeIntel на Github или через Package Control.
HTML5 Snippets for Sublime Text предлагает несколько функций, в том числе возможность использовать триггеры табуляции вместо полного набора тегов HTML5. Например, временная метка будет выглядеть так: « $ {2: 12 января 2011} », а значение даты и времени останется редактируемым. Проверьте плагин на странице Package Control или Github.
Вы когда-нибудь сидели и пытались поместить блоки кода в нужное положение (для сотен строк кода)? Он стареет. Но это не обязательно, если у вас есть плагин Sublime Alignment, который позволяет использовать простую привязку клавиш, которая выравнивает несколько выделений или блоков для установки отступов.Посмотрите плагин Alignment на странице Package Control или на домашней странице WBond.
Устали выскакивать из редактора только для того, чтобы отправить файл на FTP-сервер. Вам не нужно этого делать с плагином Sublime SFPT от WBond, который позволяет вам работать вне сервера, синхронизируя ваши текущие файлы через FTP, SFTP, SFPT. Дополнительные функции включают возможность работать с отдельной локальной и удаленной версией файла, использовать пароль и ключ авторизации, поддерживать постоянное фоновое соединение, одновременные загрузки и способность обнаруживать изменения в Git, Mercurial и SVN.Ознакомьтесь с плагином на странице Package Control или на домашней странице WBond.

Плагин

Git легко установить с помощью Sublime Package Control. Он позволяет вам использовать большую часть функций Git, даже не выходя из окна Sublime. Просматривайте историю файла, над которым вы работаете, или используйте статус, просмотр журнала, просмотр различий, авторство, аннотации, добавление файлов, фиксации или быстрые фиксации от вашего редактора. Вы также можете проверить это через Package Control.
Пакет Sublime jQuery обеспечивает быстрое выделение синтаксиса и большинство методов jQuery в виде фрагментов.Введите часть нужного метода, а пакет jQuery сделает все остальное. Проверьте это в Package Control или Github.
Sass for Sublime Text включает ярлыки Zen Coding (возможность печатать блоки вашего html / css в сокращенном формате, нажимать вкладку и генерировать соответствующие значения) для файлов SASS и SCSS. Проверьте пакет в Package Control или Github.
LESS Syntax for Sublime предлагает подсветку синтаксиса для файлов LESS, а также возможность поиска по фрагментам для завершения.Ознакомьтесь с пакетом в Package Control.
DocBlocker for Sublime ускоряет написание документации для Javascript, PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Groovy, Objective, C, C ++ и Rust. Проверьте плагин в Package Control или Github.
ColorPicker for Sublime обеспечивает многоплатформенную поддержку цветовых кругов, возможность визуально выбирать цвета в редакторе и добавлять их в разметку, а также возможность извлекать цвета из других плагинов. Проверьте плагин в Package Control или Github.
JsFormat for Sublime Text позволяет форматировать файлы Javascript и JSON целиком или по частям, полностью настраиваемые параметры (пробелы, интервалы, стили форматирования) и возможность форматировать проекты по-разному для каждого проекта. основание. Проверьте плагин на странице Package Control или Github.
ConvertToUTF8 позволяет редактировать и конвертировать файлы, закодированные в форматах, не поддерживаемых Sublime Text 2 и 3, включая GBK, BIG5, EUC-KR, EUC-JP и Shift_JIS.Проверьте плагин в Package Control или Github.
Emmet CSS Snippets — альтернатива Emmet для тех, кому либо просто нужна функция завершения CSS, либо для тех, для кого Emmet, похоже, не работает. Проверьте плагин на странице Package Control или на Git.
Пакет SCSS для Sublime Text позволяет синтаксис и поддержку SCSS, SASS. Пакет также доступен для Textmate, Atom и Chocolat (другие редакторы). Проверьте плагин на странице Package Control или Github.

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

Текстовые редакторы — один из самых основных инструментов, которые необходимо иметь в арсенале каждого разработчика.Однако независимо от того, выберете ли вы 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, оптимизирующий использование функций терминала . Этот полезный плагин создает сочетания клавиш и пункты меню, которые можно использовать для быстрого открытия терминала, где бы вы ни находились.Так, например, вы можете запустить терминал на месте редактируемого файла или перейти в корневую папку проекта.

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

Лучшие плагины для Sublime Text. Плагины, их установка и настройка для Sublime Text

Package Control

HTMLPrettify

Emmet

BracketHighlighter

JQuery

Case Conversion

WebInspector

Муравей

Git

В конце концов

Установка плагинов в Sublime Text

Самые популярные плагины для Sublime Text:

Установка внешнего оформления Sublime Text

Установка плагина вручную

Тонкая настройка редактора, пресет моих настроек

Запуск Sublime Text из консоли

Тема

Линтинг

CSScomb

Git

Emmet

TodoReview

SideBarEnhancements

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

WebInspector

Emmet

Git

GitGutter — diff tool в режиме реального времени

EditorConfig

Sublimall

AllAutocomplete

SublimeREPL

DocBlockr

ColorPicker

MarkdownEditing

Напоследок:

40+ Sublime Text лучший обзор плагинов

в конце концов

Тема и цветовая гамма:

Sublime Text 3 лучший пакет CoffeeScript

2 ответа

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

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

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

Package Control

Emmet

Minify

Color Highlighter

Advanced​New​File

Bracket​Highlighter

Autoprefixer

Суммируя

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

Sublime Text для Front-End разработчика

Подсветка синтаксиса

JavaScript Next

CSS3

Sass

Плагины

Color Highlighter

Emmet

HTML

CSS

Sublime Linter

плагинов и пакетов Sublime Text, которые вам стоит попробовать

Sublime Text: установка пакетов

, которые должны попробовать все веб-разработчики

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

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

Эммет

ИзменитьЦитаты

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

SublimeLinter

SublimeGit

GitGutter

SASS

GitHubinator

AdvancedNewFile

BracketHighlighter