Sublime text 3 плагины для веб разработки: Настройка Sublime Text 3 для веб-разработки: LiveReload, плагины, фишки

Содержание

Настройка Sublime Text 3 для веб-разработки: LiveReload, плагины, фишки

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

Твитнуть

Класснуть

Запинить

Внимание! Вышла более новая версия руководства.
С новым материалом вы можете ознакомиться Здесь.

Плагины

emmet — плагин для скоростной верстки.

livereload — автообновление страницы.

Для корректной работы плагина LiveReload в Sublime Text 3 необходимо дописать в пользовательских настройках плагина следующую конструкцию (подробнее в видео):

{
	"enabled_plugins": [
		"SimpleReloadPlugin",
		"SimpleRefresh"
	]
}

sass — настроим корректную подсветку SASS в Sublime Text 3.

jade — HTML препроцессор.

gist — плагин для быстрого доступа к вашим сниппетам на GitHub.

brackethighlighter — подсветка скобок, тегов в Sublime Text 3.

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

colorhighlighter — подсветка цвета.

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

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

Фишки

Поменяем тему на twilight.
Научимся множественному выделению.
Назначим клавиши для события reindent (хоткей для автоматического формата документа).
Научимся управлять числовыми значениями (Инкремент и Декремент).

Полезные ссылки

Sublime Text: https://sublimetext.com

Sublime Text 3 Package Control: https://packagecontrol.io/installation

LiveReload Browser Extension: http://livereload.com/extensions/

Sublime Text 3 Live Reload Plugin: https://packagecontrol.io/packages/LiveReload

Премиум уроки от WebDesign Master

Другие уроки по теме «Инструменты»

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

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

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

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

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

Нажмите Ctrl — обратный апостроф (; `), чтобы открыть Sublime Text Console:

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

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

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

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

Как установить

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

Введите HTMLPrettify:

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

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

#page>div.logo+ul#navigation>li*5>a{Item $}

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

<div>
  <div></div>
  <ul>
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    <li><a href="">Item 4</a></li>
    <li><a href="">Item 5</a></li>
  </ul>
</div>

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

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

nav#menuSystem.navMenu.isOpen>div#hotelLogo>div.navMenuIcon.logoIcon+div#arrowPointer+ul#navMenuMain>li.navMenuItem.navMenuItem$$$*2>div.navMenuIcon{Item $}+a{Item $}

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

<nav>
  <div>
    <div></div>
    <div></div>
    <ul>
      <li>
        <div>Item 1</div>
        <a href="">Item 1</a>
      </li>
      <li>
        <div>Item 2</div>
        <a href="">Item 2</a>
      </li>
    </ul>
  </div>
</nav>

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

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

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

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

До: navMenu

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

После: nav_menu

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

До: <nav id=»menu_system» class=»nav_menu isOpen»>

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

После: navIDMenuSystemClassNavMenuIsOpen

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

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

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

Вадим Дворниковавтор-переводчик

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

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

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

Нажмите Ctrl — обратный апостроф (; `), чтобы открыть Sublime Text Console:

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

Нажмите «ОК».

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

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

Как установить

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

Введите HTMLPrettify:

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

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

#page>div.logo+ul#navigation>li*5>a{Item $}

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

<div>
  <div></div>
  <ul>
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    <li><a href="">Item 4</a></li>
    <li><a href="">Item 5</a></li>
  </ul>
</div>

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

nav#menuSystem.navMenu.isOpen>div#hotelLogo>div.navMenuIcon.logoIcon+div#arrowPointer+ul#navMenuMain>li.navMenuItem.navMenuItem$$$*2>div.navMenuIcon{Item $}+a{Item $}

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

<nav>
  <div>
    <div></div>
    <div></div>
    <ul>
      <li>
        <div>Item 1</div>
        <a href="">Item 1</a>
      </li>
      <li>
        <div>Item 2</div>
        <a href="">Item 2</a>
      </li>
    </ul>
  </div>
</nav>

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

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

До: navMenu

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

После: nav_menu

До: <nav id=»menu_system» class=»nav_menu isOpen»>

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

После: navIDMenuSystemClassNavMenuIsOpen

Вадим Дворниковавтор-переводчик

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

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

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

Нажмите Ctrl — обратный апостроф (; `), чтобы открыть Sublime Text Console:

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

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

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

Как установить

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

Введите HTMLPrettify:

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

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

#page>div.logo+ul#navigation>li*5>a{Item $}

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

<div>
  <div></div>
  <ul>
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    <li><a href="">Item 4</a></li>
    <li><a href="">Item 5</a></li>
  </ul>
</div>

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

nav#menuSystem.navMenu.isOpen>div#hotelLogo>div.navMenuIcon.logoIcon+div#arrowPointer+ul#navMenuMain>li.navMenuItem.navMenuItem$$$*2>div.navMenuIcon{Item $}+a{Item $}

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

<nav>
  <div>
    <div></div>
    <div></div>
    <ul>
      <li>
        <div>Item 1</div>
        <a href="">Item 1</a>
      </li>
      <li>
        <div>Item 2</div>
        <a href="">Item 2</a>
      </li>
    </ul>
  </div>
</nav>

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

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

До: navMenu

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

После: nav_menu

До: <nav id=»menu_system» class=»nav_menu isOpen»>

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

После: navIDMenuSystemClassNavMenuIsOpen

Вадим Дворниковавтор-переводчик

Лучшие плагины 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 теги. Например:

((h5>a[rel=external])+p>img[width=500 height=320])*12

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

3. SublimeLinter

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

4. SublimeEnhancements

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

5. PackageResourceViewer

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

6. Git

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

7. Terminal

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

8. CSSComb

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

9. CanIUse

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

10. Alignment

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

11. Trimmer

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

12. ColorPicker

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

13. MarkDown Editing

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

14. FileDiffs

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

15. DocBlockr

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

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

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

SpaceGray:

Centurion:

Soda:

17. Snippets

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

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

Выводы

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

Оцените статью:

Загрузка…

Лучшие плагины для Sublime Text « Web art guru

WebInspector
А еще есть Fireplay от Mozilla, который дозволяет подключаться к Firefox Developer tools и очень обычный дебаггер JSHint. Мощнейший инструмент для дебаггинга JavaScript, настоящий инспектор кода для Sublime. Все это работает на ура! Фичи: установка брейкпоинтов прямо в редакторе , показ интерактивной консоли с кликабельными объектами, остановка с показом стек трейса и управление шагами дебаггера.

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

Видео с наилучшими приемами от создателя проекта:

Git
В-третьих: есть такие мелочи как Quick commit, который одной командой quick добавляет все конфигурации и коммитит их. Во-первых: для вас не придется повсевременно переключаться меж окнами Sublime и терминала. Во-вторых: есть грамотный автокомплит и заместо git add -A, довольно написать add. Сущность этого плагина понятна из наименования — возможность работать с Git прямо в вашем возлюбленном редакторе. Данный метод работы с Git дозволит для вас сэкономить массу времени.

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

Благодаря этому из редактора сейчас будет доступен не лишь Git… Существует еще Glue, который выводит внизу маленькое окошко, где можно писать на Shell.

GitGutter и Modific
Данные плагины подсвечивают строчки модифицированные крайним коммитом, иными словами diff tools в режиме настоящего времени.

BracketHighlighter
Открытие и закрытие хоть какого фрагмента в коде обязано смотреться конкретно таковым образом. Мега круто!

EditorConfig

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

Пример файла# Корневой файл EditorConfig
root = true

# Для всех файлов используем unix-совместимые переносы строк
[*]
end_of_line = lf
insert_final_newline = true

# отступы в 4 пробела
[*.py]
indent_style = space
indent_size = 4

# Используем табы для отступов (Не указываем размер)
[*.js]
indent_style = tab

# Перезависываем настройку отступов для js файлов в папке lib
[lib/**.js]
indent_style = space
indent_size = 2

# Лишь для файлов package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

Sublimall
Превосходный плагин, который синхронизирует все конфигурации (опции, плагины, рабочие файлы) меж вашими Sublime Text редакторами. Наиболее обычная кандидатура — BufferScroll. Все полностью безвозмездно, требуется лишь сделать акк.

AllAutocomplete
AllAutocomplete осуществляет поиск по всем файлам открытым в текущем окне, что существенно упрощает процесс разработки. Также существует плагин CodeIntel, который воплощает в для себя способности IDE и кроме умного автокомплита привносит в Sublime «Code Intelligence» для ряда языков: JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP. Классическое автодополнение в Sublime Text работает лишь с текущим файлом.

SublimeREPL
SublimeREPL дозволяет прямо в редакторе интерпретировать целое множество языков: Clojure, CoffeeScript, F#, Groovy, Haskell, Lua, MozRepl, NodeJS, Python, R, Ruby, Scala, shell. Возможно, один из самых нужных плагинов для разрабов.

DocBlockr
DocBlockr станет для вас действенным ассистентом при документировании кода. Опосля ввода /** и нажатия на кнопку Tab плагин автоматом распарсит всякую функцию и подготовит соответственный шаблон.

Floobits
Классное расширение для SublimeText, Vim, Emacs, IntelliJ IDEA, которое дозволяет разрабам вместе работать на кодом, при этом из различных редакторов.

AutoFileName
Без излишних слов. Автозаполнение путей к подключаемым файлам — чрезвычайно комфортно.

ColorPicker
А еще есть примечательные GutterColor и ColorHighlighter, которые упрощают ориентирование в цветовых кодах: Традиционно, когда нам требуется цветовая гамма мы привыкли применять Photoshop либо Gimp. Но настоящий color picker может быть прямо в окне вашего редактора — Ctrl/Cmd + Shift + C.

Colorcoder
Разукрашивает все переменные, тем самым существенно упрощая ориентацию в коде. В особенности полезно для разрабов с дислексией.

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

MarkdownEditing
Как альтернативно решение, можно испытать MarkdownPreview. Возможно наилучший плагин для работы с Markdown: подсветка, сокращения, автодополнение, цветовые схемы и др.

Напоследок:

Sublime SFTP
CTags — поддержка CTags в Sublime.
SideBarEnhancement — множество доп функций контекстного меню в сайдбаре.
ActualVim — Vim в Sublime — два возлюбленных редактора в одном.
SublimeLinter — поддержка линта для множества языков: C/C++, Java, Python, PHP, JS, HTML, CSS и др.
CSScomb — комбинирует CSS характеристики в определенном порядке.
FixMyJS, Jsfmt и JsFormat — плагины для форматирования JS/JSON-кода.
AStyleFormatter — форматирует C/C++/C#/Java код.
SVG-Snippets — крупная коллекция нужных шаблонов при работы с SVG.
Inc-Dec-Value — дозволяет изменять числа, даты, HEX цвета с помощью стрелок на клавиатуре, подобно инспектору в браузере.
Trailing Spaces — подсвечивает удаляет все случайные пробелы в конце строк при сохранении файла.
Alignment — функциональное выравнивание фрагментов кода от создателя Package Control.
Placeholders — коллекция шаблонов с параграфами, изображениями, перечнями, таблицами и тд.
ApplySyntax — налету описывает синтаксис в текущем файле.
StylToken — подсветка определенных фрагментов текста, как в Notepad++.
EasyMotion — удачный переход к определенному символу с помощью клавиатуры.
ZenTabs и AdvancedNewFile — усовершенствуют обычное отображение вкладок и создание файлов.
EncodingHelper — показывает шифровку файлов в строке статуса и оповещает о соответственных ошибках.
Gist — синхронизирует GitHub Gist с Sublime (ST2).
Clipboard History (ST2) — плагин ведет историю буфера обмена, что дозволяет вставить не лишь крайний скопированный фрагмент кода, но и хоть какой из прошлых.
Темы и цветовые схемы:

Soda
Spacegray
Flatland
Tomorrow
Base 16
Solarized
Predawn
itg.flat
Для всех остальных предпочтений есть Color Schemes и Сolorsublime.

* В неких репозиториях указано, что плагин написан под ST2, но я все инспектировал и почти все использую сам под ST3.
Да

Нет

Проголосовало 1786 человек. Приглянулась ли Для вас выборка? Войдите, пожалуйста. Воздержался 171 человек. * Я не стал обрисовывать ряд плагинов, которые выполняют деяния по форматированию, компиляции, оптимизации, ибо искренне убежден, что это задачки для Grunt, Gulp, Prepros либо CodeKit. Лишь зарегистрированные юзеры могут участвовать в опросе. habrahabr.ru

Как настроить Sublime Text 3 для вёрстки сайтов?

Здравствуйте, слышал что сейчас самый лучший редактор для редактирования кода страниц (html) и тектов это sublime, расскажите как его установить и как использовать?

У веб дизайн мастера, есть очень классная инструкция:

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

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

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

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

Установка Package Control в Sublime Text

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

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

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

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

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

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

Самые популярные плагины для Sublime Text:

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

Установка внешнего оформления Sublime Text

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

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

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

Установка плагина вручную

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

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

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

Тонкая настройка редактора, пресет моих настроек

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

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

Keymap (Windows Users):
	[
	{ "keys": ["alt+shift+f"], "command": "reindent" },
	]
	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",
	}

Код пресета для пользовательских настроек (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 на клавиатуре.

Источник: https://webdesign-master.ru/blog/tools/2017-03-13-sublime-text-3-setup.html

18 лучших текстовых пакетов для веб-разработчиков

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

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

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

Пакетный контроль

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

Скачать

Материализованные фрагменты CSS

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

Скачать

Стандартный формат

Форматирование всегда будет важно для программистов не только для того, чтобы помочь себе создать более прочную кодовую базу, но и для того, чтобы помочь любому, кто собирается прикоснуться к вашему коду, улучшить навигационный доступ по вашему коду. Плагин StandardFormat возьмет известную библиотеку Standard Format JS, а затем выполнит ее в соответствии с вашим написанным кодом, чтобы преобразовать ваш код в код традиционного стандартного формата JS. Очень быстро приступить к работе, и результаты ошеломляют.

Скачать

Терминал

Все сводится к производительности. Плагины Sublime Text предназначены для экономии вашего времени. Предоставляя вам инструменты и функции, которые сделают вашу среду разработки намного более гладкой, более гибкой и, безусловно, удобной для использования. Терминал — одна из тех библиотек, которые, по вашему мнению, вам не нужны, пока вы не начнете его использовать. Что делает пакет / плагин, он создает ярлыки и пункты меню, которые можно использовать для открытия вашего Терминала в позиции файла, который вы в настоящее время редактируете, или вы можете быстро перейти к корневой папке, в которой находится ваш проект, также в терминал конечно.Это простой пакет с простыми функциями, но он каким-то образом упрощает жизнь уже более чем 220 000 человек. Вы один из них?

Скачать

Laravel Blade Highlighter

Вы, возможно, были разработчиком PHP в прошлом, но вам надоел язык и вы решили попробовать что-то новое … ну, прежде чем вы решите, что закончили с PHP навсегда, возможно, вам стоит попробовать Laravel, потрясающий открытый — исходный фреймворк PHP, который изменил ландшафт PHP и общей разработки PHP.Без сомнения, одна из самых популярных фреймворков десятилетия, вся представленная сообществу одним разработчиком, у которого было видение создания чего-то уникального, и это видение, само собой разумеется, было реализовано довольно быстро. Честно говоря, Laravel использует так называемый Blade Engine, особый синтаксис, который поддерживает разработку нового программного обеспечения поверх фреймворка … Трудно представить кодирование Laravel на Sublime без помощи этого плагина, и 120 000 человек согласятся со мной. что.

Скачать

Простые задачи

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

Скачать

j Запрос

Мы в Colorlib любим jQuery. У нас есть сильная страсть к jQuery, и наши прошлые публикации, основанные на этой теме, должны быть достаточным доказательством этого: см. Здесь, здесь и здесь. Мы очень рады и счастливы продвигать плагин jQuery для пользователей Sublime Text, плагин, который активно используют и используют более 500 000 разработчиков. jQuery — это язык Интернета, он делает Интернет более интерактивным и дружелюбным для пользователя.

Плагин jQuery для Sublime интуитивно понимает, что вы пытаетесь запрограммировать, и дает вам подсказки, подсказки, подсказки и функции автозаполнения всякий раз, когда вы пишете новый код jQuery.В свою очередь, ваш уровень продуктивности резко возрастет благодаря возможности писать код, не обращаясь к документации каждые пять минут. Это особенно касается проектов, требующих большого количества кода и управления. Бесценно иметь плагин, который сделает всю тяжелую работу за вас, и всего за несколько часов использования этого плагина становится ясно — эти плагины спасают жизнь (продуктивность)!

Скачать

Sass

SASS — это препроцессор, который вам нужно изучить! Если вы хотите по-новому взглянуть на программирование CSS, полезно изучить препроцессор, который может легко преобразовать язык сценариев в реальный функциональный язык программирования, где вам не нужно повторно использовать один и тот же синтаксис и шаблоны каждые десять секунд.SASS просто позволяет невероятно легко «программировать» с помощью CSS и рассматривать CSS как функциональную альтернативу. Во всяком случае, плагин SASS уже скачали почти 480 000 раз. Этот невероятно универсальный плагин добавит функциональность SASS в ваш рабочий процесс Sublime, что позволит вам использовать Sass более эффективно и с большей точностью.

Скачать

Палитра цветов

Забудьте о том, чтобы каждые несколько минут возвращаться в Интернет, чтобы найти нужный вам цвет. Вся эта тяжелая работа должна выполняться прямо в вашем редакторе или, как сказали бы разработчики интерфейса: в вашем браузере.ColorPicker придаст вашему редактору Sublime Text дополнительную функциональность, которая даст вам простой способ выбора правильных цветов для всего, что вы пытаетесь стилизовать в данный момент. ColorPicker работает на всех платформах, и его проще использовать, чем научиться говорить Hello World на Haskell!

Скачать

МЕНЬШЕ

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

Скачать

Формат Js

JS Beautifier снова делает ваш код JavaScript красивым! Так устроены круги разработчиков. Код нужно оптимизировать и хорошо оптимизировать. JsFormat — это плагин Sublime, который работает с форматированием вашего кода JavaScript с использованием библиотеки JS Beautifer.

Скачать

Кронштейн Highlighter

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

Анаконда

Anaconda — отличное решение, которое безупречно работает прямо из коробки, если вы хотите превратить Sublime Text 3 в полнофункциональную среду разработки Python. Конечно, он поставляется с различными практическими опциями и функциями, которые вам могут пригодиться. Другими словами, вы можете настраивать вещи и изменять Anaconda в точном соответствии со своим вкусом и правилами. Несмотря на то, что вы можете использовать инструмент как есть, настоятельно рекомендуется ознакомиться с конфигурациями, так как производительность будет работать в ваших интересах гораздо более плавно.И если вы разработчик, желающий внести свой вклад в Anaconda, вы тоже можете это сделать. Скачать

Значок файла

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

Все автозаполнение

Если есть одна функция, с которой может согласиться каждый разработчик, она неоценима для редакторов кода, таких как Sublime, то она будет автозаполнена. С помощью автозаполнения мы можем легко изменить имена функций или добавить новый синтаксис, не беспокоясь о том, что нам придется повторять одно и то же действие снова и снова, нет.. автозаполнение позаботится обо всем этом! И этот плагин All Autocomplete для редактора Sublime Text потрясет ваш мир, когда дело доходит до автозаполнения кода с использованием интуитивно понятного интерфейса. Этот плагин расширяет вашу функцию автозаполнения по умолчанию для поиска совпадающего синтаксиса во всех открытых файлах проекта.

Скачать

HTML-CSS-JS Prettify

Очень важно правильно указать код! Это помогает согласовать код для использования в будущем для всех, кто хочет исследовать и развивать ваши идеи.Это приложение работает, в частности, с форматами кода HTML5, CSS3, JavaScript и JSON. Все обрабатывается через Node.js!

Скачать

Word Press

Конечно, как мы можем забыть разработчиков WordPress? Есть актуальный пакет для тех из вас, кто активно работает с WordPress. Sublime Text работает таким образом, что вы можете установить столько плагинов, сколько захотите. Об этом нужно помнить. Они начнут работать только тогда, когда вы начнете использовать код, поддерживающий назначение плагинов.Здесь также есть плагин WordPress. Это модуль, который поможет в написании синтаксиса, связанного с WordPress, для связанных с WordPress проектов, над которыми вы работаете. Выведите свой WP на новый уровень!

Скачать

Java Script Next — синтаксис ES6

Вышел

ECMAScript 2016, и все в восторге от этого! Браузеры уже работают над интеграцией ES7. А пока давайте отдышимся и сосредоточимся на том, что здесь доступно для непосредственного использования.Если вы все еще испытываете трудности с изучением синтаксиса ES6, вам нужно скачать копию JavaScriptNext. Разработчики специально создали плагин Sublime для автозаполнения и помощи с подсветкой синтаксиса ES6.

Скачать

Вавилон

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

Скачать

Лучший редактор кода для серьезного разработчика

Успех

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

Пакеты My Sublime Text для интерфейсной веб-разработки

Sublime text editor — мой любимый и один из самых мощных редакторов для интерфейсной веб-разработки (HTML, CSS, SCSS, JavaScript, React.js, ES6). Он супербыстрый и настраиваемый с множеством плагинов, которые расширяют функциональные возможности редактора. В настоящее время я иногда использую текстовый редактор Sublime для небольших правок, и это короткое сообщение в блоге может помочь кому-то найти интересные плагины.

Общие пакеты

Управление пакетами — позволяет управлять пакетами в редакторе.

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

SyncedSideBar — синхронизировать боковую панель проекта (вид папки) с текущим активным файлом

AutoFileName — функция автозаполнения для файлов

All Autocomplete — по умолчанию Sublime учитывает только слова, найденные в текущем файле, этот пакет расширяет автозаполнение по умолчанию, чтобы найти совпадения во всех открытых файлах

FileDiffs — показывает различия между файлами

Sublime-hooks — запускайте возвышенные команды для обычных обработчиков событий, таких как new, close, save и т. Д.

Editorconfig-sublime — плагин для EditorConfig, который помогает разработчикам определять и поддерживать согласованные стили кодирования между различными редакторами и IDE.

AceJump — переходите между персонажами без использования мыши

TodoReview — сканирует комментарии (TODO, NOTE, FIXME, CHANGED) в вашем коде и создает страницу результатов, которая позволяет вам переходить к файлам с этими комментариями.

Терминал — запускает терминал из текущего файла

Линтер

SublimeLinter — это фреймворк для линтинга кода, и для каждого языка нужен собственный плагин, вы можете увидеть список здесь.Я использую SublimeLinter-contrib-htmlhint, SublimeLinter-contrib-bootlint, SublimeLinter-csslint, SublimeLinter-contrib-scss-lint, SublimeLinter-eslint, SublimeLinter-json

Пакеты HTML, XML

HTMLBeautify — форматировщик исходного кода HTML

Emmet — набор инструментов для веб-разработки, который значительно улучшает рабочий процесс HTML и CSS.

SublimeLinter-xmllint — плагин для SublimeLinter предоставляет интерфейс для xmllint

IndentX — форматировщик исходного кода XML

пакетов CSS

Sublime-csscomb — плагин для CSScomb — средство форматирования стилей кодирования для CSS

ColorHighlighter — выделяет значения цвета

Goto-CSS-Declaration — Перейти к объявлению CSS в открытом *.css файл

CSS Extended Completions — расширенные дополнения css, less и scss

Emmet LiveStyle — двунаправленное редактирование CSS в реальном времени Пакеты SCSS

Если вы используете LESS, Stylus или SASS, вам в основном нужны пакеты для линтинга кода, форматирования и подсветки синтаксиса. Для SCSS я использую эти пакеты.

SCSS — пакет синтаксиса SCSS

SassBeautify — средство форматирования исходного кода SCSS

Пакеты JavaScript

Sublime-tern — плагин для TernJS, который анализирует ваш JS-код на лету и предоставляет автозаполнение, подсказки аргументов функций, переход к определению и различные операции автоматического рефакторинга.Подробнее, как настроить этот плагин

Завершение сценария Java — дополнительные подсказки и дополнения для кода JavaScript

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

DocBlockr — упрощает написание комментариев

FileHeader — плагин шаблонов, который вставляет исходный контент в созданный или (уже существующий) файл

JsFormat — форматирование исходного кода javascript

Pretty JSON — форматирование исходного кода JSON

Console Wrap for js — помещает выбранную вами переменную в console.бревно

Babel-sublime — определения синтаксиса для ES6 JavaScript с расширениями React JSX. Если вам нужен линтинг кода ES6 и jsx, вы можете использовать плагины ESLint, плагины babel-eslint и eslint-plugin-react. О том, как настроить ESLint, вы можете узнать в сообщениях Дэна Абрамова Lint Like It’s 2015 и Джонатана Кримера «Настройка ESLint с ES6 в Sublime Text».

Выровнять вкладку — выравнивание текста с помощью регулярных выражений. Вы можете увидеть несколько хороших примеров здесь

Редактор конфигурации

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

Для файлов .css вы можете использовать, например, команду csscomb

Откройте файл .css в редакторе, а затем откройте «Настройки » -> «Настройки» -> «Специфичные для синтаксиса» - «Пользователь ».

CSS.sublime-text

 {
   "on_pre_save_language": [
      {
         "команда": "css_comb"
      }
   ]
}

Если вы хотите создать ярлык в стиле IDE CTRL + mouseclick, чтобы открыть метод / функцию, в Sublime Text 3 уже есть эта функция с именем goto_definition , которая является привязкой клавиш к F12.Здесь вы можете увидеть, как установить эту функцию с помощью сочетания клавиш ctrl + щелчок.

Тема

Я использую OS X, и дизайн El Capitan Theme очень хорошо подходит для системы. Эта тема основана на теме Soda Theme от Яна Хилла и также доступна в темной версии.

НУЖЕН ВЕБ-РАЗРАБОТЧИК ПОЛНОГО СТЕКА? ПОСТРОИМ ЧТО-ТО.

СВЯЗАТЬСЯ

Нравится:

Нравится Загрузка …

Настройка возвышенного текста 3. Превосходная настройка для возвышенного текста… | Карлос Кастильо | В веб-разработке

Sublime Text включает инструмент командной строки subl.Чтобы использовать его, нам просто нужно сделать на него символическую ссылку (как указано в официальной документации). Вы можете быстро добавить его в каталог / usr / bin :

 ln -s «/ Applications / Sublime Text.app/Contents/SharedSupport/bin/subl» / usr / bin / subl

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

Apache .conf файлы
SCSS и HAML
INI-синтаксис
Gitconfig

Emmet (ранее Zen Coding)

Emmet — огромная экономия времени для любого веб-разработчика. Он обеспечивает сверхбыстрое кодирование HTML и CSS. Убедитесь, что вы установили его и научились пользоваться.

CSS Comb

CSS Comb позволяет сортировать свойства CSS в определенном порядке. Это прекрасное дополнение для групп разработчиков. Установите его из установщика пакетов.

SCSS

Официальный комплект Textmate SCSS.

SFTP

Коммерческий SFTP / FTP. Я использую это для синхронизации папок. Один только этот плагин ускорил мой процесс в десять раз. Я действительно рекомендую его всем, кому еще нужно развертывать веб-сайты через FTP.

Laravel Bundles

Сейчас я полностью занят разработкой веб-сайтов с использованием Laravel и люблю каждую его частичку. Я тоже рекомендую вам попробовать! Есть пакеты для подсветки синтаксиса и фрагменты Laravel.

Этот пакет позволяет выровнять несколько строк по вертикали.Приятная небольшая экономия времени. Использовать выравнивание довольно просто: просто выберите линии, которые вы хотите выровнять, и нажмите cmd + ctrl + A .

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

Sublime Text интегрируется с множеством инструментов. Вот некоторые из моих любимых плагинов:

Dashdoc
Liquid
Markdown Editing

10 лучших плагинов Sublime Text для веб-разработчиков 2021

‍

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

Что такое плагины Sublime Text?

‍

10 лучших и необходимых подключаемых модулей Sublime Text для веб-разработчиков.

‍

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

Но если вам нужно что-то напомнить, мы начнем с официального определения:

Sublime Text — это «проприетарный кроссплатформенный редактор исходного кода с интерфейсом прикладного программирования Python». Следовательно, плагины Sublime Text — это просто инструменты, которые помогают разработчикам выполнять определенные задачи внутри Sublime Text более удобным способом.

‍

10 лучших плагинов Sublime Text

Какой из этих плагинов Sublime Text подойдет вам лучше всего?

‍

Теперь, когда мы все на одной странице относительно того, что такое плагины Sublime Text, давайте погрузимся в 10 лучших из них, которые вы должны начать использовать прямо сейчас.Готовый?

‍

1. Управление пакетами

‍

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

Установка Package Control довольно проста, и инструкции можно найти на веб-сайте компании. После успешной установки инструмента откройте панель команд, используя «ctrl + shift + p» в Windows или «cmd + shift + p» на Mac.

Это представление позволит вам установить дополнительные пакеты с веб-сайта Package Control, добавить плагины, размещенные вне Package Control (с помощью функции «Добавить репозиторий»), и полностью удалить плагины.

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

‍

2. SublimeGit

‍

Насколько неприятно постоянно переключаться между текстовым редактором и терминалом для выполнения команд Git? Это утомительно и пустая трата времени.Откройте для себя SublimeGit, инструмент, который объединяет Git и Sublime и избавляет вас от необходимости переключаться между двумя приложениями.

И самое приятное то, что SublimeGit теперь имеет открытый исходный код. То, что раньше стоило чуть больше 10 долларов, теперь можно получить бесплатно. Победить!

‍

3. GitGutter

Источник: PackageControl.io

‍

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

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

‍

4. Emmet

‍

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

Чем меньше кода вам нужно написать, но при этом достичь поставленных целей, тем более продуктивным вы сможете стать. Используйте Эммета, чтобы писать меньше и делать больше одновременно.

‍

5. Выравнивание

‍

Плагин Alignment позволяет программистам быстро выравнивать свой код (включая PHP, Javascript и CSS), чтобы его было легче читать.Каждый из нескольких разделов и многострочных разделов можно выровнять с помощью этого плагина с помощью «ctrl + alt + a» в Windows или «cmd + ctrl + a» на Mac.

Просматривая бесконечные строки кода весь день, вы определенно оцените Alignment и то, как оно делает вещи аккуратными, аккуратными и легкими для чтения.

‍

6. SublimeLinter

‍

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

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

‍

7. Терминал

Источник: PackageControl.io

‍

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

Но будьте осторожны, хотя этот плагин является отличным средством повышения производительности, вам нужно будет изменить ярлык, который вы используете для доступа к нему. По умолчанию для ярлыка установлено значение «ctrl + shift + t» в Windows и «cmd + shift + t» на Mac. К сожалению, это также ярлык для открытия вашего последнего закрытого файла, но после быстрой настройки вы сразу же приступите к работе.

‍

8.ColorPicker

‍

ColorPicker упрощает разработчикам настройку цветов. Мы предполагаем, что ваш текущий рабочий процесс для этой задачи включает в себя доступ к отдельной программе — например, Photoshop — и выбор цветов в ней. Это работает, но занимает больше времени, чем вам хотелось бы, верно?

Похоже, вам нужен ColorPicker, который позволяет получить доступ к цветовому кругу внутри Sublime Text. После установки этого плагина откройте его, набрав «ctrl + shift + c» в Windows или «cmd + shift + c» на Mac.

‍

9. DocBlockr

‍

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

Все, что вам, как программисту, нужно сделать, это начать свой код с «/ **», а этот плагин позаботится обо всем остальном, сэкономив вам время и нервы. Docblockr работает на Javascript, PHP, CoffeeScript, ActionScript, C и C ++.

‍

10. Color Sublime

‍

Наконец, большую часть своего дня как разработчик тратит на просмотр и использование текстового редактора. Так разве не имеет смысла делать это как можно более приятным визуально? Мы так думаем!

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

‍

CloudApp для разработчиков

Программа записи экрана CloudApp облегчает жизнь разработчикам.

‍

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

Почему вы читаете этот пост на сайте CloudApp? Потому что многие наши клиенты — разработчики.Они используют наше решение, чтобы:

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

‍

Узнайте больше о том, как CloudApp может облегчить вашу жизнь как разработчика, здесь.

‍

Правильные плагины Sublime Text для вас

Пришло время решить, какие плагины Sublime Text подходят вам.

‍

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

Управление пакетами
SublimeGit
GitGutter
Emmet
Выравнивание
SublimeLinter
Терминал
ColorPicker
Docblockr 905 Sublime Stack для разработчиков 905
Когда я начал заниматься веб-разработкой несколько лет назад, Vim был моим первым выбором текстового редактора.С ним было легко работать, и я мог без особых хлопот справиться с основами. Кроме того, многим разработчикам нравятся текстовые редакторы на основе терминалов, потому что они получают одинаковую среду как на своих локальных машинах разработки, так и на удаленных серверах. Несмотря на дебаты «Vim vs Emacs», около года назад я решил опробовать собственный текстовый редактор, и Twitter загудел одним из них (без призов за то, чтобы угадать, какой из них).
Создатели Sublime Text говорят, что это текстовый редактор, в который вы влюбитесь, и, проработав с ним почти год, я должен сказать, что полностью с ними согласен.У него бессрочная пробная версия, а лицензия для одного пользователя стоит 70 долларов. Если вы проводите большую часть дня, работая с текстовым редактором, я бы сказал, что это достойное вложение!
Что делает Sublime Text еще лучше, так это его расширяемость. Итак, вот взгляните на плагины, которые делают и без того замечательный редактор по-настоящему Sublime.
Один из способов установки подключаемых модулей Sublime Text — это загрузка файлов и их копирование в каталог пакетов. Однако вы должны пройти этот процесс ровно один раз, потому что существует плагин под названием Package Control: менеджер пакетов, позволяющий устанавливать другие плагины, не выходя из Sublime Text.Это похоже на apt-get для Ubuntu, pip для Python и npm для node.js.
Следуйте приведенным здесь инструкциям по установке, и вам больше не придется устанавливать другой плагин вручную.
Чтобы убедиться, что он установлен правильно, нажмите Ctrl / Cmd + Shift + p и введите «управление пакетами» — вы должны увидеть список параметров.
В наши дни чаще всего вы будете работать с программным обеспечением для контроля версий, и наиболее популярной системой контроля версий является Git.Вы устали сохранять текстовые файлы и снова переключаться на терминал, чтобы выполнить несколько команд Git. Разве не было бы неплохо, если бы вы могли выполнять команды Git из самого текстового редактора? Установите плагин Git и делайте больше за меньшее время!
Хотя вы можете запускать команды Git из Sublime Text, зачем проверять отличия в файле от последнего коммита, выполняя отдельную команду, когда вы можете просматривать его в реальном времени?
С помощью GitGutter вы можете видеть, какие строки были добавлены, удалены или изменены в желобе.
Emmet — полезный плагин, который экономит время, заставляя вас меньше писать, тем самым повышая вашу продуктивность. Emmet доступен для других текстовых редакторов, таких как Notepad ++ и Eclipse.
Есть много вещей, которые вы можете сделать с Эмметом, но я просто расскажу вам, что мне больше всего нравится. Введите html: 5 и нажмите Ctrl / Cmd + e , и он будет расширен до базового шаблона страницы HTML 5. Простой!
Автозаполнение по умолчанию
Sublime Text учитывает только слова, которые присутствуют в текущем файле.Подключаемый модуль AllAutocomplete, однако, ищет все открытые файлы, предлагая слова.
Этот плагин может вам пригодиться на тот случай, если вы захотите открыть терминал в каталоге вашего текущего файла. Однако по умолчанию он устанавливает Ctrl / Cmd + Shift + t в качестве ярлыка для открытия терминала, который также является ярлыком для открытия последнего закрытого файла. Вы должны изменить любой из ярлыков, чтобы использовать обе функции!
Это, наверное, самый полезный плагин для программистов.SublimeREPL позволяет запускать интерпретатор ряда языков (NodeJS, Python, Ruby, Scala и Haskell, чтобы назвать несколько) прямо внутри Sublime Text. Давайте запустим интерпретатор Python и посмотрим, работает ли он. Выполните несколько проверок списка и вычислите 48 в степени 100.
Обычно, если вы хотите использовать палитру цветов, вы, вероятно, открываете Photoshop или GIMP и используете там встроенную палитру цветов. Плагин ColorPicker позволяет использовать палитру цветов в Sublime Text! После установки просто нажмите Ctrl / Cmd + Shift + c .
Хотя многие разработчики предпочитают создавать файлы Markdown в облаке (GitHub Gists, StackEdit, Markable), это для писателей «старой школы», которые предпочитают хранить свои файлы локально. Хотя MarkdownPreview в первую очередь предназначен для предварительного просмотра файлов Markdown, вы можете пойти еще дальше и установить MarkdownEditing, который дает вам правильное цветовое выделение.
Если вы строго следуете рекомендациям по кодированию, этот плагин облегчит вашу задачу. DocBlokr помогает вам создавать правильные комментарии для вашего кода, анализируя функции, параметры, переменные и автоматически добавляя базовые элементы.Начните с «/ **», а все остальное DocBlockr сделает за вас. Например, проверьте, как DocBlockr облегчает мне жизнь, создавая для меня формат заполнения на основе моего комментария.
На этом мы подошли к концу нашего списка плагинов для повышения вашей производительности. Пропустили ли мы что-нибудь важное? Дайте нам знать о своих фаворитах в комментариях ниже.
Возможно, вас заинтересует наше видео «Работа с Sublime Text».
10 пакетов Sublime Text для Frontend-разработчиков
Sublime Text — один из самых мощных редакторов кода с некоторыми удивительными функциями, и он может быть еще более мощным, если установить Plugins или Packages .Эти плагины добавляют дополнительные функции в Sublime Text. И сегодня существует множество плагинов для удовлетворения практически любых ваших потребностей в кодировании.
Найти хорошее расширение, хотя , может быть очень сложно ; некоторые расширения были полностью оставлены их разработчиками, в то время как другие могут больше не быть совместимы с Sublime Text 3, последней версией (на момент написания этой статьи).
Если вы фронтенд-разработчик, мы выбрали несколько расширений и собрали их для вас в этой статье.Это . Разработчики интерфейса 10 Sublime Text Packages должны попробовать .
Другие похожие сообщения:
1. AlignTab
AlignTab — это плагин для выравнивания ваших кодов. У него есть «Режим предварительного просмотра», который позволяет вам увидеть, как будет применяться выравнивание (с учетом нотации RegEx), прежде чем оно будет применено на самом деле. Он также имеет «Table Mode», который позволяет установить правильное выравнивание для таблиц в формате Markdown , структурированных с конвейерами: | .AlignTab — удобное расширение, позволяющее привести в порядок код и упростить его чтение.
2. Выделение цветом
ColorHighlight — это плагин, который показывает выбранные цветовые коды с их визуальным цветом . Если вы выберете «#fff», он покажет вам белый цвет. ColorHighlighter поддерживает все цветовые форматы CSS, такие как Hex, RGB, HSL, HSV, и включает ключевые слова цвета, такие как «красный», «зеленый» и т. Д. Он также показывает вам переменные LESS, Sass и Stylus, содержащие значение цвета. Это плагин, который поможет вам работать с цветами более интуитивно.
3. MultiEditUtils
Плагин
MultiEditUtils улучшает встроенную в SublimeText функцию «множественного курсора» и «множественного выбора», экономя время на редактирование длинных строк кода . Например: вы можете объединять или менять местами выбранные строки, это также улучшает SublimeText «разделение выделения», позволяя вам указать нотацию для разделения выбранных строк. Я думаю, что это необходимый плагин для установки профессиональным программистам.
4. Git Gutter
Если вы работаете с Git, рекомендуется установить подключаемый модуль Sublime Text Git Gutter.GitGutter покажет флаг в области желоба любых правок, добавлений или удалений, которые вы сделали в своем коде . Это полезный код, позволяющий мгновенно увидеть сравнение вашей редакции кода с вашей фиксацией, веткой или репозиторием HEAD.
5. Модифицированный
Modific полезен, когда вы используете Git или SVN в своей работе. Как и GitGutter, Modific отметит изменение ваших кодов. Помимо выделения изменений, вы также можете просмотреть или сравнить разницу между текущим кодом и последней фиксацией, нажав Ctrl + Alt + D.Другие вещи, которые вы можете сделать с Modific, включают предварительный просмотр кода для текущей строки , а также , откат модификации кода .
6. Inc Dec Value
Inc Dec Value позволяет одновременно увеличивать или уменьшать числа на , даже если они находятся на разных линиях . Помимо чисел, вы также можете изменить значение дат и цвета HEX. Чтобы использовать этот плагин в целом, поместите курсор справа от числа, затем нажмите Alt + ↑, чтобы увеличить число, или Alt + ↓, чтобы уменьшить число.Вы также можете использовать колесо мыши.
7. FileBrowser
FileBrowser предлагает новый способ навигации по файлам и папкам в каталоге проекта . Когда вы устанавливаете этот плагин, вы можете получить доступ к каталогу вашего проекта на новой боковой панели и перемещаться по нему, не отрывая рук от клавиатуры — как профессиональный программист. По мере привыкания этот плагин может постепенно ускорить ваш рабочий процесс.
8. IconFont
IconFont предоставляет фрагменты для многих популярных шрифтов с иконками, таких как FontAwesome, PaymentFont, Typicons и Github Octicons.Он работает аналогично обычным фрагментам HTML, где сокращений будут расширены до полноразмерных классов и HTML-кода для каждого значка.
9. DistractionFreeWindow
Хотя встроенная функция Sublime Text «Свободное отвлечение» позволяет вам сосредоточиться на набираемом вами коде или контенте, в этом режиме миникарта, боковая панель и все другие вкладки скрыты . Отсутствие отвлекающих факторов не должно означать потерю доступа к этим функциям. Здесь на помощь приходит DistractionFreeWindow, чтобы дать вам больше гибкости с точки зрения того, как должен вести себя режим без отвлечения внимания.
10. FilterLines
FilterLines позволяет выполнять поиск в строках документа по заданной «строке ключевого слова» или «нотации RegEx». Это удобная функция, позволяющая работать с большими объемами необработанных данных в форме JSON, JavaScript Array, CVS.
Настройка Sublime Text для предварительного просмотра вашего кода в веб-браузере
Предположим, вы кодируете HTML в Sublime Text и хотите проверить, как он выглядит в браузере. Некоторые текстовые редакторы (например, BBEdit) имеют функцию, позволяющую открывать страницу в браузере, но Sublime Text — нет.Вот как это сделать в Sublime Text.
Установите инструмент выбора браузера
Поскольку вы веб-разработчик, вы собираетесь (а) иметь более одного веб-браузера на вашем компьютере и (б) хотите протестировать свою работу в более чем одном браузере. Чтобы облегчить себе жизнь, вам нужно установить инструмент выбора браузера. В моей книге Mac OS X Snow Leopard для опытных пользователей я объяснил это так:
У меня на Mac всегда есть несколько веб-браузеров, и я люблю переключаться между ними.На самом деле, иногда я нажимаю ссылку и хочу открыть ее в Safari, потому что я хочу распечатать страницу и считаю, что Safari делает это лучше, чем любой другой браузер, но через несколько минут я нажимаю ссылку и хочу открыть его в Firefox, потому что у меня этот браузер настроен для загрузки музыки и фильмов. В Mac OS X, как и в Windows и Linux, я могу указать браузер по умолчанию для моей системы, но этот браузер используется для всего. Было бы неплохо, если бы я мог выбирать между браузерами «на лету» по мере необходимости?
С помощью инструмента выбора браузера вы можете! Вот мои рекомендации:
- Mac OS X: Раньше я действительно любил Choosy, но со времен Mountain Lion он сломался.Итак, теперь я использую MultiBrowser. Это не так гладко, но работает с Mountain Lion, и это бесплатно (хотя я был счастлив заплатить 12 долларов за Choosy)
- Windows: Я никогда не использовал его, но похоже, что вам нужен Browser Chooser.
Установите их, настройте для распознавания веб-браузеров на вашем компьютере (Firefox, Chrome, Opera, Safari и IE, если вы используете Windows) и установите их в качестве веб-браузера по умолчанию на вашем компьютере. Как вы это сделаете, зависит от вашей ОС:
- Mac OS X: откройте Safari и выберите Safari> Настройки> Общие.В качестве веб-браузера по умолчанию выберите MultiBrowser.
- Windows: щелкните меню «Пуск» (или его эквивалент) и введите «Установить программы по умолчанию» в поле поиска. В появившемся окне выберите Browser Chooser, а затем нажмите Set This Program As Default.
Метод 1. Установите подключаемый модуль «Просмотр в браузере»
Это самый простой способ, но я не смог заставить его работать на моем Mac. Обратите внимание: я предполагаю, что вы установили расширение Package Control для Sublime Text.
1. Нажмите Command-Shift-P (если вы используете Mac) и Ctrl-Shift-P (если вы используете Windows), чтобы открыть палитру команд.
2. Введите Install Package , пока не увидите, что выбран «Package Control: Install Package». Нажмите Ввод.
3. В текстовом поле начните вводить Просмотр в браузере , пока этот пакет не будет выбран. Как только это произойдет, нажмите Enter, чтобы установить его.
4. Перезапустить Sublime Text.
Теперь, когда у вас открыта веб-страница в Sublime Text, просто нажмите Ctrl-Alt-V, и в вашем браузере должен открыться инструмент выбора, позволяющий вам выбрать, какой браузер открыть.
Подробнее о пакете «Просмотр в браузере» можно прочитать на GitHub.
Метод 2: Создание системы сборки
Это немного больше работы, но вы также получаете больший контроль.
1. В Sublime Text перейдите в Инструменты> Система сборки> Новая система сборки. В Sublime Text откроется новая вкладка с именем untitled.sublime-build со следующим текстом в ней ¹:
```
  {
    "cmd": ["make"]
}
  
```
2. Если вы используете Mac, замените его следующим:
```
  {
    «cmd»: [«открыть», «-a», «/ Applications / MultiBrowser.app "," $ file "]
}
  
```
  Если вы используете Windows, замените его следующим:
```
  {
    "cmd": ["C: \ Program Files \", "$ file"]
}
  
```
3. Сохраните файл. Назовите его Выберите Browser.sublime-build . Sublime Text должен быть достаточно умным, чтобы разместить его в нужном для вас месте, но если это не так, сохраните его в следующих местах:
  - Mac OS X: ~ / Библиотека / Поддержка приложений / Sublime Text 2 / Пакеты / Пользователь
  - Окна:
4. Перезапустить Sublime Text.
Теперь, когда вы хотите предварительно просмотреть свою работу в Sublime Text в веб-браузере, выполните одно из следующих действий:
- > Сборка
- Нажмите Command-B (Mac) ² или Ctrl-B (Windows)
В вашем браузере должен открыться инструмент выбора, позволяющий выбрать браузер, в котором вы хотите видеть свою веб-страницу.
Вы можете узнать больше о Build Systems on Sublime Text на http://www.sublimetext.com/docs/build.
.