Меню Рубрики

Полезные плагины sublime text 3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

источник

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

Помогает выравнивать фрагменты кода.

Если вы используете Angular для своих проектов, этот пакет сильно упростит вам жизнь в паре с плагином SublimeCodeIntel, так как SublimeCodeIntel не может автоматически заполнять имена модулей и контроллеров Angular с атрибутами ng-***.

С помощью этого пакета можно автоматически заполнять переменные модулей, контроллеров, фабрик и сервисов командой Rebuilt Search Index. Плагин также позволяет заполнять все атрибуты Angular, которые начинаются с ng-*** и фрагментов встроенных функций Angular JS, таких как $http и $filter.

AutoSemiColon автоматически завершает строки в CSS и JavaScript файлах точкой с запятой ( ; ). Если вы не хотите получать ошибку при компиляции и сжатии js-файлов и, что более важно, писать чистый код, стоит воспользоваться этим пакетом.

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

Выделяет синтаксис для файлов конфигурации Apache (.htaccess).

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

Все мы используем различные методы именования переменных, особенно, если пишем на паре (или больше) языков: PascalCaseMethod, camelCaseMethod, snake_case_method и kabab-case-method. С пакетом Case Conversion можно передавать различные методы именования с помощью одной горячей клавиши.

ColorHighlighter выделяет значения цвета. Он поддерживает hex, rgb, rgba, hsl, hsla, а также выделяет цветовые переменные Less и Sass.

Один из самых недооцененных пакетов для JavaScript-разработчиков. Он позволяет с помощью горячих клавиш добавить выделенную переменную в console.log() строкой ниже.

Данный плагин индексирует ваши .css, .less, .scss и .sass файлы, кэширует названия миксинов, переменных, классов и id и автоматически дополняет их при написании, как в html, так и в файлах стилей. Плагин также умеет индексировать файлы по заранее заданному пути при запуске Sublime Text.

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

Emmet позволяет использовать сокращения для быстрого написания кода. Например название html-элемента + tab создаст готовый блок, а просто написанный класс, вроде .container + tab превратится в

Этот пакет позволяет запускать команды Grunt в Sublime Text без окна терминала.

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

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

JQuery остается одной из самых популярных js-библиотек, поэтому, если вы используете ее в работе, этот плагин вам пригодится. Он помогает использовать сокращения и автодополнение, чтобы писать jQuery-функции быстрее.

Этот пакет добавляет функцию подсветки синтаксиса в .less-файлы. Он также автоматически дополняет встроенные функции Less, такие, как fadein, darken, desaturate, data-uri.

Этот плагин позволяет оперировать заранее заданными регулярными выражениями. Он так же имеет несколько встроенных выражений, например, для удаления html-комментариев или лишних пробелов. Он позволяет задавать и собственные регулярные выражения – к примеру, можно создать выражение, которое будет комментировать или убирать комментарии с console.log() в JavaScript-файлах.

Этот пакет добавляет функцию выделения синтаксиса в .scss и .sass файлах, а также дополняет встроенные в Sass функции, такие, как @mixin, @include и @if @else.

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

Помогает находить синтаксические ошибки в коде подсвечивая их. На данный момент поддерживаются PHP, Javascript, Java, CSS, HTML, HAML, Python, Ruby, Json, CoffeeScript, Google Closure, XML, React.js, Slim, Markdown, Go, Perl, C, C++, SQL, Twig, Bootstrap, Jade, LESS, SASS.

Предположим, вы запутались в переменных и случайно написали переменную up, там где должны были указать down и наоборот. Каким будет самый быстрый способ исправить положение? К примеру, можно заменить up на какое-то уникальное выражение, вроде «sdasdasdfk», а все вхождения down заменить на up. Затем пройти еще раз и заменить уникальное выражение «sdasdasdfk» на down.

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

источник

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 и Python, качаем и устанавливаем node.js. При установке, оставляем все по умолчанию.

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

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

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 2019 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 3. Компиляция LESS, SASS, JADE. Все необходимые плагины. Полная инструкция

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

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

Сперва я удалил из системы ST2 и все его следы. Также удалил node.js и npm который был с ним в паре. Так как я намерен заново — правильно и грамотно настроить компиляцию less, а затем и saas файлов, через sublime. Но об этом позже.

Идем на сайт Sublime Text в раздел Download, и скачиваем последнюю версию ST3, не забудьте соблюсти разрядность 64 бит, или обычную (x86) для вашей версии операционной системы. Скачали, устанавливаем. После установки запускаем — проверяем что он работает.

Открываем Preferences → Key Bindings — Default
И вверху файла добавляем строку:

Здесь указано что горячие клавиши будут alt+shift+f, и по нажатию будет происходить команда реиндент.

Возможные проблемы с настройками в Sublime Text

Если возникает проблема с сохранением или редактированием файла, то необходимо создать файл — который указан в ошибке. В моем случае это файл: C:UsersAdminAppDataRoamingSublime Text 3PackagesDefaultDefault (Windows).sublime-keymap Я создал его и сохранил по указанном пути. Теперь Preferences → Key Bindings — Default можно редактировать.

Есть аналогичная проблема с командой Preferences → Settings — Default, при открытии настроек их невозможно редактировать. Необходимо открыть, Нажать Ctrl+S, затем закрыть вкладку с настройками и открыть заново. После этого в C:UsersAdminAppDataRoamingSublime Text 3PackagesDefault должен появится файл с настройками — Preferences.sublime-settings — и настройки можно будет редактировать и сохранять.

Идем на сайт Package Control для ST3, и устанавливаем его. Package Control (PC) необходим для того чтобы расширять функциональность нашего редактора различными плагинами.

На сайте PC копируем код для ST3, в ST3 запускаем консоль (Ctrl +

) и вставляем код с сайта, жмем Enter и ждем успешной установки. После обязательно перезапускам ST3.

Проверим работу PC. Жмем Ctrl+Shift+P и набираем Package Control — Install Package. Уже набрав первые буквы — нужная строка будет автоматически подсвечена.

Sublime Text 3 — Package Control — установка плагинов

Далее я сменю стандартную тему оформления и подсветки кода на Material Design. Она тоже относится к темным темам, но имеет более яркую подсветку кода, и с ней более комфртно и приятно работать при длительном написании кода.

Идем на сайт темы Material Design и жмем кнопкe install. Происходит переход на сайт PC для ST3, понимаем что тема доступна как плагин. В ST3 запускаем Ctrl+Shift+P, выбираем install package, после ищем нужную нам тему, я набираю Material Theme и нахожу ее. Жму Enter и устанавливаю.

Sublime Text 3 — Package Control — установка темы Material Design

После этого иду в меню Preferences, и выбираю установленную тему.

Sublime Text 3 — Package Control — установка темы Material Design

Также после этого, рекомендуется зайти в настройки ST3, и дописать следующие конфиги:

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

Sublime Text 3 — тема Material Design

Я установил следующие основные плагины:

  • Emmet (ускорение написания html и css)
  • Hayaku (ускорение написания css)
  • LESS (syntax highlighting — подсветка кода less)
  • Prefixr (префиксы для CSS)
  • Placeholders (Lorem Ipsum наполнители для html файлов)
  • SFTP — плагин для работы с FTP
  • SideBarEnhancement расширяет возможность сайт бара
  • SyncedSideBar синхронизирует SideBar с открытыми файлами по клику на них
  • AdvancedNewFile создаём новые файлы и папки при помощи горячих клавиш
  • BracketHighlighter подсвечивает открытие/закрытие любого фрагмента в коде
  • jQuery набор сниппетов для jquery
  • AutoFileName автозаполнение путей к подключаемым файлам
  • CSSсomb делает код красивым
  • Gist сохранение отдельных участков кода на github прямо во время редактирования

Если вы еще не в курсе, Less — это основанный на JavaScript CSS препроцессор. Это код который компилируется в CSS. Существуют разные способы компиляции less в css: Grunt, Guard, и Less.app. Однако возможно вы не хотите, или вам не нужно использовать дополнительные инструменты, и хочется все сделать прямо в редакторе кода. Ниже я привел инструкцию которая подойдет пользователям Windows (я сам делал установку по ней, и также для mac ОС.)

  1. Устанавливаем Node.js
  2. Устанавливаем NPM (устанавливается вместе с Node.js)
  3. Устанавливаем Less Глобально. Открываем Windows консоль и вводим npm install less -gd
  4. Установим плагин Less2Css и SublimeOnSaveBuild

Откроем настройки ST3: Preferences → Settings — Default, и в конец допишем строку:

Откроем любой .less файл и попробуем его собрать. Просто вносим изменения в файл, и жмем Ctrl+S.

Если возникла ошибка: Unable to interpret argument clean-css … Это произошло потому что плагин clean-css был обособлен, и не входит в пакет less. Поэтому его надо установить отдельно. Установим. Заходим в консоль и пишем:

Опять пробуем сохранить .less файл. Произошел билд less файла, и рядом с style.less файлом у меня появился готовый минифицированный style.css

SASS — это другой препроцессор для CSS. Набирает популярность, и уже обгоняет less по распространению использования.

  • Устанавливаем Ruby
  • Запускаем консоль, и ставим Ruby Gem gem install sass
  • Устанавливаем плагин Sass для Sublime Text
  • Устанавливаем плагин Sass Build для Sublime Text
  • Устанавливаем плагин SublimeOnSave для Sublime Text
    (мы же говорили о этом плагине в инструкции выше)

Теперь добавим настройки в Sublime Text Settings – Default:

Также не забудьте при открытом .sass файле зайти и выбрать билд систему в Tools → Build System → SASS Compressed Теперь при сохранении .sass файла будет компилироваться .css.

Jade — это препроцессор для написания html кода, и подобно less или sass для css, он ускоряет и упрощает (для опытных верстальщиков) написание html разметки. Как установить и настроить его работу.

  • Должен быть установлен node.js с npm (обычно идет в комлпекте с node)
  • Заходим в консоль и устанавливаем jade командой npm install jade —global
  • В Sublime Text устанавливаем плагин Jade Build
  • В Sublime Text открываем .jade файл и выбираем Jade build system
  • Если вы выполняете всю инструкцию в этом посте, то в настройках Sublime я дополню строку про Save On Build расширением jade и теперь она будет выглядеть вот так «filename_filter»: «.(sass|scss|jade)$»,
  • Устанавливаем в Sublime плагин Jade

После этих манипуляций происходит компилирование jade файлов.

Если нет подсветки кода Jade, то идем в нижний правый угол ST, и там скорее всего написано Plain Text, кликаем по той надписи, и затем выбираем подсветку Jade. Теперь подсветка будет работать.

источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также:  Какое полезнее масло подсолнечное или кукурузное

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

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

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

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

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

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

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

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

Создание современного интернет-магазина от А до Я

Создание новостного сайта на Jekyll от А до Я

Я — фрилансер! — Руководство успешного фрилансера

источник

Твой онлайн-журнал с мира Web и Front End: Новости, статьи и гайды на русском

Сила в Саблайме. Особенно если ты фронтендер. В мире существует множество IDE для веб-разработки для каждой ОС, каждая из которых имеет свои сильные стороны — будь то HTML, CSS, Javascript или PHP, Python и так далее.

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

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

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

Готово? Нажимаем Ctrl + Shift + P (Windows) или Cmd + Shift + P (Mac) и пишет название плагина. Выбираем — ставим. Синк эбаут ит.

Sublime Text и Emmet — практически одно и то же. Расширение Emmet не служит только одной функции или цели. Это массовый инструментарий для веб-разработчиков с множеством удобных функций кодирования, дополнительных сочетаний клавиш и функций для автоматизации Вашего рабочего процесса. Это может помочь Вам управлять фрагментами кода или добавлять дополнительные функции. Например, html + tab создаст готовый каркас для html-документа, а div.wrapper + tab превратится в

Увидев обширную документацию Emmet, Вы обязательно найдете для себя кучу полезных плюшек. Нет лучшего расширения для Sublime Text, чем Emmet. Особенно для тех, кто часто пишет веб-сайты с нуля. Детальнее — на официальном сайте.

Неожиданно, но Minify позволяет быстро минимизировать(или наоборот) для CSS, JavaScript, JSON, HTML и SVG файлов. Очень удобный плагин для минимизации веса проекта и файлов без какой-либо потери функциональности. Больше деталей — здесь.

Отдельно, для работоспособности плагина нужно установить node.js и ввести команду в консоле:

Этот плагин позволит визуально выделять цвета, указанные в CSS-файлах. Вы сможете увидеть написанный цвет в режиме реального времени. Также, в Color Highlighter есть поддержка Sass, Less и Stylus, благодаря чему этот плагин становится пригодным для любых боевых условий.

Детальнее о плагине Вы можете узнать на официальной странице.

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

Этот плагин подсвечивает скобки в коде, такие как: [], (), , «», », #! Xml , что очень удобно когда нужно увидеть начало-конец ветки. Особенно эффективно сказывается на больших проектах, где один файл может содержать целую тучу веток с табами.

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

Многие из новых свойств CSS3 имеют префиксы для обработки различных механизмов рендеринга. Они в основном используются для движков WebKit, Gecko и Microsoft, которые сгруппированы в качестве «vendor prefixes». (-moz-, -webkit-,-ms-,-o-)

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

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

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

Также подписывайтесь на наш офигенный Телеграм-канал ?: постим крутые статьи, авторские мнения, новости и шутки из мира Web-разработки. Понравилась статья? Расскажи об этом друзьям!

источник

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

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

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

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

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

SublimeLinter недавно был восстановлен и отредактирован для SublimeText 3. В новой версии , конечно, установлен набор новых функций . Вместо того чтобы поместить все Linter в один пакет, разработчик позволяет вам выбрать и установить только те, которые вы используете регулярно.

У SidebarEnhancements есть несколько новых вещей в меню боковой панели, включая New File Creation (создание нового файла) в текущей папке проекта, Moving File and Folder, (Перемещение файлов и папок) , Duplicating File and Folder, (Дублирование файлов и папок) , Open in Finder and Browser, (Открыть в Finder и браузере), Refresh (Обновить) и много чего еще.

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

Этот плагин объединяет SublimeText с Git, так что вы можете запустить некоторые команды Git от SublimeText, такие как Add and Committing Files, (добавить и зафиксировать файлы) , Viewing Log, (Просмотр Входа), Annotating Files (аннотирование файлов) .

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

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

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

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

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

С помощью этого плагина вы можете выбрать и добавить цвета в SublimeText с родным цветовым механизмом из вашей операционной системы.

Несмотря на то, что SublimeText может просматривать и редактировать файлы Markdown, он рассматривает его как простой текст с очень плохим форматированием. Этот плагин полезен для придания более эффективной поддержки с надлежащим цветовым выделением для Markdown в SublimeText.

FileDiffs позволяет вам увидеть различия между двумя файлами в SublimeText . Вы можете сравнивать файлы с скопированными данными из Clipboard, File in the Project (файл в проекте), File, который в настоящее время открыт, и между сохраненными и несохраненными файлами.

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

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

Основа — коллекция фрагментов, чтобы создать рамочные компоненты Foundation 5, такие как Buttons, Tabs, и Navigation.

Bootstrap 3 – если вы предпочитаете Bootstrap, попробуйте это.

Bootstrap 3 for Jade – Этот плагин сочетает Bootstrap 3 с синтаксисом Jade.

jQuery Mobile – коллекция фрагментов для создания компонентов и макетов JQuery Mobile.

HTML5 Boilerplate – этот фрагмент позволяет предприимчиво создавать документы HTML5 Boilerplate.

Языки, которые не поддерживаются в SublimeText, могут не отображаться при правильной придаче большого значения синтаксису. Они включают в себя LESS, Sass, SCSS, Stylus и Jade, так что если вы работаете с этими языками, вот плагины для установки и поддержки синтаксиса.

источник

Человек спросил про Sublime, ему в ответ IDE. А если через FTP только доступ есть и надо файл стилей поправить, тоже запускать PHPStorm?

По теме лично я юзаю: Emmet, Git, AutoFileName, ColorPicker, Sublime SFTP

«А если через FTP только доступ есть и надо файл стилей поправить»
а контроль версий? А тестирование? Вдруг у вас верстка съедет.

Extremum: Я с такими клиентами не связываюсь. Мир у меня не идеален, и хотябы настроить реп в битбакете и повесить хук на пулы/пуши уж можно. И FTP/не FTP зависит не от среды, где вы пишите. При чем даже если затрагивать такую глупую тему, то в phpStorm работа по FTP сверх удобная.

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

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

для Java script разработки и Node js

Александр Таратин: написано же — «если всякую хрень в него не пихать»

Сабл, для «много файлов», а не для «большие файлы», та же отладка в нем — можно, но это не его.

Разным задачам — свои инструменты, правильный их выбор — свойство профессионалов.

Сабл один из самых шустрых, чтобы не тормозил на больших файлах:

— отключить миникарту
— отключить мультииндекс (в плагинах пошариться)
— ставить простые цветовые схемы
— использовать простые парсеры цветовых схем
— использовать минимум плагинов
— выкинуть нахрен плагины анализатора цветов, автосвертки, всевозможных линтов и рисовалок на гаттере

Если эту хрень впихнуть в любой другой редактор, он не то, что тормозить будет — умрет нафиг

и не забываем — сабл работает на Питоне, все Штормы — на Java, а VSCode, Atom, Brackets — NodeJS + Electron или подобная среда (читай — Хромиум), поэтому Сабл всегда будет выигрывать в скорости реакции интерфейса и отрисовки у всех, выигрывать у Штормов в обработке и проигрывать Нодовским в скорости реакции плагинов.

И еще не забываем — очень многое зависит от того, какой кривизны ручки писали плагин: если кривизна ручек выше кривизны извилин, тут не спасет никакая крутая основа.

Вот несколько из тех, которыми пользуюсь я сам:
DocBlockr — документирование кода, очень удобная штука
ESLint — без комментариев
GitGutter — подсветка изменений после последнего коммита
NodeRequirer — require-илка модулей для ноды

Если нужен дебаг для браузера — у вас есть браузер, если нужен дебаг для ноды, то есть node-inspector. Никакие vscode и прочие «IDE» никогда не сравнятся по функциональности с node-inspector.

Читайте также:  Полезен ли женский сок для мужчин

источник

Поделитесь этой страницей с друзьями:

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

Проще всего устанавливать плагины в Sublime Text 2 при помощи менеджера пакетов под названием Package Control. Как установить Package Control в Sublime и как его использовать — я подробно расписал в одной из прошлых статей.

Тот же набор плагинов актуален и для Sublime Text 3.

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

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

Ну а теперь перехожу непосредственно к обзорам.

И начнем мы с одного из самых популярных плагинов — Zen Coding (устаревший) и Emmet (сегодняшнее название для Zen Coding). Zen Coding / Emmet — это набор инструментов для текстовых редакторов (не только для Sublime), который позволяет очень значительно ускорить написание html и css кода. В первую очередь речь идет о подобии сниппетов, но не только о них. В отличие от стандартных сниппетов, при помощи Zen Coding (либо Emmet) вы можете создавать довольно сложные конструкции кода. Например, сокращение типа ul>li*8 будет развернуто в ненумерованный список (стандартный тег ul ) с 8 пунктами. И это самый простой пример, конструкции могут быть гораздо более сложными.

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

Установить плагин Zen Coding можно буквально за несколько секунд при помощи Package Control. Нажмите комбинацию Ctrl + Shift + P и в появившейся панели наберите слово install , после чего выберите появившийся пункт Package Control: Install Package . В появившейся после этого панельке наберите zencoding и нажмите Enter . Вуаля — плагин установлен.

Но Zen Coding на сегодняшний день не развивается, новые версии носят название Emmet. Не так давно этот тулкит имел нестабильный статус, но на сегодняшний день его вполне можно использовать (я использую именно Emmet). Соответствующий плагин в Sublime ставится тем же способом (см. предыдущий абзац), только при поиске естественно нужно набирать emmet .

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

Для создания вложенных тегов используется символ > , для тегов на текущем уровне — символ + , а для многократного повторения какого-то тега используется символ * . После названия тега можно указывать название класса (отделив его точкой) или id (отделив его символом # ). Например, конструкция вида:

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

При желании можно задавать тегу a значение атрибута href, также любому «двойному» тегу можно задать его содержимое в фигурных скобках. В сложных конструкциях можно использовать скобки (например, для выхода на более высокие уровни в иерархии тегов). Вот пример подобного использования:

Подобная конструкция будет развернута до вида:

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

Для быстрого переключения между редактируемыми точками используются клавиши курсора ← и → с одновременно зажатыми клавишами Ctrl + Alt . Можете поэкспериментировать и попереключаться между редактируемыми точками в примере выше, чтобы точнее понимать, о чем идет речь.

Zen Coding позволяет не указывать название для тега div , а указывать только класс или id. В этом случае автоматически подразумевается, что имеется ввиду div . Например, конструкция такого вида:

… аналогична такой конструкции:

… и будет автоматически развернута до такого вида:

Подобным же образом можно работать не только с HTML, но и с CSS-кодом, используя соответствующие сокращения для разворачивания их в полноценный CSS (тоже по нажатию на Tab ).

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

/.config/sublime-text-2/Packages/Emmet/Default (Linux).sublime-keymap . Либо же можно заглянуть в файлик README.md в той же директории, там можно помимо основных клавиатурных комбинаций получить и много других полезных сведений.

В Emmet появились некоторые полезные фишки, которые отсутствовали в Zen Coding.

Многие сокращения в Emmet стали еще короче. Например, при работе с CSS сокращение p20 будет развернуто до padding: 20px; . Точно также сокращение m40 превратится в margin: 40px; , а w100 — в width: 50px; . Подобным образом можно задавать значения не только в пикселях. Так, сокращение w80p будет развернуто до width: 80%; . Подобным же образом можно задавать множественные значения, например m10-20 превратится в margin: 10px 20px; , а m0-auto превратится в margin: 0 auto; .

Emmet также знает о вендорных префиксах в CSS, имеет встроенный генератор градиентов и «рыбы» («Lorem Ipsum» с заданным количеством слов, например сокращение lorem20 создаст «рыбу» из 20 слов). Также появился новый оператор ^ , который позволяет переходить на уровень (или несколько уровней) выше без использования скобок.

Функционал Emmet (как впрочем и Zen Coding) не ограничивается только разворачиванием сокращений. Есть также множество других полезных действий. Например, если поставить курсор в любое место тега img и нажать комбинацию Ctrl + U , то для заданного изображения будут автоматически подсчитаны и проставлены параметры width и height . Также вы можете приятно удивиться, если в css файле поставите курсор на адрес изображения и нажмете комбинацию Ctrl + ‘ . Подобных фишек довольно много, все их я перечислить в рамках одной статьи не смогу, поэтому очень рекомендую заглянуть на официальный сайт проекта Emmet за более детальной документацией.

Стандартный способ создания нового файла состоит (внезапно) из собственно создания ( Ctrl + N ) и последующего его сохранения ( Ctrl + S ). При этом на втором этапе открывается стандартное системное диалоговое окошко, в котором нужно выбрать папку и задать имя для нового файла.

Однако всю вышеописанную процедуру можно значительно упростить, используя плагин AdvancedNewFile. Установить плагин можно как обычно через Package Control: Ctrl + Shift + P → install → AdvancedNewFile → Enter .

Плагин установлен и готов к использованию. Теперь достаточно нажать комбинацию Super + Alt + N , после чего в нижней части окошка Sublime появится небольшая панелька. В этой панели достаточно ввести путь к новому файлу (обычно относительно корневой папки текущего проекта) и нажать Enter — и новый файл сохранен.

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

Если вы кликните правой кнопкой мыши по какому-то элементу на боковой панели (в дереве файлов), то обнаружите, что появляющееся при этом контекстное меню довольно скромное. Функционал этого меню можно значительно расширить, установив (опять же через Package Control) плагин SideBarEnhancements, после чего контекстное меню станет значительно богаче:

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

PlainTasks — это необычный плагин для Sublime, который позволяет использовать редактор еще и в качестве простенького менеджера задач (todo-листа).

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

После установки плагина PlainTasks в командной панели (вызываемой по Ctrl + Shift + P ) при вводе слова tasks появляется новый пункт, позволяющий создать новый список задач:

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

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

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

Задачи можно помечать как выполненные, установив на нужную задачу курсор и нажав комбинацию Ctrl + D . При этом задача помечается зеленой галочкой, подкрашивается серым цветом, автоматически помечается тегом @done , а в скобках указывается дата и время ее исполнения. Если повторно нажать комбинацию Ctrl + D , то задача возвращается к исходному виду (как другие невыполненные задачи).

Все выполненные задачи одним махом можно перенести в архив, используя комбинацию клавиш Ctrl + Shift + A .

Используя курсорные клавиши ↑ и ↓ с зажатыми Ctrl + Shift , можно перемещать вверх/вниз строку с текущей задачей (в том числе и в другой список).

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

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

Правда, для использования этого плагина придется установить дополнение в браузер (имеются дополнения для Firefox, Chrome и Safari). Ну а сам плагин LiveReload для Sublime Text 2 устанавливается как обычно через Package Control ( Ctrl + Shift + P → install → LiveReload ).

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

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

Плагин ColorHighlighter позволит вам видеть реальный цвет, соответствующий цветовому коду в CSS-файлах. Устанавливается плагин как обычно — через Package Control. Теперь при установке курсора на цветовой код он будет подсвечиваться соответствующим цветом.

Плагин ColorPicker позволит вам использовать системное диалоговое окно подбора цвета при правке CSS-стилей. После установки плагина (через Package Control) для появления диалогового окна достаточно нажать комбинацию Ctrl + Shift + P . После подбора цвета и нажатия на кнопку OK выбранный цвет автоматически подставится в то место, в котором был установлен курсор. Если же при этом курсор уже был установлен на каком-то цветовом коде, то при появлении диалогового окна этот цвет будет в него подставлен.

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

Плагин SFTP распространяется по такой же условно-бесплатной модели, как и сам Sublime Text 2. Вы можете заплатить за его использование, а можете не платить (при этом иногда при отправке файлов на удаленный сервер плагин будет напоминать о возможной покупке).

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

Напоследок рекомендую также взглянуть на другие мои статьи про Sublime Text 2, если вы этого еще не сделали:

Понравилась статья? Поделитесь ссылкой с друзьями:

источник

Источники:
  • http://sublimetext3.ru/plaginy
  • http://proglib.io/p/22-sublime-text-plugins-for-web/
  • http://intopsite.ru/sublime-text-3.html
  • http://rightblog.ru/2781
  • http://webdesign-master.ru/blog/tools/2017-03-13-sublime-text-3-setup.html
  • http://webstacker.net/drugoe/ide/must-have-plaginy-dlya-sublime-text-3-kak-stat-blatnym-frontenderom/
  • http://sitear.ru/material/17-luchshih-plaginov-dlya-sublime-text-2
  • http://toster.ru/q/345038
  • http://devmag.ru/sublime-text-2-plugins/