Sublime text 3 плагины html. Лучшие плагины для Sublime Text
Привет, друзья! По многочисленным просьбам обновил руководство по быстрой настройке редактора кода 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 из репозитория пакетов.
Установка плагинов в Sublime Text
Далее необходимо установить нужные для работы плагины. Мы рассмотрим установку самых популярных среди верстальщиков плагины, которые значительно упрощают разработку. Вы также можете поэкспериментировать с другими плагинами в Package Control, может быть вам понравятся и другие из огромного количества доступных пакетов.
Для установки плагинов в Sublime Text через Package Control необходимо вызвать меню, как мы это делали ранее: Ctrl+Shift+P. Затем вводим команду "Install Package" и выбираем нужный пакет из списка.
Самые популярные плагины для Sublime Text:
- Emmet - ускоряет написание HTML и CSS кода до скорости света. Урок по Emmet ;
- AutoFileName - дополняет код при написании путей до файлов в вёрстке;
- Gist - подключает в Sublime Text возможность использовать сервис сниппетов кода GitHub Gist. Урок по Gist ;
- Sass - плагин для подсветки Sass синтаксиса в Sass и Scss файлах. Раскрывает Emmet в Sass файлах.
Установка внешнего оформления Sublime Text
Мне очень нравится тема оформления One Dark Material Theme и подсветка кода соответствующей цветовой гаммой. Это наиболее сбалансированные, достаточно контрастные, но не слишком резкие цвета для комфортной работы в редакторе.
Дя установки цветового оформления One Dark нам необходимо доустановить следующие пакеты через Package Control:
- One Dark Color Scheme - цветовая схема для подсветки кода;
- One Dark Material - Theme - тема оформления UI Sublime Text.
Установка плагина вручную
Некоторые плагины более не обновляются в Package Control или просто там не фигурируют. Кое-какие из этих плагинов имеют жизненную необходимость при работе с кодом и их приходится устанавливать вручную.
Один из таких плагинов BufferScroll - потрясающий плагин, который при повторном открытии документа устанавливает курсор на том месте, на котором вы закончили редактирование в прошлый раз, тем самым сокращая время на поиск нужной позиции для продолжения работы.
Для установки BufferScroll вручную, перейдите на GitHub страницу плагина , скачайте и распакуйте его в любое удобное место на вашем диске. Далее в Sublime Text выбираем пункт меню Preferences > Browse Packeges. Откроется папка пользовательских данных на вашем диске. Скопируйте сюда папку, содержащую файлы Buffer Scroll и перезапуститие Sublime Text. Теперь плагин работает.
Тонкая настройка редактора, пресет моих настроек
Переходим к настройкам Sublime Text.
На Github Gist лежит мой пресет настроек, который я всегда использую для стартовой настройки редактора Sublime Text на новом рабочем месте или после переустановки системы. Вы можете использовать данный пресет в вашем редакторе и кастомизировать его при необходимости.
Код пресета для пользовательских настроек (Preferences.sublime-settings | Preferences > Settings):
{ "show_definitions": false, "auto_complete": false, "bold_folder_labels": true, "color_scheme": "Packages/One Dark Material - Theme/schemes/OneDark.tmTheme", "fold_buttons": false, "font_size": 13, "highlight_line": true, "indent_guide_options": [ "draw_normal", "draw_active" ], "line_padding_bottom": 2, "line_padding_top": 2, "margin": 2, "material_theme_compact_sidebar": true, "material_theme_compact_panel": true, "material_theme_small_statusbar": true, "material_theme_small_tab": true, "tab_size": 2, "theme": "OneDarkMaterial.sublime-theme", "word_wrap": "false", }
Код пресета для пользовательских клавиатурных сокращений (Default (Windows).sublime-keymap | Preferences > Key Bindings):
[ { "keys": ["alt+shift+f"], "command": "reindent" }, ]
Теперь при выделении и по нажатию Alt+Shift+F ваш код будет автоматически выравниваться отступами с соответствующей иерархией вложенности элементов.
Разместив данные сниппеты в соответствующих файлах настроек вы получите полностью готовый к рабое, настроенный Sublime Text или можете настроить редактор под себя. В настройках есть два поля - левое с дефолтными настройками и правое с пользовательскими. В дефолтных настройках вы можете увидеть подсказки к каждому свойству и применить его в правой части скопировав и установив своё значение.
Узнать какое свойство за что отвечает довольно просто - все свойства имеют интуитивно понятные наименования на английском языке. Любое свойство из большого обилия доступных настроек можно просто перевести на русский язык и понять, что оно означает.
Для того, чтобы сделать бэкап всех ваших настроек и быстро развернуть Sublime Text на другом рабочем месте, достаточно скопировать папку
"C:\Users\{Ваш пользователь}\AppData\Roaming\Sublime Text 3"
в потаённое резервное место на вашем диске или на флешку, а затем разместить у другого юзера или на другом компьютере в этой-же директории под пользователем.
Также дополнительно на ваше усмотрение можно отключить миникарту справа и скрыть меню. Это можно сделать перейдя в меню View > Hide Minimap и View > Hide Menu. Показать меню можно нажатием клавишы Ctrl на клавиатуре.
Сегодня я решил перейти со старого сублайма на Sublime Text 3. В этом посте я хочу зафиксировать список используемых мной плагинов и заодно расскажу немного о них. Например о таких, которые делают клевую подсветку значений цвета:)
Для удобной установки плагинов необходимо поставить Package Control. Для этого открываем консоль в редакторе(Ctrl + `) и вводим следующую команду:
Import urllib.request,os,hashlib; h = "eb2297e1a458f27d836c04bb0cbaf282" + "d0e7a3098092775ccb37ca9d6b2e4b7d"; pf = "Package Control.sublime-package"; ipp = sublime.installed_packages_path(); urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler())); by = urllib.request.urlopen("http://packagecontrol.io/" + pf.replace(" ", "%20")).read(); dh = hashlib.sha256(by).hexdigest(); print("Error validating download (got %s instead of %s), please try manual install" % (dh, h)) if dh != h else open(os.path.join(ipp, pf), "wb").write(by)
После чего перезапускаем редактор. Хочу заметить что новая версия запускается еще быстрее старой. Теперь для установки плагинов нажимаем Ctrl + Shift + P и выбираем Package Control: Install Package . Там выбираем плагин и жмем Enter.
Плагины
Emmet
Думаю в представлении не нуждается. Это плагин для быстрого набора html и css-кода.
Local History
Удобный плагин для просмотра истории изменения файлов.
Encoding Helper
Отображает в статусной строке кодировку файла, а также позволяет открывать и сохранять файлы в различных кодировках.
SublimeCodeIntel
Умный автокомплит, имеется возможность перепрыгивать к definitions при помощи Alt + Click.
SublimeREPL
Интерпретатор различных языков. Например Python, NodeJS и другие
DocBlockr
Удобная вставка JSDocs, парсит параметры функций. Введите перед функцией /** и нажмите Tab .
Очень крутой автокомплит имен файлов. Можно использовать в любых атрибутах, любых тегов. Для картинок еще и показывает ширину и высоту изображения.
ColorHighlighter + GutterColor
Подсветка цветовых значений в css. Color Highliter подчеркивает сами значения цвета. А благодаря GutterColor — слева появляются кружочки с цветом(требуется установленный ImageMagick).
Колор пикер — работает по хоткею Ctrl + Shift + C.
Plain Tasks
Трекер для задач. Простенький todo-лист с красивым оформлением. Сохраняется все в текстовом формате.
MarkdownEditing
Удобное редактирование markdown-файлов, например для гитхаба.
Sidebar Enhancements
Улучшенный сайдбар.
ApplySyntax
Автоматический детектор типа файла.
SublimeGit
Полнофункциональная интеграция GIT
SidebarGit
Контексное меню GIT в сайдбаре редактора. Подойдет для тех, кто не сильно любит коммандную строку.
GitGutter
Диффы для гита. Показывает слева изменения с последнего коммита.
HTML-CSS-JS Prettify
Форматирование кода. необходим node.js. Хоткей Ctrl + Shift + H.
Inc-Dec-Value
Увеличивает\уменьшает числовые значения по Alt + стрелка вверх/вниз. Как в фаербаге или в хром девелопер тулз.
EasyMotion
Быстрое перемещение по тексту. Для любителей Vintage Mode да и не только для них, рекомендуется.
AdvancedNewFile
Быстрое создание файла. Ctrl + Alt + N. Если вы пользуетесь Evernote — то будет открывать новую запись в Evernote — не забудьте поменять хоткеи.
Еще несколько лет назад я был фанатом TextMate. Следуя заветам Томаса и Ханта , в этом редакторе я делал практически все, включая даже чтение манов . В то время Sublime Text лишь набирал популярность, и, в какой-то момент, я решил его попробовать. В те времена с TextMate 2 творились странные вещи - эта версия, в течение нескольких лет все еще была в альфе, и, похоже, не собиралась оттуда выходить. Позднее, правда, TextMate стал опенсорсным, и разработка какое-то время шла более активно, но я уже был далеко.
С тех пор мои интересы немного изменились, и экспериментам с воркфлоу я начал предпочитать написание кода. Воркфлоу, соответствующим образом скатился в сторону здорового функционализма. В последнее время активных изменений там практически не происходит - в основном, обновления касаются сниппетов и подсветки языков. Остальное, видимо, мне в самый раз приходится.
Запуск Sublime Text из консоли
В Mac OS открыть любой файл или директорию из консоли в sublime можно так:
open -a "Sublime Text" . sudo open -a "Sublime Text" /etc/hosts
Для большего комфорта лучше использовать консольную утилиту, которая идет вкупе с Sublime Text . Устанавливается она так:
ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /usr/local/bin/sublime
Кроме того, я сразу добавляю пару строк в.zshrc:
alias s="sublime" # теперь можно набирать `s .` вместо `sublime .` export EDITOR="subl -w" # а так git commit будет открывать sublime вместо vi
Тема
Практически во всех редакторах, с которыми я работаю, я использую тему Birds of Paradise . Sublime не стал исключением, благо он умеет импортировать темы из TextMate.
Линтинг
Для линтинга JavaScript я использую jshint . Для того, чтобы заставить его работать в sublime text 3 , я использую комбинацию из двух плагинов:
- SublimeLinter - движок для большого количества различных линтеров;
- SublimeLinter-jshint - собственно, сам линтер.
Мой.jshintrc выглядит так (в основном я пишу под nodejs) :
{ "browser": false, "curly": true, "expr": true, "indent": false, "jquery": false, "laxcomma": true, "laxbreak": true, "maxcomplexity": 10, "maxdepth": 3, "maxparams": 4, "node": true, "trailing": true, "quotmark": "single", "strict": true, "undef": true }
Описание опций можно узнать .
CSScomb
Git
Для интеграции с git мне хватает GitGutter - этот плагин отмечает еще незакомиченные изменения в файле соответствующими значками на полях.
Для всего остального я использую консоль и пайпы. К примеру, посмотреть diff всего коммита можно, набрав в терминале git diff | s , так что мне вполне хватает такой минималистичной интеграции.
Emmet
Emmet - набор удобных сниппетов для html и css. Так, к примеру, лаконичное html:5>ul>li.item-$*5>span.title+span.author легким нажатием на tab превращается в…
TodoReview
Я часто пишу todo-комментарии в коде, вроде такого: /* TODO: переписать на промисы */ . TodoReview умеет находить все подобные коментарии в проекте и выводить их в виде списка, чтобы можно было избавляться от технического долга систематически, а не просто в очередной раз случайно наткнувшисть на оставленное замечание.
SideBarEnhancements
SideBarEnhancements учит не особенно-то и сговорчивый сайдбар sublime text’а адекватному взаимодействию с файлами: копированию, вставке, удалению, и тд.
В этой статье я сделаю небольшой обзор полезных плагинов для Sublime Text 2, которые могут оказаться очень полезными в повседневной работе.
Тот же набор плагинов актуален и для Sublime Text 3.
В этой же статье я сделаю небольшой обзор некоторых полезных плагинов для Sublime Text 2, которые я сам использую в своей работе и советую использовать вам. Естественно, рассматриваемые здесь плагины - это только капля в море, есть множество полезных плагинов, не упомянутых в этой статье. К тому же, я не считаю себя программистом и не рассматриваю плагины, предназначенные для суровых кодеров, а подхожу к вопросу с точки зрения верстальщика. Впрочем, многие из рассматриваемых плагинов могут быть одинаково полезны как программистам, так и верстальщикам.
Исходя из всего вышеизложенного, я призываю вас: если вдруг вы не нашли в Sublime какого-то полезного для себя функционала - обязательно поищите среди доступных плагинов, велика вероятность, что необходимый вам функционал реализован с их помощью.
Ну а теперь перехожу непосредственно к обзорам.
Плагины Zen Coding и Emmet для Sublime Text 2
И начнем мы с одного из самых популярных плагинов - Zen Coding (устаревший) и Emmet (сегодняшнее название для Zen Coding). Zen Coding / Emmet - это набор инструментов для текстовых редакторов (не только для Sublime), который позволяет очень значительно ускорить написание html и css кода. В первую очередь речь идет о подобии сниппетов, но не только о них. В отличие от стандартных сниппетов, при помощи Zen Coding (либо Emmet) вы можете создавать довольно сложные конструкции кода. Например, сокращение типа ul>li*8 будет развернуто в ненумерованный список (стандартный тег ul) с 8 пунктами. И это самый простой пример, конструкции могут быть гораздо более сложными.
Я уже писал отдельную статью по поводу того, - в популярных редакторах или текстовых полях на любом сайте.
Установить плагин 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 (отделив его символом #). Например, конструкция вида:
Div#page>div.logo+ul#navigation>li*5>a
… будет развернута до вида:
Последовательность символов в сокращении обязательно не должна содержать пробелов, а курсор должен находиться в ее конце в момент разворачивания. Кстати говоря, разворачивание в Sublime производится нажатием клавиши Tab , либо же комбинацией Ctrl + E .
При желании можно задавать тегу a значение атрибута href , также любому «двойному» тегу можно задать его содержимое в фигурных скобках. В сложных конструкциях можно использовать скобки (например, для выхода на более высокие уровни в иерархии тегов). Вот пример подобного использования:
Подобная конструкция будет развернута до вида:
Маленькая хитрость
В Sublime Text 2 можно легко оборачивать выделенный текст в скобки или кавычки, просто нажав клавишу для создания открывающей скобки или кавычки. Закрывающая при этом будет создана автоматически.
Для быстрого переключения между редактируемыми точками используются клавиши курсора ← и → с одновременно зажатыми клавишами Ctrl + Alt . Можете поэкспериментировать и попереключаться между редактируемыми точками в примере выше, чтобы точнее понимать, о чем идет речь.
Zen Coding позволяет не указывать название для тега div , а указывать только класс или id. В этом случае автоматически подразумевается, что имеется ввиду div . Например, конструкция такого вида:
Container<#header+#main
… аналогична такой конструкции:
Div.container
… и будет автоматически развернута до такого вида:
Подобным же образом можно работать не только с 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 за более детальной документацией.
Плагин AdvancedNewFile для Sublime Text 2
Стандартный способ создания нового файла состоит (внезапно) из собственно создания (Ctrl + N) и последующего его сохранения (Ctrl + S). При этом на втором этапе открывается стандартное системное диалоговое окошко, в котором нужно выбрать папку и задать имя для нового файла.
Однако всю вышеописанную процедуру можно значительно упростить, используя плагин AdvancedNewFile . Установить плагин можно как обычно через Package Control : Ctrl + Shift + P → install → AdvancedNewFile → Enter .
Плагин установлен и готов к использованию. Теперь достаточно нажать комбинацию Super + Alt + N , после чего в нижней части окошка Sublime появится небольшая панелька. В этой панели достаточно ввести путь к новому файлу (обычно относительно корневой папки текущего проекта) и нажать Enter - и новый файл сохранен.
Причем можно использовать при введении адреса к файлу и еще не существующие директории - в этом случае эти директории будут созданы автоматически.
Если вы кликните правой кнопкой мыши по какому-то элементу на боковой панели (в дереве файлов), то обнаружите, что появляющееся при этом контекстное меню довольно скромное. Функционал этого меню можно значительно расширить, установив (опять же через Package Control ) плагин SideBarEnhancements , после чего контекстное меню станет значительно богаче:
Этот плагин приносит с собой дополнительный функционал не только в виде расширенного меню. Так, при нажатии на клавишу F12 текущий файл теперь будет открываться в браузере (естественно, назначенные клавиши можно менять).
Плагин PlainTasks для Sublime Text 2
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 для Sublime Text 2
Плагин 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: докатился
Долгое время в разработке я использовал Webstorm от JetBrains. Это довольно солидная IDE с огромным количеством плюсов: автокомплит кода, встроенный многооконный терминал и отдельный терминал для запуска node.js сервера, множество интеграций и плагинов, file watchers и ещё куча всего полезного. Однако, не обошлось без минусов, и главным минусом для меня оказался недостаток производительности. Запуск большого проекта длился чуть ли не минуту, постоянные переиндексации выливались в заметные подтормаживания - даже после всяких танцев с бубном, увеличения выделяемой памяти и отключения всего и вся.
В результате, я решил взглянуть на популярный редактор Sublime Text 3 (далее ST3). И он мне очень понравился - кому не понравится практически мгновенное открытие проекта, особенно после всего пережитого? В конечном итоге я решил попрощаться с дорогим моему сердцу, но очень тормознутым Вебштормом.
А затем я взглянул на количество и качество плагинов для ST3, и понял, что вряд ли у меня появятся какие-либо сожаления по этому поводу.
Итак, какие же плагины я нахожу полезными для js-разработчика?
Terminal
По чему я действительно скучаю, так это по встроенному терминалу в Webstorm. Этот плагин хоть немного избавляет от этой легкой тоски. При настройках по умолчанию ctrl + shift + t открывает терминал.
Git
Интеграция с гитом. Наверное, можно вообще не лезть в терминал, но пока не очень доверяю. Еще есть SideBarGit , позволяет коммитить (и не только) прямо из контекстного меню сайдбара.
Визуальные
Seti UI Icons for Sublime Text
То, чего мне сразу стало не хватать в ST3 по сравнению с Вебштормом — иконки файлов в сайдбаре. Выглядят мило, времени на идентификацию файла уходит меньше. В Package Control его нет — с установкой придется поприседать. А, и еще нет иконки для jsx-файлов.
Oceanic Next Color Scheme
Симпатичная темная тема. Нраица.
SyncedSidebarBg
Меняет фоновый цвет сайдбара на цвет текущей темы. Мелочь, а приятно, и глаза не режет.
На этом всё, если найду интересные и полезные плагины — может, ещё напишу подобный пост. До связи!