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

SublimeLinter

Next up is SublimeLinter, which provides amazing ESLint and JSHint integration into Sublime. A linter will look over your code and verify it has proper styling and proper syntax based on a configuration file that can be checked in with your source code. No matter if you’re a beginner or have been programming for most of your life: in JavaScript, a linter is a must have. Check out the ESLint or JSHint about pages to see what they can do for you. Depending on which you chose for your project, you’ll also need the supporting packages of SublimeLinter-eslint or SublimeLInter-jshint.

In order for either of these to work, you must include a linter either into your project dependencies or install it globally:

If you’re unsure how to use npm, check out our tutorial on getting started with Node Package Manager.

If you’ve installed and configured it correctly, you should see the changes when you open or save a JavaScript file. The plugin is incredibly configurable and can be made to report in a number of ways that might be better for your workflow. By default, the description of the errors will be reported in the status bar at the bottom of the editor.

sublime лучшие плагины — phpjs

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

SublimeLinter + SublimeLinter-php / SublimeLinter-jsl / SublimeLinter-jscs . Просто маст-хэв любого саблаймера. Дебаггер моментально подстветит ошибку.
SFTP — шикарный плагин с гибкой настройкой.
IntelliDocs / DocPHPManualer — быстрые подсказки в стиле phpstorm. hkeys: F2 / Ctrl+Alt+D.
Emmet — просто по умолчанию, настолько нужная вещь.
HTML, CSS, JS prettify — форматирование кода.
Local history — просмотр истории файла.
Compare Side-By-Side.

Вот более полный список файла Package Control.sublime-settings

его надо кинуть в папку .config/sublime-text-3/Packages/User . Конечно, прежде должен быть руками установлен менеджер плагинов Package control.Плагин sftp легко крякнуть, вставив код в .config/sublime-text-3/Packages/User/SFTP.sublime-settings

Некоторые горячие клавиши (~/.config/sublime-text-3/Packages/User/Default (Linux).sublime-keymap)

Билд пхп — New build system (Packages/User/PHP.sublime-build)

Автосохранение (~/.config/sublime-text-3/Packages/User/Preferences.sublime-settings)

Sublime linter sublime-text-3/Packages/User/SublimeLinter.sublime-settings

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

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

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

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

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

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

Вставьте команду и нажмите Enter.

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

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

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

Принимает длинные строки 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>

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

После: navIDMenuSystemClassNavMenuIsOpen

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

Данная публикация представляет собой перевод статьи «Sublime Text 3 Plugins for Web Developers» , подготовленной дружной командой проекта Интернет-технологии.ру

Babel

Of course, the first one on my list is the Babel plugin. This plugin adds proper syntax highlighting to your ES6/2015 and React JSX code. After installing the plugin, the first thing you should do is set it as the default syntax for all of your JavaScript and TypeScript file types.

If you haven’t yet discovered the joy of Babel, I highly suggest it. It allows you to compile ES6/ES7/ESNext, JSX, and TypeScript code down to ES5 for full browser support. It integrates well with all popular build tools and the CLI. Obviously, it doesn’t support legacy browsers, but you can follow the tips on their caveats page if you need to support IE10 and below.

TrailingSpaces

If you’re working in a team environment or in an environment that isn’t obsessively customized, this plugin is going to quickly become a close friend. There’s nothing more annoying than seeing a line change in a commit that does nothing to the actual code, but changes a simple, useless space at the end of a line.

But if you’re the kind of person who tries to keep their Sublime Text plugins on the lighter side, you can just add to your User Preferences to have Sublime Text remove these for you on save. I prefer just to be able to see where they are, to make the changes myself, with the added benefit of being able to catch them in other files I’m not explicitly modifying at the time. Even if you have that option enabled, it doesn’t hurt to have this plugin installed … just in case.

Package Control Sublime Text 3

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

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

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

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

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

Пишем простой плагин для Sublime Text 2 / Habr

Почему Sublime Text 2

Приятный глазу тёмный интерфейс, визуальные эффекты и Distraction Free Mode
Панелька с редактируемым текстом в миниатюре. Интересная и действительно удобная находка!
Множественное выделение и редактирование
Все фичи свойственные большинству продвинутых редакторов: подсветка синтаксиса, форматирование кода, автодополнение и т.д.
То чего нет «в коробке» можно скачать из репозитария! Да-да, после совершения простейших манипуляций в Sublime появляется полноценная система управления пакетами, почти как в убунте или дебиане.
Если и этого не достаточно — прямо в главном меню есть пункт «New Plugin». Жмем на него и пишем плагин реализующий необходимый нам функционал на языке Python. Об этом и пойдет речь.
Стоит это чудо $59 за одну, либо $500 за 10 лицензий. Однако если не хочется, то можно и не платить. Ограничений никаких в этом случае нет, просто изредка будет всплывать напоминание.

Tools -> New Plugin…

dec_to_hex.py

Добавляем пункты меню. Прописываем клавиатурное сочетание

Preferences -> Key Bindings-User

Context.sublime-menu

Думаю, что как и в предыдущем случае всё понятно без комментариев. Сохраняем в тот же каталог, в который сохранили плагин. Т.е. %USERPROFILE%\AppData\Roaming\Sublime Text 2\Packages\User, для пользователей Windows. Там же создаём файл Main.sublime-menu. Я посчитал, что этот пункт будет уместнее всего в меню Edit, поэтому в файле Main.sublime-menu написал следующее:

Dec To Hex

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

SideBar Enhancements

The first plugin to make this list that’s not solely dedicated to JavaScript has to be SideBar Enhancements. Out of the box, Sublime Text has very few options for manipulating files in your sidebar file tree. To put it simply, SideBarEnhancements fixes that. This plugin notably provides a move to trash option for files and folders, an open with.. option, and even a clipboard. It also lets you open files in your web browser, copy the content of a file as (which is especially handy for embedding images in CSS) and provides a host of search operations. As an added bonus, it integrates nicely with SideBarGit to provide Git commands direct from the sidebar.

With the ever-increasing size of JavaScript code bases, a sensible means of navigating your project and being able to manipulate your project’s files is essential. Therefore, this plugin becomes a must.

Лучшие плагины для Sublime Text / Habr

Git

git add -Aaddquick

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

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

/**Tab

ColorPicker

Ctrl/Cmd + Shift + C

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

Напоследок:

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) — плагин ведет историю буфера обмена, что позволяет вставить не только последний скопированный фрагмент кода, но и любой из предыдущих.
Темы и цветовые схемы:

* В некоторых репозиториях указано, что плагин написан под ST2, но я все проверял и многое использую сам под ST3.* Я не стал описывать ряд плагинов, которые выполняют действия по форматированию, компиляции, оптимизации, ибо искренне убежден, что это задачи для Grunt, Gulp, Prepros или CodeKit.

Case Conversion

До: 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.

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

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

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

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

JsPrettier

Do you or your team prefer taking a fully automated approach to linting to totally ensure it’s perfect? Then you’re probably using Prettier, an opinionated code formatter. And if you are, then wouldn’t it be nice to be able to see the changes on the file you’re currently editing and not have to wait for the build to make the changes for you? That’s where Prettier comes in. This plugin allows developers to run Prettier on the current file they’re editing from within Sublime.

If you’re not using Prettier as an automated tool, this plugin can come in useful as a modern replacement for other Sublime Text plugins such as JsFormat, which can help bring some readability to compacted files or just bad coding standards.

However, if you’re already using ESLint for your project, then ESLint-Formatter would probably be more beneficial, as it will run on the file you’re currently editing.