22 самых полезных плагина для веб-разработки в Sublime Text


Оглавление (нажмите, чтобы открыть):

10 необходимых расширений для Sublime Text

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

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

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

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

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

Плагин превращает Sublime Text в IDE со множеством настроек и функций авто-дополнения большого количества типов файлов. Плагин поддерживает большое количество языков, начиная от HTML5 и до PHP.

Расширение позволит вам вставлять макетные изображений, списки и таблице, на подобие lorem ipsum. К примеру, написав img и нажав tab, у вас появиться код со ссылкой на изображение.

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

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

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

Расширение создает резервную копию файла в папке при каждом нажатии ctrl + s. Также умеет сравнивать резервные копии файлов, как это делает команда diff в Git.

Если вам понравилась моя подборка, то подпишитесь на мой телеграмм канал @pushkproger, чтобы видеть таких постов больше!

Sublime Text 3 — удобный редактор кода для веб-разработчиков

Автор: Сергей Никонов

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

Почему Sublime Text 3

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

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

Плагины

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

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

На данный момент существует два метода установки плагинов в программу:

  1. Варварский. Достаточно просто скачать из интернета необходимый плагин и закинуть его в соответствующую папку. Но это не корректные метод из-за этого мы на нем останавливаться не будем.
  2. Через Sublime Package Control

Перед тем, как начать инсталлировать плагины нужно установить Sublime Package Control, об этом читаем тут.

Для установки плагинов нужно:

  1. открыть командную строку, нажав комбинацию клавиш: ctrl+shift+p ;
  2. в строчке вводим Install Package и жмем ентер;
  3. снизу в открывшемся поле вводим название плагина, например: emmet;
  4. нажимаем enter и ждем конца установки, там появится экран с кучей строчек;
  5. Готово.

(см инструкцию на 3 скринах)

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

Но так как основная масса людей, выбирающая этот редактор пишет на php мы все же рассмотрим несколько.

Sublime Text Emmet

Чуть ранее в примере мы установили этот плагин. Он очень сильно ускоряет разработку сайтов. Для того, что бы понять, что он делает в правом нижнем углу вместо Plain Text выберим PHP. Теперь в редакторе ставим ! и нажимаем TAB.

Еще можно ввести: .wrapper нажимаем tab, как видем у нас появился div.

Мастер Йода рекомендует:  Как раскрутить форум

Для того, что бы сделать меню на 10 ссылок можно написать следующее, после чего нажать tab: .menu>ul>li*10>a[href=#]

В левой части «!+tab» , в центральной части «.wrapper + tab», а в правой части «menu>ul>li*10>a[href=#] + tab» Думаю, что суть уловили.

Advanced New File

Позволяет создавать новые файлы. Устанавливаем плагин, открываем правый сайд бар (view – side bar –show side bar), далее нажимаем комбинацию клавиш ctrl+alt+n и пишем index.php, как видим файл создался, и это очень быстро и удобно.

Brackethighlighter

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

Заметно, что подчеркнут яркой белой линией.

Color Highlighter

Подсказывает цвет кода, то есть по умолчанию нам не ясно, какого цвета будет код #224f43, а плагин подчеркивает код тем цветом, которым он является. Более того если мы кликнем по коду, то он выделит его этим цветом.

Gotocss Declaration

Помогает найти и перейти на нужный элемент css прямо из html кода. Нужно просто правой кнопкой мыши кликнуть по элементу, к которому применяется этот стиль и выбрать Go To CSS Declaration

У нас Вы можете скачать последнюю версию текстового редактора под все ОС.

Sublime Text 3 для web разработки

Sublime Text 3 — это «продвинутый» блокнот для написания кода. Sublime Text имеет много плюсов, которые выделяют его среди других «продвинутых» блокнотов (например Notepad++). Он прост в использовании, выглядит очень стильно, имеет минималистичный интерфейс (минимум визуального шума) и кучу плагинов, расширяющих его функционал.

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

Как же настроить данный редактор под себя? А все очень просто, настройки sublime хранит в обычных текстовых файлах в меню «Preferences». Обычно файл «Settings — Default» хранит настройки по умолчанию, а «Settings — User» содержит пользовательские настройки. Механизм очень простой, просто настройки «User» перебивают настройки «Default», вот и вся магия. Сам же файл «Default» даже не пробуйте править, все равно редактор этого не позволит. За то он позволит скопировать какие-либо настройки, для того чтобы не заниматься рутинным перепечатыванием из одного файла в другой.

Ниже представлен листинг моего файла настроек.

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

Стандартные горячие клавиши меня не сильно устроили и поэтому я решил их немного подкорректировать под себя. Ниже представлен листинг моих горячих клавиш. Доступ к файлу можно получить из меню «Preferences -> Key Binding — User»

И этот файл мы немного допишем, а именно в этой статье мы сделаем 2 очень удобных макроса для console.log() и повесим их на сотетания клавишь alt+c и alt+v. А все горячие клавиши можно посмотреть тут «Preferences -> Key Binding — Default».

Важное замечание: Чтобы заработали хоткеи для навигации по файлам и миникарте, нужно сперва включить их в меню «View -> Side Bar -> Hide Side Bar» и «View -> Hide Minimap» соответственно.

Так же меня не устроила тема по умолчанию. Сильно выраженный красный цвет в коде резал мне глаза. И я решил её немгного перекрасить) В это мне помог сервис. Можно настроить любую из стандартных тем под свои вкусы. Мой вариант можно скачать по ссылке — моя тема. Далее этот файл можно сохранить и поместить в «. Sublime Text 3\Data\Packages\User», зайти в эту папку можно выбрав в меню «Preferences» первый пункт «Browse Packages», откроется проводник и в нем нужно зайти в папку «User». Потом нужно активировать нашу новую тему. Для этого в меню «Preferences -> Color scheme -> User -> /Наша новая схема/». Так же можно зайти в настройки «Preferences -> Settings — User» и прописать там вот такую настройку:

Далее нужно установить самый главный плагин в «Sublime — Package Control». Вот инструкция для его установки. Он делает установку и удаление плагинов очень удобным. Так же на этом сайте можно найти много справочной информации и кучу плагинов. Нам же нужно находясь в редакторе нажать сочетание клавиш ctrl+shift+p, что вызовет контекстное меню, в поле ввода которого нужно набрать «pac» и получить примерно такой результат.

В этом списке нас интересует пункт «Package Control: Install Package». Выбираем его и перед нами откроется список плагинов доступных для установки.

Emmet

Наверное один из самых популярных плагинов для текстовых редакторов кода. Он позволяет по нажатию клавиши «TAB» (можно изменить в настройках) превращать простые сокращения в блоки html и css кода. Что очень способствует увеличению продуктивности веб-разработчика.

BracketHighlighter

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

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

и если это Вам доставляет некоторое неудобство (как например мне), то Вы можете поправить ситуацию лишь изменив одну настройку. Отправляемся в «Preferences -> Package Settings -> BracketHighlighter -> Bracket Settings User» и прописываем там следующее (число можете ставить по вкусу) и проблема будет решена :

AutoFileName

Добавляет автозаполнение путей к файлам. Теперь не нужно запоминать длинные названия картинок. Очень удобно.

AllAutocomplete

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

ASCII-Decorator

Данный плагин по сочетанию клавиш ctrl+shift+k превращает выделенный текст из обычного в декоративный. Шрифт можно настроить с помощью файла настроек. Доступ к которому можно получить из меню «Preferences -> Package Settings -> ASCII-Decorator -> Settings — User». Вот содержимое моего файла настроек:

Им я пользуюсь по большей части для быстрому поиску по файлу с помощью minimap.

JavaScript Next

Плагин обеспечивает улучшенную подсветку синтаксиса, так же поддерживает стандарт EcmaScript 2015. Для того чтобы изменить подсветку синтаксиса, необходимо открыть файл с расширением .js и выбрать новый синтаксис: «View -> Syntax -> Open all with current extension as. -> JavascriptNext». Также в «Preferences -> Settings — User» и дописать в настройки :

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

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

Принцип работы Less в одной картинке:

Stylus

Очень продвинутый препроцессор для CSS. На ряду с LESS и Sass(SCSS). От конкурентов отличается довольно удобным и интуитивно понятным сайтом, а так же нестогим синтаксисом (можно как писать в стандартной нотации CSS, так и в нотации Sass, тоесть без лишних символов, что является предпочтительным стилем) + его полной поддержкой Emmet (за исключением некоторых неудобных моментов, но не смертельно).

Настройка Sublime Text 3 для веб-разработки: LiveReload, плагины, фишки [ТРАНСКРИБАЦИЯ]

Видео для транскрибации:

Транскрибация видео

Настройка программы-редактора текста для Фронт-Энд разработки.

Сначала скачиваем с сайта-разработчика и устанавливаем программу. При установке — обязательно ставим галочку на «Add to explore context menu».

Первым делом нужно установить поддержку плагинов, дополнительных модулей и пр. Для этого переходим на сайт Package Control.

Копируем текст из Subline Control3, затем в программе, открыв консоль (View — Show Console), вставляем скопированный код и нажимаем «Enter». После завершения этой процедуры, перегружаем программу.

Затем, используя комбинацию клавиш Ctrl+Shift+P, ищем «Install Package» и выбираем:

Первым дополнением, которое мы установим, будет Emmet (плагин для ускорения верстки) — выбираем и запускаем:

Чтобы убедиться, что все работает правильно, создайте на жестком диске файл «index.htnl», откройте его в программе, введите ! и нажимаем «Tab».

Если все верно, то плагин должен вывести:

Теперь настроим саму программу.

  • Для настройки размера шрифта — зажимаем левый Ctrl и прокручиваем колесо мыши.
  • Чтобы делать красивые отступы, нужно использовать встроенную функцию «reindent». Но для начала нужно назначить ей горячую клавишу: «Preferences» — «Key Binding».
    Для этого добавляем строку:

После применения данной опции к выделенному тексту, вы получите правильные и красивые отступы:

Нужно настроить сохранение настроек по-умолчанию. Для этого пробуем сохранить, чтобы появилось вот такое окно:

Это окно появляется, т.к. в папке, где программа сохраняет пакеты, вообще нет такой папки. И нам нужно ее создать — «Preferences» — «Browse Packages. ». Откроется окно проводника Windows, в котором, согласно пути из окна с ошибкой нужно создать недостающие папки и файл (напр., . Packages -> Default -> Default (Windows).sublime-keymap):

Но я рекомендую сначала изменить название файла (добавить любой символ в его имя). Затем опять открыть «Preferences» — «Key Binding», скопировать текст файла, закрыть его. Затем созданный файл, с добавленным символом, переименовать в правильный «Default (Windows).sublime-keymap», еще раз открыть «Preferences» — «Key Binding» (теперь файл окажется пустым), вставить в него скопированный текст и сохранить.
Вот такие «танцы с бубнами».

  • Прочие настройки — «Preferences» — «Settings»:
    • 32. «margin»: 2
    • 35. «fold_buttons»: false
    • 47. «tab_size»: 2
    • 109. «highlight_line»: true,
    • 148. «line_padding_bottom»: 1
    • 221. «auto_complete»: false (!Если вы используете Emmet)
  • Для удобной работы в 2 колонки (например, для html и CSS), нужно выбрать «View» — «Layout» — «Columns:2»:
  • Чтобы скрыть миникарту: «View» — «H >

    Установка и настройка LiveReload в Sublime Text 3

    Переходим по ссылке на GitHub и скачиваем ZIP-архив:

    Архив распаковываем в «Preferences» — «Browse Packages. »:

    Переименовываем папку в «LiveReload» и перезапускаем программу.

    Теперь нужно установить расширение для браузера. Заходим на страницу LiveReload Browser Extension и скачиваете подходящее вам расширение.

    Затем в программ заходим в настройки плагина:

    Пишем такой код и перегружаем программу: <
    «enabled_plugins»: [
    «SimpleReloadPlugin»,
    «SimpleRefresh»
    ]

    Установка и настройка SASS плагина для подсветки синтаксиса

    Используя комбинацию клавиш Ctrl+Shift+P, ищем «Install Package», выбираем «Sass» и устанавливаем его.

    Чтобы активировать, идем «View» — «Syntax» — «Open all as current extension as» — «Sass»

    Установка и настрока плагина для работы с Gist Репозиторием

    Gist — это плагин для удобного удаленного хранения часто используемых частей кода на GitHub.

    Устанавливается — Ctrl+Shift+P, ищем «Install Package», выбираем «Gist».

    После установки плагина, вам нужно в его настройках («Preferences» — «Package Settings» — «Gist» — «Settings — Default») прописать ваш Token — универсальный ключ. Чтобы получить этот ключ, нужно зарегистрироваться на GitHub.

    brackethighlighter: подсветка тегов и скобок

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

    autofilename: автокомплит для подключения внешних файлов в верстку

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

    colorhighlighter: подсветка цвета

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

    BufferScroll: сохранение позиции курсора в документе

    BufferScroll — запоминает позицию курсора и открывает документ на этой позиции. Установка вручную через скачивание на GitHub’е.

    Goto-CSS-Declaration

    Goto-CSS-Declaration — плагин для быстрого поиска соответствующего класса в CSS, SASS, LESS. Установка обычна.

    Запускается в программе: «Win+Alt+.»

    P.S. Понравилась статья? Пожалуста, понажимайте на кнопочки социальных сетей, которые расположены ниже, тем самым Вы расскажаете про эту статью Вашим друзьям!

    Похожие статьи:

    Обращение от автора этого блога,
    Исаенко Дмитрия .

    Уважаемый читатель блога VashInternetGid.ru!

    Позвольте у Вас кое-что спросить:

    У Вас Есть Хобби? А Вы Бы Хотели Узнать, Как Можно Зарабатывать На Вашем Хобби?

    Ответы на эти и другие вопросы есть в моей книге «Как из хобби сделать Бизнес», которую получит АБСОЛЮТНО БЕСПЛАТНО каждый подписчик моего блога!

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

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

    Sublime Text — это современный текстовый редактор с закрытым исходным кодом. Чаще всего он используется веб-разработчиками для редактирования html или php кода. Редактор имеет красивый, современный внешний вид и несколько интересных функций, таких как быстрая навигация, одновременное редактирование и ввод команд.

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

    1. Package Control

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

    2. Emmet

    Плагин Emmet есть не только для Sublime. Это довольно популярная вещь. Он позволяет писать css и html код намного быстрее с помощью аббревиатур и ярлыков, которые потом разворачиваются в полноценные html теги. Например:

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

    3. SublimeLinter

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

    4. SublimeEnhancements

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

    5. PackageResourceViewer

    С помощью плагина PackageResourceViewer вы можете просматривать и редактировать пакеты, которые вы устанавливаете в Sublime Text 3. Есть возможность извлечь пакет в отдельную папку, исправить там то, что нужно и вернуть в программу.

    6. Git

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

    7. Terminal

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

    8. CSSComb

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

    9. CanIUse

    С помощью этого плагина вы можете проверить поддержку браузером свойств CSS или HTML элементов, которые используете. Для того чтобы это сделать просто выделите свойство CSS или элемент HTML, после этого вы будете перенаправлены на соответствующую страницу caniuse.com.

    10. Alignment

    Плагин Alignment позволяет выровнять код, включая PHP, JavaScript и CSS. Это делает его аккуратным и более удобным для чтения. Пример вы можете увидеть на этом скриншоте:

    11. Trimmer

    С помощью этого плагина вы можете удалить ненужные пробелы, а также лишние завершающие пробелы, которые могут вызвать ошибки JavaScript.

    12. ColorPicker

    С помощью этого плагина вы можете выбрать и добавить в Sublime Text 3 любой цвет и вашей операционной системы просто кликнув на нем мышкой. Также можно выбрать цвет из цветового круга.

    13. MarkDown Editing

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

    14. FileDiffs

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

    15. DocBlockr

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

    16. Сторонние темы

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

    17. Snippets

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

    • Foundation — коллекция сниппетов для создания различных компонентов Foundation 5, таких как кнопки, рамки и навигация;
    • Bootstrap 3 — если вы используете фреймворк Bootstrap, вам пригодится этот набор;
    • JQuery Mobile — коллекция сниппетов для создания компонентов JQuery Mobile;
    • HTML5 Boilerplate — позволяет создать шаблон документа на основе HTML 5.

    Выводы

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

    Short-list “Sublime Text” плагинов для web-разработки

    При разработке сайта, не важно frontend или backend, особо важно быть продуктивным и уметь автоматизировать определенные процессы. Так как у Sublim-а очень большое сообщество, то и плагинов для него существует немало. Ниже будет перечислен список некоторых плагинов, которые я бы порекомендовал для разработки web

    С основным списком самых популярных плагинов вы можете познакомиться по этой ссылке: https://packagecontrol.io

    Emmet

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

    AutoFileName

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

    Lorem​Ipsum

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

    S >Данный плагин добавляет дополнительные команды при работе с файлами в sidebar-е. Так как в стандартном Sublime сборке данных комманд просто нет.

    One Dark Material — Theme

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

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

    Sublime Text 3 – ставим плагины PHP, Node.js, Python, Ruby, CSS.

    SublimeText 3 – продвинутый мультиплатформенный редактор кода. Он настраивается немного сложнее, чем Notepad++, но и имеет намного больше плагинов, соответственно функционал редактора можно значительно расширить.

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

    Прокачка займет немало времени, зато сэкономит в процессе работы еще больше. Тут, как говорится : лучше день потерять, зато потом за пять минут долететь Вперёд! Вот что я тебе скажу, птица… Качаем версию для нашей ОС, устанавливаем, запускаем.

    Идем в пользовательские настройки кнопок: Preferences – Key Binding, идем во вкладку User (вторая вкладка), тыкаем в нее курсор, вставляем туда:

    Эта запись добавляет горячие клавиши alt+shift+f для команды reindent – форматирования выделенного кода (выравнивания отступов).

    Далее создадим файл пользовательских настроек: Preferences – Setting – User, жмем ctrl+s, проверяем так же, через ctrl+o, должен быть файлик Preferences.sublime-settings, если нет, создаем его.

    Устанавливаем Node.js

    Для работы некоторых плагинов нам понадобиться Node.js и Python, качаем и устанавливаем node.js. При установке, оставляем все по умолчанию.

    Далее, установим необходимые библиотеки. Через меню пуск находим командную строку Node.js command promt, и поочередно вводим в ней:

    Устанавливаем Pyton

    Далее скачиваем и устанавливаем Pyton, последний релиз, ссылка типа Windows x86(или x64) web-based installer. После чего установим плагин для анализа кода, в командной строке пишем:

    Устанавливаем Package Control

    Package Control – с его помощью вы можете устанавливать, обновлять , удалять и просматривать список плагинов, которые вы установили в SublimeText. На самом деле плагины Sublime Text 3 можно просто копировать (или клонировать при помощи Git) в папку (…\AppData\Roaming\Sublime Text 3\Packages), и они будут работать. Но устанавливать через Package Control куда проще.
    Открываем наш редактор, жмем ctr+` или View > Show Console, должна появиться консоль, вводим:

    Теперь, чтобы установить или удалить плагин для Sublime Text, жмем ctr+shift+p, вводим install Package или remove Package, выбираем, пишем название плагина, выбираем его из списка, жмем Enter.

    Ставим плагины.

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

    All Autocomplete – автозаполнение с открытых вкладок.
    Каждый раз когда вы начинаете печатать, редактор анализирует набранный текст и предлагает наиболее релевантные варианты (из открытых документов) продолжения слова или функции в виде выпадающего списка. По-умолчанию функция доступна для языков программирования и для HTML, если набранное слово начинается со скобки «

    Autoprefixer – полезный плагин для Sublime Text который прописывает CSS префиксы для различных браузеров в соответствии с данными caniuse.com
    Настройки для двух последних версий браузеров:

    Apache​Conf – подсветка синтаксиса .conf, .htaccess, .htgroups, .htpasswd.

    Bootstrap 3 Snippets – автозаполнение кода Bootstrap 3 в виде выпадающего списка и по Tab.
    В настройки пользователя (Preferences – Setting – User) добавляем строку:

    Пример работы: пишем в html-файле – bs3-template: html5, жмем tab, должен появиться код стандартного шаблона html5+Bootstrap 3

    Аналоги этого плагина уже имеются для Bootstrap 4, (Bootstrap 4 Snippets и Bootstrap 4 Autocomplete) хотя пока чаще используется Bootstrap 3.

    BracketHighlighter – подсвечивает открытие/закрытие тегов и скобок в коде.

    SublimeCodeIntel– приближает возможности Sublime Text к возможностям IDE.

    Требуется библиотека C++ ,я установил себе Microsoft Visual Studio 2020 Community и от туда поставил библиотеки C++, хотя можно скачать автономную версию С++ 14.
    CodeIntel – это механизм анализа кода, который был перенесен из Open Komodo Editor в автономный пакет Python.

    Color​Helper – упрощает работу с цветами: подсветка цветовых кодов, позволяет получать доступ к избранным цветам и цветовой палитре документа. Перевод цвета в различные форматы. Легко изменить цвет без знания кода.

    Console Wrap – добавление вывода переменной в консоль по горячим клавишам ctrl+shift+q.

    CSS Format – форматирование и минификация CSS из контекстного меню.

    Emmet – наш знакомый плагин по статье про Notepad++, позволит нам писать HTML и CSS код быстрее, используя аббревиатуры / ярлыки, затем расширит их до допустимых HTML тегов. Это один из моих самых часто используемых плагинов, который экономит время. Emmet занимает топ 1 по популярности среди плагинов репозитория SublimeText. Как и в прошлый раз настоятельно советую изучить документацию.

    Goto-CSS-Declaration – позволяет находить и переходить к id и классам в открытых CSS, LESS, SASS из редактируемых html, js и PHP-файлов.

    Java​Script Enhancements – улучшенное автозаполнение JavaScript, а также множество функций по созданию, разработке и управлению Java​Script.

    jQuery – набор снипетов для jQuery. Это плагин Sublime Text, который поможет с функциями jQuery. Он имеет почти все методы jquery в виде фрагментов для автозаполнения в коде.

    j​Query​Docs – это пакет Sublime Text 3, который показывает выделенную функцию jQuery на api.jquery.com по alt+j.

    HTML5 – аналогичный набор для набор снипетов для автозаполнения HTML5 в коде.

    HTML Nest Comments – позволяет правильно комментировать код, который уже содержит комментарии по ctrl+shift+/ .

    Icon Fonts – автозаполнение для популярных шрифтов иконок, таких как Font Awesome, Glyphicons и других. ( Ctrl + Space).

    Inc-Dec-Value – плагин позволяет уменьшать и увеличивать различные значения по горячим клавишам: числа, преобразовывать друг в друга цветовые форматы hex, rgb, rgba, hsl, hsla. С помощью этого плагина в коде мы можем одним движением заменять true на false, fadeIn на fadeOut, next на prev, дни недели и так далее.

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

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

    22 самых полезных плагина для веб-разработки в Sublime Text — Библиотека программиста

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

    Комментарии (40)

    DELETED

    Кроме верстальщиков им кто-то пользуется?

    Влад Рудь

    Андрей, пишу на Lua под LOVE в нем. И python иногда

    Александр Иванов

    Андрей, те, кто умеет настраивать окружение

    Darek Missa

    Андрей, верстальщики пользуются сублимом?

    Сергей Лазарев

    Веб разработчики — не люди

    Дмитрий Гарбацевич

    Сергей, че ж ты сидишь в интернете то?)

    Сергей Лазарев

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

    Darek Missa

    Дмитрий, мамка парня заплатила за инет, пусчай седит

    Сергей Лазарев

    Darek, кажется у кого-то производственная травма

    Darek Missa

    Сергей, че так долго то, ответ гуглил?

    DELETED

    Darek, вкатывальщики повсеместно

    Darek Missa

    Андрей, то что в гугле, в уроках, тем и пользуются

    Александр Патриот

    Александр Патриот раскаты громовых молний мощьнее лазеря..и ядерной бомбы. сегодня в 7:22 Нравится · Ответить

    Серёжа Грушин

    А он есть на андроид?

    Дима Шу

    Забыли добавить плагин EasyMotion: https://github.com/tednaleid/sublime-EasyMotion

    Матвей Овинов

    Emacs все равно на порядок лучше.

    Ярослав Паламарчук

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

    Серёжа Грушин

    Ярослав, готов поспорить что реально. Это ж просто редактор кода

    Ярослав Паламарчук

    Серёжа, ну на андроид есть аналоги похуже,но саблайма нет

    Серёжа Грушин

    Ярослав, просто если планшет + клава, то вполне юзабельно получится. Пожалуй займусь этим

    Серега Крайник

    Чем он плох? Уж больно интересно.

    Ярослав Паламарчук

    Серёжа, ну может быть,тем более есть локальные сервера для разных php

    Серёжа Грушин

    Ярослав, ну да, у меня как раз он есть ) php 7

    Ярослав Паламарчук

    Серёжа, kickweb server?

    Серёжа Грушин

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

    Игорь Ардынович

    Visual Studio Code love)

    Максим Коротков

    Darek, он просто подписался на все паблики для «тру-прогеров», скачал пиратскую книжку «учим питон» 2008 года и теперь представляет, как будет писать нейросеть для гугла. Естественно веб-разработчики это тупо хэтэмээль, цсс, жопа крипт — нелюди для него.

    Darek Missa

    Максим, учить питон, мусье знает толк в извращениях

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Поиск

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

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

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

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

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

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

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

    Package Control

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

    Плагины

    Emmet

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

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

    AdvancedNewFile

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

    Bracket​Highlighter

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

    ZenTabs

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

    SublimeLinter

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

    Gutter Color

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

    Plain Tasks

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

    Live Reload

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

    Emmet Livestyle

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

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

    CSScomb

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

    GitGutter

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

    Comment-Snippets

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

    AutoFileName

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

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

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

    Настройки

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

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

    Настройки

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

    Настройки

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

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

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

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

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

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

    Сниппеты

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

    Проекты

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

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

    Статьи

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

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

    Статьи

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

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

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

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

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

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

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

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

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

    На этом все!

    Занудствовал для вас Андрей Алексеев.
    Пожелания, предложения: vk / e-mail

    Мастер Йода рекомендует:  Использование плагина Selector-Query для создания адаптивного дизайна Javascript
    Добавить комментарий