Sublime text 3 плагины javascript. Лучшие плагины для Sublime Text
В своей работе я использовал много редакторов кода, как простых, начиная от консольного редактора nano в Linux, заканчивая тяжеловесной, но очень хорошей IDE - IntelliJ IDEA от компании JetBrains, но именно Sublime Text заставил обратить на себя внимание и теперь в разработке веб-проектов в основном использую его и вот почему
1. Скорость работы
Sublime Text 3 действительно работает очень быстро даже на старом железе
2. Кроссплатформенность
Редактор Sublime Text работает в операционных системах Linix, Windows, Mac OS
3. Большое количество плагинов для различных задач
Плагины разрабатываются для Sublime Text каждый день, начиная от красивейших тем, заканчивая плагинами для Bootstrup
Установка Sublime Text 3 в Windows
Для того, чтобы установить Sublime Text 3, скачайте exe файл с официального сайта редактора.
Доступны версии для Linux, MacOS и Windows 32 и 64 битной версии. После скачивания, запустите exe файл Sublime Text 3 и следуйте инструкциям установки.
Настройка Sublime Text 3
Одна из особенностей Sublime Text 3 - это большое количество плагинов. Сегодня мы настроим несколько полезных плагинов для веб-разработчиков с помощью удобного менеджера пакетов: Package Control.
Установка плагина Package Control
Плагин Package Сontrol позволяет устанавливать дополнения к Sublime Text 3 легким способом, а также включать и выключать дополнения и обновлять их.
Для того, чтобы установить Package Control, пройдите по ссылке: https://packagecontrol.io/installation и скопируйте python код с сайта и в Sublime Text 3 нажмите сочетании клавиш ctrl+` или View > Show Console, затем вставьте скопированный код и нажмите Enter. Немного подождите и вам выдет окно-предупреждение, что нужно перезапустить редактор Sublime Text 3 для применения изменений.
Нажмите OK и закройте редактор, а затем опять откройте. Если вы все сделали правильно, тогда Package Control вы успешно установили.
Давайте попробуем установить красивую тему к Sublime Text через Package Control.
Установка новой темы из Package Control
Установка дополнений к редактору Sublime Text 3 через Package Control очень простая. Для того, чтобы открыть Package Control и установить новое дополнение для Sublime Text 3, нажмите Preferences - Package Control затем введите install (у вас должно сработать автодополнение), затем нажмите enter и введите название дополнения, в нашем случае это будет красивая тема под названием: spacegray .
После того, как вы установили новую тему, она станет доступна через меню: Preferences - Color Scheme - Theme Spacegray.
После этого у вас должна измениться цветовая схема. Но для того, чтобы применить полностью тему Spacegray, вам нужно зайти: Preferences - Settings User и вставить строки:
{
"theme": "Spacegray.sublime-theme",
"color_scheme": "Packages/Theme - Spacegray/base16-ocean.dark.tmTheme"
}
После этого перезапустите редактор Sublime Text 3, если тема применится некорректно.
Установка плагина Emmet
Плагин Emmet очень полезное дополнение, которое позволяет значительно ускорить процесс разработки сайта, в частности процесс верстки страниц.
Устанавливается легким способом, через Package Contorl: Preferences - Package Control затем введите install (у вас должно сработать автодополнение), затем нажмите enter и введите Emmet, далее нажмите Enter.
После того как установится дополнение Emmet, у вас открывается возможность очень быстро короткими записями, писать готовый код.
Например, с помощью Emmet, мы создать шаблон div элемента с классом нажатием всего двух клавиш: точка(.) и tab:
Аналогично, для того чтобы создать шаблон элемента div, но не с классом, а id, введите # и tab и вы увидите:
В данной статье мы не будем рассматривать все возможности плагина Emmet, так как для него мы посвятим отдельную статью, а пока оставим вам ссылку на официальную документацию к плагину Emmet - http://docs.emmet.io/
Полезные плагины Sublime Text 3
В Sublime Text много полезных плагинов для работы с кодом, для работы с GIT, с терминалом, плагин для синхронизации настроек между редакторами и прочие.
Sublimall
Плагин Sublimall позволяет синхронизировать настройки одного редактора Sublime Text, между редакторами Sublime Text установленных на разных компьютерах.
DocBlockr
Плагин DocBlockr создан для того, чтобы создавать автоматическую документацию к вашим методам. Он анализирует поля методов и на основе их формирует документацию.
ColorPicker
Плагин ColorPicker выполняет функцию color picker(выбор цвета). Это очень удобно, когда вы хотите подобрать цвет или посмотреть цвет в css свойствах элемента
Sublime SFTP
Sublime SFTP позволят подключаться к SSH серверу прямо из Sublime Text. Если вы ранее использовали для подключения к сайту FTP клиент, например FileZilla, теперь вы можете подключиться напрямую.
Плагинов для Sublime Text написано огромное количество и они покрывают те задачи по удобству написания кода, с которыми сталкивается разработчик.
Выводы о Sublime Text 3
Редактор кода Sublime Text 3 имеет большие возможности и постоянно развивается. К нему пишут большое количество дополнений и цветовых тем. За счет своей кросплатформленности, вы можете смело использовать его в популярхных операционных системах.
А если вы научитесь пользоваться дополнениями, описанные в этой статье и дополнениями которые вы найдете в свободном доступе, код будет писаться быстрее.
В слудующих статьях мы сделаем детальный обзор новых полезных плагинов и цветовых схем к Sublime Text. Вступайте в нашу группу
Сегодня я решил перейти со старого сублайма на Sublime Text 3. В этом посте я хочу зафиксировать список используемых мной плагинов и заодно расскажу немного о них. Например о таких, которые делают клевую подсветку значений цвета:)
Для удобной установки плагинов необходимо поставить Package Control. Для этого открываем консоль в редакторе(Ctrl + `) и вводим следующую команду:
Import urllib.request,os,hashlib; h = "eb2297e1a458f27d836c04bb0cbaf282" + "d0e7a3098092775ccb37ca9d6b2e4b7d"; pf = "Package Control.sublime-package"; ipp = sublime.installed_packages_path(); urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler())); by = urllib.request.urlopen("http://packagecontrol.io/" + pf.replace(" ", "%20")).read(); dh = hashlib.sha256(by).hexdigest(); print("Error validating download (got %s instead of %s), please try manual install" % (dh, h)) if dh != h else open(os.path.join(ipp, pf), "wb").write(by)
После чего перезапускаем редактор. Хочу заметить что новая версия запускается еще быстрее старой. Теперь для установки плагинов нажимаем Ctrl + Shift + P и выбираем Package Control: Install Package . Там выбираем плагин и жмем Enter.
Плагины
Emmet
Думаю в представлении не нуждается. Это плагин для быстрого набора html и css-кода.
Local History
Удобный плагин для просмотра истории изменения файлов.
Encoding Helper
Отображает в статусной строке кодировку файла, а также позволяет открывать и сохранять файлы в различных кодировках.
SublimeCodeIntel
Умный автокомплит, имеется возможность перепрыгивать к definitions при помощи Alt + Click.
SublimeREPL
Интерпретатор различных языков. Например Python, NodeJS и другие
DocBlockr
Удобная вставка JSDocs, парсит параметры функций. Введите перед функцией /** и нажмите Tab .
Очень крутой автокомплит имен файлов. Можно использовать в любых атрибутах, любых тегов. Для картинок еще и показывает ширину и высоту изображения.
ColorHighlighter + GutterColor
Подсветка цветовых значений в css. Color Highliter подчеркивает сами значения цвета. А благодаря GutterColor — слева появляются кружочки с цветом(требуется установленный ImageMagick).
Колор пикер — работает по хоткею Ctrl + Shift + C.
Plain Tasks
Трекер для задач. Простенький todo-лист с красивым оформлением. Сохраняется все в текстовом формате.
MarkdownEditing
Удобное редактирование markdown-файлов, например для гитхаба.
Sidebar Enhancements
Улучшенный сайдбар.
ApplySyntax
Автоматический детектор типа файла.
SublimeGit
Полнофункциональная интеграция GIT
SidebarGit
Контексное меню GIT в сайдбаре редактора. Подойдет для тех, кто не сильно любит коммандную строку.
GitGutter
Диффы для гита. Показывает слева изменения с последнего коммита.
HTML-CSS-JS Prettify
Форматирование кода. необходим node.js. Хоткей Ctrl + Shift + H.
Inc-Dec-Value
Увеличивает\уменьшает числовые значения по Alt + стрелка вверх/вниз. Как в фаербаге или в хром девелопер тулз.
EasyMotion
Быстрое перемещение по тексту. Для любителей Vintage Mode да и не только для них, рекомендуется.
AdvancedNewFile
Быстрое создание файла. Ctrl + Alt + N. Если вы пользуетесь Evernote — то будет открывать новую запись в Evernote — не забудьте поменять хоткеи.
Sublime Text - это современный текстовый редактор с закрытым исходным кодом. Чаще всего он используется веб-разработчиками для редактирования html или php кода. Редактор имеет красивый, современный внешний вид и несколько интересных функций, таких как быстрая навигация, одновременное редактирование и ввод команд.
Несмотря на то что программа по умолчанию поставляется множеством возможностей, которые очень помогут вашей работе, всегда есть место для усовершенствования. Кроме всего прочего, здесь поддерживаются плагины, написанные на Python. В этой статье вы найдете лучшие плагины Sublime Text 3. Они подойдут также и для свободной альтернативы этой программы Lime Text. С помощью этих плагинов вы сможете очень сильно расширить возможности программы. А теперь перейдем к списку.
Наверное, это первый плагин, который вам нужно установить после установки и запуска программы. Это пакетный менеджер для Sublime Text, с помощью него вы можете устанавливать, удалять и обновлять пакеты с плагинами. Также вы можете очень просто посмотреть все установленные плагины Sublime Text 3.
2. Emmet
Плагин Emmet есть не только для Sublime. Это довольно популярная вещь. Он позволяет писать css и html код намного быстрее с помощью аббревиатур и ярлыков, которые потом разворачиваются в полноценные html теги. Например:
((h4>a)+p>img)*12
Будет создано 12 элементов заголовков, после каждого из которых идет изображение. Затем вы можете просто заполнить полученный шаблон, уже без надобности набирать теги по одному.
Это плагин для проверки ошибок в вашем коде. Он был недавно переработан и теперь включает несколько новых функций. Он не поддерживает все языки программирования, а просто создает API, затем вы можете устанавливать плагины для тех языков, которыми пользуетесь чаще всего.
4. SublimeEnhancements
Этот плагин Sublime Text 3 улучшает боковую панель редактора. Добавляет возможность создания новых файлов в текущей папке проекта, перемещение и копирование файлов и папок, поиск, обновление и многое другое.
С помощью плагина PackageResourceViewer вы можете просматривать и редактировать пакеты, которые вы устанавливаете в Sublime Text 3. Есть возможность извлечь пакет в отдельную папку, исправить там то, что нужно и вернуть в программу.
6. Git
Этот плагин интегрирует редактор Sublime Text 3 с Git. Вы сможете взаимодействовать с Git прямо из редактора, например добавлять файлы, отправлять коммиты, смотреть логи и аннотации файлов.
Этот плагин добавляет возможность открыть терминал в папке проекта прямо из Sublime Text с помощью горячей клавиши. Это очень полезно, если вам нужно выполнить какие-нибудь команды в этой папке.
CSSComb - это плагин для сортировки свойств CSS. Если вы хотите, чтобы ваш код выглядел аккуратно и был расположен в правильном порядке, этот плагин поможет вам настроить порядок свойств. Это также полезно, когда вы работаете в команде разработчиков, у каждого из которых есть свои предпочтения по написанию кода.
С помощью этого плагина вы можете проверить поддержку браузером свойств CSS или HTML элементов, которые используете. Для того чтобы это сделать просто выделите свойство CSS или элемент HTML, после этого вы будете перенаправлены на соответствующую страницу caniuse.com.
Плагин Alignment позволяет выровнять код, включая PHP, JavaScript и CSS. Это делает его аккуратным и более удобным для чтения. Пример вы можете увидеть на этом скриншоте:
С помощью этого плагина вы можете удалить ненужные пробелы, а также лишние завершающие пробелы, которые могут вызвать ошибки JavaScript.
С помощью этого плагина вы можете выбрать и добавить в Sublime Text 3 любой цвет и вашей операционной системы просто кликнув на нем мышкой. Также можно выбрать цвет из цветового круга.
13. MarkDown Editing
Несмотря на то что Sublime Text 3 позволяет просматривать и редактировать файлы с разметкой MarkDown, он открывает их как обычные текстовые файлы с очень плохим форматированием. Этот плагин поможет улучшить форматирование и добавить цвет текста в файлы, написанные с помощью Markdown.
14. FileDiffs
Плагин FileDiffs позволяет проанализировать различия между двумя файлами в Sublime Text 3. Вы можете сравнивать файлы не только между собой, но и с буфером обмена системы, а также не сохраненные и сохраненные версии одного файла.
DocBlockr позволяет создавать документацию или аннотации для кода, с помощью анализа функций, параметров, переменных, а также автоматического добавления уже доступной документации.
16. Сторонние темы
Одинаковый внешний вид каждый день со временем надоедает. Новая тема может дать вам даже новые идеи для работы. Вы можете попробовать несколько интересных тем, например:
Правильный набор плагинов может повысить эффективность работы в любом приложении. Если вы являетесь веб-разработчиком, работающим с 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. В своем блоге я писал про Sublime Text 2. Сейчас Sublime Text 3 уже вышел из альфа версии (альфа — означает — новая и крайне не стабильная версия), и перешел в бету (бета — все еще не стабильная, но уже предназначена для тестирования, после беты обычно идет официальный релиз). И я решил полностью разобраться с Sublime Text 3 (далее в тексте ST3).
Если вы собираетесь установить SublimeText3 то эта самая полная инструкция для вас. Здесь я опишу все что связано с этим редактором, а умеет он действительно многое.
Сперва я удалил из системы ST2 и все его следы. Также удалил node.js и npm который был с ним в паре. Так как я намерен заново — правильно и грамотно настроить компиляцию less, а затем и saas файлов, через sublime. Но об этом позже.
Часть 1. Установка и настройка Sublime Text 3
Скачиваем и устанавливаем Sublime Text 3
Если вы еще не в курсе, Less — это основанный на JavaScript CSS препроцессор. Это код который компилируется в CSS. Существуют разные способы компиляции less в css: Grunt , Guard , и Less.app . Однако возможно вы не хотите, или вам не нужно использовать дополнительные инструменты, и хочется все сделать прямо в редакторе кода. Ниже я привел инструкцию которая подойдет пользователям Windows (я сам делал установку по ней, и также для mac ОС.)
- Устанавливаем Node.js
- Устанавливаем NPM (устанавливается вместе с Node.js)
- Устанавливаем Less Глобально. Открываем Windows консоль и вводим npm install less -gd
- Установим плагин Less2Css и SublimeOnSaveBuild
Откроем настройки ST3: Preferences → Settings — Default, и в конец допишем строку:
"lesscCommand": "/usr/local/share/npm/bin/lessc"
Откроем любой.less файл и попробуем его собрать. Просто вносим изменения в файл, и жмем Ctrl+S.
Если возникла ошибка: Unable to interpret argument clean-css … Это произошло потому что плагин clean-css был обособлен, и не входит в пакет less. Поэтому его надо установить отдельно. Установим. Заходим в консоль и пишем:
Npm install -g less-plugin-clean-css
SASS — это другой препроцессор для CSS. Набирает популярность, и уже обгоняет less по распространению использования.
- Устанавливаем Ruby
- Запускаем консоль, и ставим Ruby Gem gem install sass
- Устанавливаем плагин Sass для Sublime Text
- Устанавливаем плагин Sass Build для Sublime Text
- Устанавливаем плагин SublimeOnSave для Sublime Text
(мы же говорили о этом плагине в инструкции выше)
Теперь добавим настройки в Sublime Text Settings – Default:
{ "filename_filter": ".(sass|scss)$", "build_on_save": 1 }
Также не забудьте при открытом.sass файле зайти и выбрать билд систему в Tools → Build System → SASS Compressed Теперь при сохранении.sass файла будет компилироваться.css.
Jade — это препроцессор для написания html кода, и подобно less или sass для css, он ускоряет и упрощает (для опытных верстальщиков) написание html разметки. Как установить и настроить его работу.
- Должен быть установлен node.js с npm (обычно идет в комлпекте с node)
- Заходим в консоль и устанавливаем jade командой npm install jade --global
- В Sublime Text устанавливаем плагин Jade Build
- В Sublime Text открываем.jade файл и выбираем Jade build system
- Если вы выполняете всю инструкцию в этом посте, то в настройках Sublime я дополню строку про Save On Build расширением jade и теперь она будет выглядеть вот так "filename_filter": ".(sass|scss|jade)$",
- Устанавливаем в Sublime плагин Jade
После этих манипуляций происходит компилирование jade файлов.
Если нет подсветки кода Jade, то идем в нижний правый угол ST, и там скорее всего написано Plain Text, кликаем по той надписи, и затем выбираем подсветку Jade. Теперь подсветка будет работать.