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

2022-04-11

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

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

Package Control Sublime Text 3
- Package Control Sublime Text 3 - установка
HTMLPrettify
Emmet Sublime Text 3
BracketHighlighter
JQuery
Case Conversion

Package Control Sublime Text 3

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

Package Control Sublime Text 3 - установка

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

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

Package Control Sublime Text 3 - установка - 2

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

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

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

HTMLPrettify

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

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

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

Введите HTMLPrettify:

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

Emmet Sublime Text 3

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

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

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

<div id="page">
  <div class="logo"></div>
  <ul id="navigation">
    <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 id="menuSystem" class="navMenu isOpen">
  <div id="hotelLogo">
    <div class="navMenuIcon logoIcon"></div>
    <div id="arrowPointer"></div>
    <ul id="navMenuMain">
      <li class="navMenuItem navMenuItem001">
        <div class="navMenuIcon">Item 1</div>
        <a href="">Item 1</a>
      </li>
      <li class="navMenuItem navMenuItem002">
        <div class="navMenuIcon">Item 2</div>
        <a href="">Item 2</a>
      </li>
    </ul>
  </div>
</nav>

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

BracketHighlighter

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

JQuery

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

Case Conversion

Позволяет переключаться между 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.

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