17 лучших плагинов для Sublime Text 2


Содержание

№2 — Подборка Sublime Text 3 плагинов для front-end

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

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

В прошлый раз, я выделил 4 моих любимых плагина:

На этот раз их шесть штук. И в этой статье, я вам хочу про них рассказать.

# 1. HTML/CSS/JS Prettify

Довольно неплохой плагин для Sublime Text 2 & 3, с помощью которого вы можете форматировать свой код на: HTML, CSS, JS в один клик или сочетание клавиш [kbd]Ctrl+Shift+H[/kbd]. На гифке выше видно, как я отформатировал 3 разных кода с помощью этого плагина. Очень удобно, когда в вашем или чужом коде творится бардак.

# 2. Git

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

# 3. Gist

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

# 4. DocBlock

Данный плагин значительно упрощает документирование вашего кода. Работает с несколькими языками программирования: JavaScript, PHP, CoffeeScript, Actionscript, C & C++. Умеет документировать не только переменные, функции, но и создавать комментарии в HTML. Кликнув на заголовок этого плагины, вы перейдете на репозиторий где есть гифки с применением всех доступных способов документации кода.

# 5. All Autocopmplete

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

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

UPD 28.04.2020: Нашел сегодня еще одну подборку плагинов для front-end разработки на GitHub

Плагины

Плагины для 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 для веб-разработчиков

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

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


Package Control

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

  1. Перейдите по ссылке https://packagecontrol.io/installation и скопируйте команду, которая будет выглядеть примерно так:
  1. Нажмите Ctrl — обратный апостроф (; `), чтобы открыть Sublime Text Console :
  1. Вставьте команду и нажмите Enter .
  1. После запуска команды вы увидите небольшое всплывающее окно с предупреждением:
  1. Нажмите « ОК ».
  2. Закройте и перезапустите Sublime Text .
  3. Нажмите Ctrl-Shift-P в Windows , чтобы открыть « Панель команд ».
  4. Введите команду Package Control , чтобы просмотреть все команды:

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

HTMLPrettify

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

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

Emmet

Это плагин раньше назывался 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

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

Готовь 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

Sublime Text 2 — краткий обзор, примеры и плагины

Как и обещал — сегодня я расскажу о красивом и удобном текстовом редакторе Sublime Text 2.

Раньше для вёрстки я пользовался двумя отличными программами notepad++ и TopStyle 5 (TopStyle и сейчас иногда пользуюсь) и меня всё полностью устраивало.
И вот однажды я увидел видео с демонстрацией текстового редактора Sublime Text 2 и решил попробовать – не понравился т.к. немного непривычно было и времени разбираться в англоязычных конфигах не было. Потом я прочитал статью в блоге у Димы Dimox`a и поставил программу ещё раз, и снова «не пошло». И только с третьей попытки я понял что это за зверь и теперь вряд ли на что-то променяю Sublime Text. Так что сразу могу сказать, что вам придётся потратить на настройку и освоение редактора некоторое время, и чем дольше вы в нём работаете, тем больше для вас будет открываться приятных мелочей и не очевидных, но очень удобных и экономящих нервы и время фишек!
Но обо всё по порядку.

Особенности редактора

Быстрый и красивый

Просто взгляните на скриншоты – ничего лишнего, только нужное.

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

Крайне гибкий в настройках

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

Лёгкая расширяемость функционала

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

Собственные горячие клавиши

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

Первый большой кусок кода – определённая расстановка фигурных скобок в CSS-файлах, я люблю, когда код выглядит каскадно:

В своё время были у нас некие разногласия относительно каскадного подхода к написанию CSS, но после того, как выяснилось, что такой код отлично сворачивается – разногласия пропали сами собой (просто попробуйте свернуть первую строку).

Второй кусок – переопределение сочетания клавиш shift+alt+w для удобного обёртывания кода в плагине emmet.
Но никто не мешает добавить/переназначить любую клавишу или сочетание клавиш радактора? достаточно проделать действия, аналогичные пользовательским настройкам.

Удобнейшее мультивыделение и полноценное мультиредактироване

Фокус в том, что если выделить количество строк, равным количеству скопированных строк — каждая строка вставится в своё место )
На первый взгляд сложно, но когда вам попадётся список из 200+ пунктов — подобный подход здорово сэкономит время )


Мгновенный, живой поиск по открытым файлам и проекту

(о проектах подробнее расскажу ниже)

На скриншоте в проекте закинута папка с DLE. Открыт один файл, не имеющий отношения к DLE. Я нажал Ctrl+P и набрал слово show — моментально открылся для просмотра (без открытия отдельной вкладки) первый файл, название которого совпало с вводимыми символами, если перемещаться по списку стрелками на клавиатуре — будут открываться для просмотра другие файлы, если нажать Enter — файл откроется в отдельной вкладке. И всё это происходит мгновенно!

Проекты

Проекты это крайне удобная фишка редактора.
Для добавления папки в проект достаточно просто перетащить нужную папку с файлами в левую колонку. Как видно на скриншоте проект представляет из себя подобие левой колонки проводника windows. Можно сохранять проект в виде специального файла и переключаться между проектами при необходимости — очень удобно, не нужно постоянно держать открытым TotalCommander с кучей вкладок и бегать туда-сюда в поисках нужного файла, достаточно открыть нужный проект и нажать Ctrl+P вписав часть имени файла.

Миникарта

Миникарта располагается в правой колонке, отображает несколько экранов кода и её можно использовать в т.ч. как скроллбар. А так же можно написать комментарий «большими буквами» с помощью плагина ASCII-Decorator и вы не потеряете нужный кусок к примеру CSS-файла.

Сниппеты – архи полезная вещь!

По началу я не предавал значения сниппетам и не совсем понимал для чего они вообще нужны, ведь есть заготовки кода, которые удобно разложены по папкам.
Теперь я открываю эти папки лишь для того, чтобы скопировать оттуда код и вставить в новый сниппет, который потом буду вызывать либо хоткеем, либо выбирать в автокомплите.
К примеру, если я набираю текст bx и жму Ctrl+Space – я вижу меню автокомплита такого содержания:

Это некоторые часто (и не очень) используемые сниппеты, которые я добавил для удобства создания шаблонов под bitrix, т.к. всё запомнить нереально, а лазить каждый раз в типовые шаблоны или документацию — лень.
При выборе нужного сниппета я получаю вот такой код:

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

Выбираем в меню Инструменты — > Новый сниппет и получаем заготовку для нового сниппета.

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

Умные закладки

Просто попробуйте выделить некий кусок текста и нажмите Ctrl+F2 — поставится закладка, потом можно править код в другом месте, а если нужно вернуться к закладке – жмите F2 и будете приятно удивлены тем, что закладка находится в том же состоянии, в котором вы её поставили, т.е. если был выделен текст — он будет в точности так же выделен.

Умное комментирование

Для каждого синтаксиса существуют свои комментарии, так вот не зависимо от синтаксиса Sublime Text правильно ставит и снимает правильные комментарии по нажатию на Ctrl+/
К примеру если в выделенном, закомментированном куске кода есть вложенный комментарий — он не будет раскомментирован при раскомментровании всего куска.

Удобное сворачивание кода

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

Волшебная кнопка

А точнее сочетание Ctrl+Shift+Pзапомните его — это сочетание даёт доступ к всевозможным командам и вообще всему что есть в ST2, достаточно начать набирать текст.
К примеру чтобы сменить подсветку синтаксиса наприме на html достаточно набрать sshtml, редактор сам подставит Set Syntax: HTML.
Порой проще нажать Ctrl+Shift+P и набрать часть нужного слова, чем искать нужный пункт меню.

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

Плагины

  • Package control — ставить в обязательном порядке, этот плагин существенно облегчает установку/удаление других плагинов.

Все, представленные ниже (как и любые другие) плагины рекомендую устанавливать через Package control (нажимаем Ctrl+Shift+P, пишем list, жмём enter или выбираем пункт «Package Control: List Packages») введя название плагина в строку поиска.

  • Emmet — наследник ZenCoding превзошедший своего прародителя! Если вы верстаете — это первый плагин, который обязателен к установке, сказать, что он облегчает жизнь верстальщика — не сказать ничего, просто потыкайте по ссылкам в документации и вы всё поймёте.
  • EncodingHelper — я поставил этот плагин для того, что бы точно знать в какой кодировке открыт файл, а то бывали небольшие фэйлы с неправильным отображением текста на сайте))
  • BracketHighlighter — подсветка парных скобок, кавычек. Делает их более заметными, что удобно когда смотришь чужой код и не только.
  • ASCII-Decorator — Превращает маленькие буквы в большие, написанные различными символами (символы и шрифт зависят от настроек).
  • Minifier — минимизация js-скриптов и CSS-файлов — полезный плагин для уменьшения их веса при сдаче проекта заказчику.
  • Tag — полезнейший плагин для управления и работы с html-тегами

  • jQuery — набор сниппетов для jquery — просто упрощает написание jQ-функций )
  • Небольшая ложка дёгтя?
    Редактор платный, но платный условно — т.е. периодически, после сохранения файла, вылезет предложение купить, но закрывается по Esc и не доставляет каких-либо неудобств и ни кто не настаивает на покупке, можно пользоваться сколько угодно бесплатно!

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

    Шпаргалка по стандартным хоткеям:

    На этом, пожалуй, закончу этот небольшой обзор.
    Задавайте вопросы, с радостью отвечу и помогу, чем смогу в освоении столь замечательного редактора.
    Если есть желающие — поделюсь собственным, уже настроенным и готовым к бою, редактором (портабельный под Windows)

    Делюсь (портабельный под Windows 32bit): ST2_portable_windows_32bit [10,59 Mb] (cкачиваний: 1175)

    Sublime Text 2 хитрости и советы (обновлено)

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

    На данный момент Sublime Text 2 доступен на большинстве платформ, включая: OS X, Linux и Windows.

    1 — Новейшие Версии

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

    Скачать дев версию Sublime 2 можно здесь.

    2 — Поставьте иконку получше

    В защиту Sublime Text 2 можно сказать, что он всё ещё находится в разработке и представляет из себя бета версию. Официальная иконка скорее всего/надеюсь изменится после официального релиза. Пока этого не произошло, Nate Beaty создала альтернативную иконку, можно воспользоваться ей, если она вас устраивает.

    Илон Маск рекомендует:  Сокеты и java


    Чтобы её добавить, необходимо заменить существующий файл «Sublime Text 2.icns» на новый. На Mac, откройте Sublime 2 в папке Applications/ , затем нажмите правой кнопкой мыши и найдите «View Package Contents». Далее, откройте Contents/Resources , и перетащите новую иконку, тем самым переписав уже существующую.

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

    3 — Работа с Command Palette

    Также как в TextMate, мы можем использовать command palette Sublime, открыв её через меню инструментов или нажав Shift + Command + P , на Mac. Если вы хотите открыть страницу Preferences или добавить сниппет, всё это можно сделать здесь.

    4 — Невероятно быстрое переключение между файлами

    Нажмите Control или Command + P , напишите имя файла, который планируете открыть с помощью ( fuzzy finder ), и, даже не нажимая Enter, вы немедленно перенесётесь к этому файлу. В то время, как Vim и приложения подобные PeepOpen предлагают похожий функционал, они не так быстры, как реализация в Sublime.

    5 — Как мы работали без Multi-Selection?

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

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

    • Нажмите Alt или Command и затем нажмите в каждом месте где требуется наличие курсора.
    • Выберете блок строчек и нажмите Shift + Command + L .
    • Разместите курсор на определённом слове и нажмите Control/Command + D , для выделения дополнительных слов.
    • В качестве альтернативы, добавьте дополнительные курсоры для всех вхождений слов и нажмите Alt+F3 на Windows, или Ctrl+Command+G на Mac. Отлично!!

    6 — Гайды индентации

    Обновлено: данная возможность теперь преустановлена в Sublime Text 2.

    Это довольно небольшая функция, но мне всегда нравилось, как Notepad++ на Windows отображает гайды индентации; страницу при этом гораздо легче форматировать и упрощает навигацию. Sublime Text 2 предоставляет такую возможность, с помощью плагина созданного Nikolaus Wittenstein.

    Для интеграции данного плагина:

    • Скачайте
    • Переименуйте папку в «Indent Guides» и переместите её в каталог Packages . На Mac, путь будет представлять из себя Application Support/Sublime Text 2/Packages

    7 — Package Control

    Шаг описанный в части (#6) немного утомителен, не правда-ли? Вместо этого можно установить замечательный Sublime Package Control, который упрощает весь процесс.

    Для установки «Package Control» откройте Sublime и нажмите Control + ` . Далее, вставьте следующий кусок кода в консоль.

    Не беспокойтесь, в случае если не понимаете код выше; просто скопируйте и вставьте!

    Ну и наконец, перезапустите Sublime Text и откройте Preferences -> Package Settings . В случае успешной установки, вы увидите Package Control в списке.

    С установленным Package Contrl, процесс добавления новых плагинов и функционала, становится невероятно простым!

    Для проверки примера, обратите внимание на следующий пункт в списке.

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

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

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

    • Нажмите Shift + Command + P
    • Напишите «Insteall», для вызова опции «Package Control: Install Package» , и нажмите Enter
    • Найдите «Alignment» и нажмите Enter для установки.
    • На этом всё; нажмите Shift + Command + A для авто-выравнивания.

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

    9 — Фанат Vim

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

    Если вы используете дев версию Sublime Text (часть #2), можно активировать Vintage мод, который предоставляет функционал команд Vi, которые мы знаем и любим — ну хорошо, некоторые из нас любят. Остальные их ненавидят! :)

    Для активации Vintage мода, откройте Preferences/Global Settings — Default . Как только файл открыт, обратите внимание на часть в самом низу и измените «ignored_packages»: [«Vintage»] на «ignored_packages»: [] . Далее, перезагрузите Sublime, нажмите Escape и вуаля: командный режим Vi!

    Блочный курсор

    Можно заметить, что в командном режиме, сложно различить курсор (особенно когда используются закладки). Не раз я замечал, что мне приходится искать место где курсор расположен.

    Хоть это и не самое лучше решение, плагин под названием «SublimeBlockCursor» призван помочь с данной проблемой.

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

    10 — Distraction Free Editing

    Иногда нам требуется отфильтровать лишнее в нашем коде. Используйте «Distraction Free Mode» для оптимизации данного процесса. Данная опция доступна в View меню. Выберете «Enter Distraction Free Mode» или используйте горячую клавишу на Mac Control + Shift + Command + F .

    11 — Вы всё ещё можете использовать Bundl’ы TextMate

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

    К примеру я работаю с замечательным шаблонизатором Slim и мне требуется подсветка синтаксиса для него. Fred Wu создал bundle для TextMate, но вдруг, он отлично работает в Sublime Text! Если вам интересно можете скачать этот bundle здесь; в него включена подсветка синтаксиса, также как и сниппеты.

    12 — Кастомные темы

    Тема по умолчанию в Sublime Text выглядит превосходно, но я предпочитаю кастомную светлую и темную тему, Soda, создана Ian Hill.

    Установка

    Взято со страницы на Github.


    «Если вы пользуетесь git, лучший способ установить тему и поддерживать её в актуальном состоянии, склонировать репозиторий сразу в директорию Packages, в место где хранятся настройки (settings) Sublime Text 2.

    Используя Git

    Откройте директорию Packages, Sublime Text 2 и склонируйте репозиторий темы, с помощью следующей команды:

    Скачать вручную

    • Скачайте файлы используя опцию .zip на Github.
    • Разархивируйте zip и переименуйте папку в Theme — Soda
    • Скопируйте папку в директорию — Sublime Text 2 Packages

    Активация темы

    Для конфигурации Sublime Text 2, чтобы он использовал тему:

    • Откройте файл настроек Preferences в Sublime Text 2: Sublime Text 2 -> Preferences -> User Global Settings
    • Добавьте (или обновите) вхождение, отвечающее за настройки темы: «theme»: «SodaLight.sublime-theme» или «theme»: «Soda Dark.sublime-theme»

    Пример глобальных настроек пользователя (User Global Settings)

    13 — Поиск и навигация по странице

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

    Функции

    Нужен быстрый способ навигации по определённым функциям?

    Нажмите Control/Command + r для открытия всплывающего окна, которое позволяет выполнить о чём мы говорили ранее (обратите внимание на символ @ )! Даже лучше, поиск представляет из себя fuzzy search, который особенно полезен для больших классов.

    Что если вы хотите перейти к определённой части кода HTML страницы — допустим, к div с классом container . Нажмите Control/Command + p , затем # , и вы сразу увидите древо документа.

    Перейти к строке под определённым номером

    Для быстрого перехода к определённому номеру строки на странице, нажмите Control + g . Вы можете заметить, опять же, как откроется всплывающее окно (которое мы видели при нажатии Control/Command + p ), после чего добавляется символ : . Адаптация Vim.

    Это значит, что в дополнение к Control + g , вы можете нажать Control/Command + p , после чего :НОМЕР_СТРОКИ .

    14 — Доступ к удалённым файлам

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

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

    Созданный Weslly Honorato, Nettuts+, Fetch решение наших проблем. Он может быть установлен через Package Control.

    Использование

    Вам понадобится лишь две команды для работы с Fetch. Сперва, нам нужно сохранить ссылки файлов. Опять же, откройте всплывающее окно для команд и найдите «Fetch.». Далее «Manage Remote Files».

    Что здорово в Sublime Text 2 — конфигурация невероятно проста. Для добавления ссылок на необходимые файлы, нам достаточно создать объект, следующим образом (не волнуйтесь: он будет добавлен, после установки):

    Тем самым, для скачивания последней версии jQuery (в случае если вас не устраивает CDN):

    15 — плагин Prefixr

    Созданный Will Bond (создатель Package Control, Nettuts+ Prefixr плагин позволяет вам автоматически добавить вендорные префиксы CSS3 для всей таблицы стилей. Тем самым, вам никогда не придётся посещать веб-сайт, самостоятельно; всего навсего нужно будет написать команду:

    . будет сконвертирован в:

    Использование

    После установки (через Package Control) выберете таблицу стилей (или один блок кода), нажмите ctrl+alt+x на Windows и Linux, или cmd+ctrl+x на OS X, и код будет автоматически обработан веб-сервисом Prefixr.

    16 — Запуск Sublime из терминала

    Sublime Text 2 включает инструменты командной строки, subl, для работы с файлами из командной строки.

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

    /bin указан в вашем пути (PATH), всё должно работать!

    Чтобы узнать больше, изучите данные инструкции.

    17 — Автоматическое форматирование HTML

    Немного странно, но возможность автоматического форматирование HTML не включена в билд Sublime Text по умолчанию. Плагин Tag, по мимо всего прочего, предоставляет решение, однако, в связи с небольшими просчётами — работа с HTML комментариями, плагин может подвести.

    Плагин Tag может быть установлен с помощью Package Control.

    Для теста авто-форматирования, возьмём следующий HTML:

    . в результате мы получим:

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


    200$ будет заплачено первому разработчику плагинов для Sublime Text, который создаст и отправит хорошо работающий «Nettuts+ HTML Formatter».

    18 — Создание плагина

    Если вы ищите приключений, исследуйте сообщество разработчиков плагинов к Sublime Text и начните вносить свой вклад. У нас есть потрясающий туториал, касательно процесса разработки ST плагина, здесь на Nettuts+. Обратите на него внимание, если вам интересно!

    Заключение

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

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

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

    Илон Маск рекомендует:  Создание таблиц excel средствами php

    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. А какими плагинами пользуетесь вы? Какие ваши любимые? Если вы знаете другие интересные плагины, напишите в комментариях!


    Usefull 4 web developers

    Все что может пригодиться web разработчикам

    Sublime Text 2: настройка, установка, плагин Package Control, тема Soda

    Статья посвящена отличному редактору Sublime Text 2. Также приведено описание основного плагина — Package Control и раскрыта причина неработоспособности опции install package плагина Package Control. В статье перечислены основные плагины (лишь малая часть) редактора Sublime Text 2, приведены настройки редактора и порядок установки темы SODA.

    Package Control

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

    Не работает Install в Package Control

    C установкой Package Control сразу же возникают проблемы: у вас не будет запускаться опция install package, если в имени пользователя windows присутствуют кириллические символы. Пути решения следующие:

    1. Сменить имя пользователя (не вариант для большинства пользователей)
    2. Использовать тестовую версию Package Control: github.com/wbond/sublime_package_control/issues/125#issuecomment-6236546

    Порядок установки тестовой версии:

    1. Находим папку sublime text 2
      В Windows 7: «C:\Users\имя_пользователя\AppData\Roaming\Sublime Text 2»
    2. Создаем папку Installed Packages
    3. Копируем тестовую версию Package Control в папку Installed Packages.
    4. Перезапускаем Sublime Text 2.
    5. Проблема с кириллицей решена, можно наслаждаться Sublime Text 2.

    Порядок установки обычной версии:

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

    1. Запустите редактор Sublime Text 2
    2. Откройте консоль редактора при помощи комбинации Ctrl +

    (клавиша Ё) и введите туда следующий текст:
    import urllib2,os; pf=’Package Control.sublime-package’; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),’wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/’+pf.replace(‘ ‘,’%20’)).read()); print ‘Please restart Sublime Text to finish installation’

  • Package Control установлен и готов к работе
  • Плагины Sublime Text 2

    Установить плагины просто: перейдите по preferences -> package control -> install package и введите слово встречающиеся в плагине. Ниже я попробую привести описание нескольких весьма полезных плагинов:

    Bracket Highlighter

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

    Ctags

    Замечательная навигация по тегам (честно говоря, подробно не разбирался).

    Encoding Helper

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

    Sublime Prefixr

    C Prefixr можно не писать префиксы для всех браузеров. Напишите один раз, нажмите Ctrl+Alt+X и Prefixr допишет все остальные правила. Удобно.

    Расширяет функционал левой колонки. Например, в колонку добавляется пункт контекстного меню Open with…, позволяющий открыть файл в сторонней программе.

    SublimeCodeIntel

    Отображает информации о функции в статусной строке, добавляет «code intelligence» и «умный autocomplete» в режиме реального времени.

    Placeholders

    Текст-рыба, Lorem Ipsum. Больше не понадобится заходить на сайт lorem ipsum, чтобы скопировать себе текст рыбу. Чтобы поставить рыбу надо перейти по Tools > Snippets.

    SublimeLinter

    Проверка синтаксиса. Умеет работать с — CoffeeScript, CSS, Java, JavaScript, Objective-J, Perl, PHP, Python, Ruby.

    Автоматическое закрытие тега.

    Sublime Alignment


    Данный плагин позволит выровнять большой и многострочный код. Комбинация клавиш по умолчанию ctrl+alt+a.

    S Format

    Плагин для форматирования Javascript кода. Комбинация клавиш по умолчанию ctrl+alt+f.

    HTML5, jQuery

    Набор снипетов для HTML5 и методов jQuery. Увидеть можно, перейдя по Tools > Snippets.

    ZenCoding

    Если вы хотите быстро писать HTML код, ставьте ZenCoding.

    Preferences.sublime-settings

    Sublime text 2 имеет множество настроек, которые установлены по умолчанию. Данные настройки можно посмотреть, перейдя по Preferences -> Settings – Default, этим вы откроете файл Preferences.sublime-settings — Default. Однако лучше всего не трогать этот файл, так как при обновлении все ваши изменения будут перезаписаны. Поэтому лучше всего все изменения вносить в специально предназначенный для этого файл Preferences -> Settings – User, Preferences.sublime-settings – User. Ниже приведены настройки, которые вы можете использовать, но не забывайте, что это лишь небольшая часть всех настроек Sublime Text 2.

    Устанавливаем тему SODA

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

    Sublime Text — плагины, их установка и настройка

    Плагины для Sublime Text это вообще отдельная тема. Их нереально много. Около 800 разработчиков регулярно пополняют репозиторий все новыми и новыми разработками!

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

    Установка Package Control производится в виде отправки запроса на сервер через консоль. Консоль вызывается нажатием Ctl+

    (Ё) и туда необходимо вставить следующий код и нажать Enter:

    Код для Sublime Text 2

    Код для Sublime Text 3

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

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

    Зайдя в раздел Install Packages я, например, хочу себе что-нибудь для CSS. Для этого ввожу в поиск слово CSS и для меня формируется список доступных плагинов по данному ключевому слову:

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

    Первый скриншот это процесс установки, где символ равенства мечется между двумя квадратными скобками: [ = ]. Это значит, что редактор проводит какие-то операции. В данном случае скачивает и подключает плагин.

    Второй скриншот — сообщение об успешной установке.

    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 необходимо дописать в пользовательских настройках плагина следующую конструкцию:

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL