Как подключить js к html sublime text

Обновлено: 07.07.2024

JavaScript редактор Sublime Text 3: где скачать Sublime Text 3 и как его настроить

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

Возможности JavaScript редактора Sublime Text 3

Я уже писал про Sublime Text 2 в восторженных тонах, теперь поговорим про Sublime Text 3, который, впрочем, внешне ничем не отличается от своего предшественника, но заметно быстрее, надежнее и гибче. В отличии от CSS редактора Brackets, Sublime Text 3 «не страдает» болезнью, связанной с большим количеством плагинов или мне так кажется, поскольку у меня плагинов не так много.

Теперь мне стоит немного объясниться с тем, почему я написал: JavaScript редактор Sublime Text 3. Нет, понятно, что Sublime Text 3 прекрасный редактор, который стоит своих денег, не совсем понятно, почему JavaScript редактор. Дело всё в том, что для Sublime Text 3 написано столько плагинов для JavaScript разработчиков, что это нельзя не замечать. Хотя Sublime используется и для верстки макетов, и для серверного программирования, например, на PHP, да и вообще поддерживает различные синтаксисы.

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

Но это еще не всё, помимо прекрасного внешнего вида, плагинов и гибкого редактирования, JavaScript редактор Sublime Text 3 имеет так называемые сниппеты. Грубо говоря, сниппет это заготовка кода (шаблон кода), которая будет автоматически подставлена в редактируемый файл при вводе определенной последовательности символов. Не стоит путать сниппеты Sublime Text 3 с плагином Emmet. Как минимум, потому, что шаблон сниппета может быть написан на любом языке.

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

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

Где скачать Sublime Text 3. Установка Sublime Text 3 на Windows

Обратите внимание, что на сайте два раздела: в одном вы скачиваете Sublime Text 3, в другом разделе вы его оплачиваете, так как Sublime Text 3 не является бесплатным редактором и стоит он 70$. Установку Sublime Text 3 на Windows я не буду описывать подробно, так как у программы есть инсталлер, запустив который, вы его успешно установите. Установка Sublime Text 3 на Windows не требует каких-либо сторонних библиотек и расширений.

Почему Sublime Text 3 не является бесплатным редактором

Я хочу заметить, что Sublime Text 3 не является бесплатным редактором. Он стоит денег и цена ему 70 вечно зеленых купюр. В принципе, для нашей страны – это неплохие деньги, для США – это не так уж и много. Sublime Text 3 не имеет никакой защиты от нелегального использования за исключением ненавязчивого окна с предложением купить лицензионную копию, которое периодически всплывает.

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

Интерфейс редактора Sublime Text 3

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

Интерфейс редактора Sublime Text 3

Начнем по порядку: вкладка «File» позволяет вам управлять файлами редактора Sublime Text 3. В принципе, ничего особенного или выдающегося в этой вкладке нет и что-то выделить я не могу. Но что мне действительно нравится так это то, что есть карта кода.

Работа с файлами в JavaScript редакторе Sublime Text 3

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

Карта кода в JavaScript редакторе Sublime Text 3

Вторая вкладка «Edit» отвечает за быстрое редактирование кода. Все элементы данной вкладки содержат подсказки в виде горячих клавиш Sublime Text 3.

Быстрое редактирование в JavaScript редакторе Sublime Text 3

Запоминайте горячие клавиши и эффект, который они дают, тогда рутинная работа по редактированию и форматированию кода станет намного легче и быстрее. Следующая вкладка «Selection», данная вкладка позволяет выделять строки и слова в рассматриваемом JavaScript редакторе.

Быстрое выделение кода в JavaScript редакторе Sublime Text 3

Прошу сильно не удивляться, но выделение в Sublime Text 3 может быть разным, выделять можно по-разному и это значительно упрощает процесс редактирования кода. Следующая вкладка – «Find». Поиск в Sublime Text 3 тоже можно осуществлять по-разному.

Поиск в редакторе Sublime Text 3

Поиск может быть осуществлен, как по открытому файлу, так и по группе файлов, которые вы укажете Sublime Text 3. Еще можно делать поиск по шаблону и кучу других поисков, в общем, экспериментируйте с поиском, реализованным в этом JavaScript редакторе. Вкладка «View» отвечает за настройки внешнего вида в Sublime Text 3.

Настройки внешнего вида в Sublime Text 3

Про эту вкладку мы поговорим несколько подробнее ниже, сейчас же отметим, что здесь есть пункт «Syntax», который позволяет выбрать подсветку синтаксиса файла, с которым вы работаете. Вкладка «Goto» или вкладка быстрого перехода. Данная вкладка позволяет быстро перемещаться по документу, открытому на редактирования в Sublime Text 3.

Вкладка быстрого перехода в Sublime Text 3

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

Вкладка «Tools» в JavaScript редакторе Sublime Text 3

Вкладка Project позволяет управлять проектами в JavaScript редакторе Sublime Text 3. Сказать тут больше особо нечего.

Вкладка управления проектами в JavaScript редакторе Sublime Text 3

Вкладка «Preference» позволяет настроить внешний вид JavaScript редактора Sublime Text 3, об этом мы поговорим чуть ниже.

Вкладка настроек JavaScript редактора Sublime Text 3

Внешний вид редактора Sublime Text 3. Настройка Sublime Text 3

Внешний вид редактора Sublime Text 3 очень стильный и приятный, но дело не только в этом, Sublime Text 3 очень отзывчивый и не тормозит, ничего здесь не происходит рывками, всё реализовано плавно, без задержек, раздражающих подергиваний и зависаний. За настройку внешнего вида JavaScript редактора Sublime Text 3 отвечают две вкладки: View и Preference. Начнем с вкладки View:

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

Во вкладке Preference есть два интересных для нас пункта: Font и Color Scheme. Первый позволяет управлять шрифтами JavaScript редактора Sublime Text 3, второй пункт позволяет изменить тему Sublime Text 3.

Собственно, на этом мы можем завершить рассказ о настройке внешнего вида JavaScript редактора Sublime Text 3

Расширение возможностей JavaScript редактора Sublime Text 3

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

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

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

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

Мы с нуля настроем его внешний вид, а также применим плагины AutoFileName, BracketHighliter, ColorHighliter, Emmet, GotoCSSDeclaration и Tag, которые существенно помогут нам при верстке сайтов! Ну что ж, от слов к делу!

Внешний вид программы

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

Боковая панель

Для отображения панели переходим View – Side Bar – Show Open Files. В этой панели будут отображаться наши проекты, то есть папки и файлы нашей верстки. Для наглядности сейчас добавлю один из них. Все что там нужно сделать — это просто перетащить папку с проектом на нашу панель.

Цветовая схема

Далее настраиваю цветовую схему программы и кода, для наглядности открою любой файл, например, с HTML кодом. Для этого два раза кликаю на нужном файле. Теперь перехожу Preferences – Color Scheme, открывается окошко с установленными цветовыми решениями и при выборе той или иной темы внешний вид нашего кода и сама программа будут меняться.

Лично мне не подходит ни один из предустановленных вариантов, поэтому я устанавливаю дополнительную цветовую схему. Огромное их количество можно найти и ознакомиться на сайте с дополнениями к Sublime packagecontrol.io. Я уже знаю какую именно я схему хочу установить, что сейчас и сделаю.

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

Для этого опять вызываю Command Palette зажимая Ctrl+Shift+P, в поле поиска опять ввожу install пока не увижу пункт Package Control: Install Package (установить пакет дополнения) нажимаю на него. Немного подождав вижу окно со списком всех доступных дополнений к Sublime. Ну, почти всех.

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

Общий вид программы мне больше нравится темный, поэтому перехожу Preferences – Theme, и переключаюсь на Adaptive.sublime-theme

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

Дополнительные настройки

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

Поясню каждую настройку.

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

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

Если ты вдруг размер изменил случайно, то сбросить его можно перейдя в Preferences – Font — Reset

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

Лично я отключаю их (false) по двум причинам. Первая — я уже не новичок и без них неплохо справляюсь, вторая причина — это следующая настройка.

Отображает невидимые табуляции и пробелы. То есть это не часть кода, а просто разметка для удобства работы. И вот, если включить и draw_indent_guides и draw_white_space то получатеся кашица которая лично меня напрягает. Что из этого использовать, а что нет — решать тебе.

Размер ширины линии отступа при нажатии Tab. Лично мне нравится 3й размер :)

Например мы работали работали, а потом неожиданно закрыли программу :) Бывает такое? У меня постоянно, так вот эта настройка включает «память» у Sublime и при следующем открытии программы откроются и все последние файлы. И да, память работает и после перезагрузки компа.

Разделение рабочего окна

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

Поскольку практически всегда приходится работать с несколькими разными файлами, например index.html style.css и какой-то js файл, то дополнительным удобством будет разделение окна с кодом на секторы. Варинтов несколько. Переходим в View – Layout и смотрим что тут у нас есть.

Соответственно Single – это вид без разделений как сейчас, Columns: 2, 3, 4 это разбивка по вертикали. Например нажав на Columns: 2 наш экран с кодом разделится пополам, и мы можем часть файлов переместить в пустую колонку, например CSS слева HTML и JS справа, что делает работу более наглядной и быстрой.

Так же у нас есть варианты поделить экран по горизонтали это Rows: 2 и Rows: 3, нажав например на Rows: 3 получим три горизонтальных окна и можно перекинуть JS файл в третье окно. И последний вариант это Grid: 4 который делит экран пополам как по горизонтали, так и по вертикали. В результате получаются четыре окна. Обрати внимание, что переключаться между режимами можно и с помощью горячих клавиш Alt+Shift+ соответствующая цифра.

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

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

Конечной настройкой внешнего вида будет настройка подсветки синтаксиса. Слово страшное, однако на деле все просто.

Подсветки синтаксиса – это особое окрашивание цветом того или иного елемента в коде. Например, в этой цветовой схеме в HTML файле краcным выделен тег, зеленым — название класса, белым — текст и так далее. Это делает восприятие кода намного понятнее. Обрати внимание на правый нижний угол окна программы, в зависимости от того как кой файл у нас сейчас активен, CSS HTML JS и так далее происходит переключение отображения кода этого конкретного файла.

Зачем же тут что-то делать если все и так отлично работает? Дело в том что в начальном пакете Sublime установлены пакеты подсветки синтаксиса далеко не для всех форматов.

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

Так вот, в таких случаях я дополнительно устанавливаю нужный пакет.

Открываем наш привычный Commаnd Palette перейдя Tools – Command Palette, либо нажимаем Ctrl+Shift+P набираем install, жмем Install Package Control и ищем дополнение SCSS. Нажимаем на него, после установки мы можем переключить наше отображение на SCSS. Сейчас все выглядит симпатичнее, не так ли?

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

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

Плагины

AutoFileName

Дело в том, что в процессе верстки часто приходится подключать различные картинки. Этот плагин в разы облегчает процесс подключения. Установим его. Нажимаем Ctrl+Shift+P далее Install Package Control ищем AutoFileName устанавливаем. Попробуем подключить картинку сейчас. Сразу замечаем появление выпадающего меню со списком локальных файлов. Переходим в нужную папку с картинками и видим тут нужный нам файл, а также его размеры, что тоже пригодится.

BracketHighliter

ColorHighliter

Обрати внимание на этот код — это код цвета, но какого именно непонятно.

Великий и могучий Emmet

Итак, что же умеет Emmet?

Перейдем в HTML файл и попробуем записать тег div с классом .block, для этого нам теперь достаточно поставить точку, написать "block" и нажать клавишу Tab. Мы получим:

Чтобы сделать более сложную запись, например в тег div с классом .block вставить тег span используем следующую запись:

Жмем клавишу Tab и получаем:

Но и это еще не все, мы можем создавать свои сниппеты, то есть шаблоны/заготовки.
Для этого перейдем Preferences – Package Settings – Emmet – Settings User. Здесь запишем следующее:

Теперь для того чтобы вызвать запись:

нам достаточно написать bl и нажать клавишу Tab

GotoCSSDeclaration

Плагин поможет нам с навигацией в коде. Устанавливаем ровно так же как и предыдущие плагины. Далее назначим горячие клавиши для работы с плагином для этого переходим Preferences – Key Bindings, и пишем следующий код

Где ["ctrl+1"] это и есть нужное сочетание клавиш. Сохраняем Cntr+S.
И вот как это работает. У нас должен быть открыт CSS и HTML файлы. CSS как правило очень большой и найти что-то быстро сложно, но это в прошлом. Например, нам нужно изменить CSS для класса content-mainpage кликаем на него мышкой и нажимаем ctrl+1. Вуаля, мы в нужном месте CSS файла.

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

Зовут его Tag и установить нам придется его вручную. По этой ссылке можно скачать архив с плагином. Далее распаковываем в особую папку программы. Для Windows 10 это C:\Users\[Подставь свое имя пользователя]\AppData\Roaming\Sublime Text 3\Packages. Далее закрываем Sublime и открываем снова и добавляем горячие клавиши открыв Preferences – Key Bindings и дописав следующее:

Где ctrl+` это и есть наше сочетание клавиш.

Итак, для чего же мы проделали весь этот нелегкий путь? Как правило, в процессе написания, кода мы работаем сначала с HTML потом переносим названия классов в CSS и работаем уже там. Так вот этот перенос делать вручную давольно долго. И тут нам на помощь приходит плагин Tag. Сейчас нам достаточно выделить нужный HTML код, нажать наше сочетание клавиш ctrl+`

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

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

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

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

Установка Package Control в 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 файлах.
terminus - плагин встроенного терминала Sublime Text.
W3CValidators - мощный набор валидаторов для HTML разметки, CSS, SVG и т.д.

Установка внешнего оформления 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.

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

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

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

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

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

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

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

"C:\Users\\AppData\Roaming\Sublime Text 3"
в потаенное резервное место на вашем диске или на флешку, а затем разместить у другого юзера или на другом компьютере в этой-же директории под пользователем.

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

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

В этой статье мы рассмотрим самые необходимые Sublime text 3 плагины которые помогут вам в работе. Первым делом нам необходимо установить Package Control (пакетный менеджер). Я описывал подробно этот процесс, а так же как установить плагины в прошлой статье о sublime.

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

Sublime text 3 плагин для форматирования кода HTML-CSS-JS Prettify

Часто во время работы мы не следим за правильным форматированием кода. Этот пакет, позволяет вам форматировать HTML, CSS, JavaScript код и JSON файлы. Устанавливается он как и все плагины. Вызовите Command Palette наберите prettify, выберите HTML-CSS-JS Prettify. Нет необходимости проводить настройку, сразу можно использовать.

Вариант 1. Выделяем код и нажимаем правой кнопкой мыши на нем, так же можно просто кликнуть по вкладке редактора и выбираем HTML/CSS/JS Prettify → Prettify Code
Вариант 2. Откройте файл с кодом, запустите консоль Sublime через меню View → Show Console и наберите view.run_command("htmlprettify") .
Вариант 3. Так же для быстрого форматирования можете использовать горячие клавиши Ctr + Shift + H

Emmet быстрое написание кода.

Как работает плагин Emmet?

Приведу пару примеров. Например при написании в редакторе ul без <> и нажатия Tab будет автоматически развернут полный список. Если мы хотим добавить еще элементы li пишем так ul>li

Таким же методом можно написать div.my-class для назначения класса элементу.

Для первоначального создания страницы достаточно добавить ! и нажать Tab.

Sublime Text 3 плагины для проверки кода

Плагин Sublime Linter

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

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

Плагин ESLint для javascript

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

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

Чтобы им воспользоваться нужно установить его через npm глобально с помощью команды npm install -g eslint для работы npm требуется установить Node.js.

Далее создаем конфигурационный файл с правилами .eslintrc и кладем его в С:\User\username\.eslintrc ,
username заменяем на ваше имя пользователя.

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

Следующее действие это установка ESLint в Sublime Text. Установка происходит аналогично другим плагинам через Command Palette. В поле поиска плагинов печатаем eslint, в списке который появился вы должны увидеть SublimeLinter-contrib-eslint используйте клавиатуру или мышь чтобы выбрать его.

Плагин PHP CodeSniffer

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

Для установки Code Sniffer у Вас уже должен быть установлен PHP и Composer пакетный менеджер, как установить Composer вы можете прочитать на официальном сайте.

Перед началом установки нужно убедиться, что в системную переменную PATH был добавлен composer, значение переменной по умолчанию должно быть

Для установки через Composer используем команду:

composer global require "squizlabs/php_codesniffer=*"

Далее необходимо установить стандарт кодирования, в нашем случае это будет WordPress Coding Standards, для установки снова используем команду Composer:

composer create-project wp-coding-standards/wpcs --no-dev

Для работы PHP Code Beautifier and Fixer необходимо прописать в переменную path путь к файлу phpcbf.bat который лежит в your_path_to_wpcs\vendor\bin\

Для запуска в Command Palette пишем fixer из списка выбираем PHP Сoding Standards Fixer: Fix this file (PHP Code Beautifier).

Это основные Sublime text 3 плагины которые я рекомендую вам установить, конечно это не окончательный список, количество плагинов зависит от ваших потребностей и предпочтений. А какие вы используете? Напишите в комментариях.

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

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

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

Package Control Sublime Text 3

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

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

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

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

HTMLPrettify

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

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

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

Emmet Sublime Text 3

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

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

После установки Emmet с помощью Sublime Text Package Control перезапустите Sublime Text .
Чтобы Emmet работал, необходимо установить синтаксис для документа. Иначе он работать не будет:

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

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

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

BracketHighlighter

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

JQuery

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

Case Conversion

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

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

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

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

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

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

Пожалуйста, опубликуйте свои комментарии по текущей теме материала. За комментарии, подписки, отклики, дизлайки, лайки огромное вам спасибо!

Читайте также: