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

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

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

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

Package Control

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

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

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

  • Нажмите Ctrl — обратный апостроф (; `), чтобы открыть Sublime Text Console:
  • Плагины Sublime Text 3 для веб-разработчиков

  • Вставьте команду и нажмите Enter.
  • После запуска команды вы увидите небольшое всплывающее окно с предупреждением:
  • Плагины Sublime Text 3 для веб-разработчиков

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

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

    HTMLPrettify

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

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

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

  • Введите HTMLPrettify:
  • Плагины Sublime Text 3 для веб-разработчиков

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

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

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

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

    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-кода, и увидеть в левом столбце открытие и закрытие скобок:

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

    JQuery

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

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

    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

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

    Перевод статьи «Sublime Text 3 Plugins for Web Developers» дружной командой проекта Сайтостроение от А до Я.

    О нас seoexpert

    продвижение сайта,seo оптимизация,поисковое продвижение,раскрутка сайтов,поисковая оптимизация,продвижение сайта в гугл,seo раскрутка,продвижение сайтов в яндексе,продвижение сайта в google,продвижение сайтов в топ 10,Оптимизация и продвижение сайтов,услуги продвижения сайта,заказать продвижение,продвижение сайтов в топ,сео раскрутка сайта

    Смотрите также

    Страшный зверь трафик

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