Плагіни Sublime Text для розробників JavaScript

Текстовий редактор Sublime є досить знайомим ім’ям серед спільноти розробників (як новачків, так і професіоналів). Його було розроблено з міжплатформною підтримкою для редагування вихідного коду та тексту.

Хоча поточна версія (Sublime text 3) знаходиться на стадії бета-тестування, вона швидша, ніж версія 2, і має багато функцій. Він оригінально підтримує широкий спектр програмування та мов розмітки, а створені спільнотою безкоштовні піднесені модулі текстового редактора підняли його функціональність на нову висоту.

Багато розробників дотримуються цього редактора через величезне сховище плагінів. У цій статті ми зосередимося на деяких плагінах, які є найбільш корисними для розробників JavaScript.

Лінтинг

Інструменти лінінгу допомагають розробникам виявляти помилки, синтаксичні розбіжності та потенційні проблеми. Його також можна використовувати, щоб переконатися, що проект відповідає певним настановам кодування.

SublimeLinter-eslint

Він підтримує версію Sublime Text 3 і надає інтерфейс для ESLint для роботи з файлами, що мають синтаксис «JavaScript». SublimeLinter 3, Node.js, npm і eslint є обов’язковою умовою для встановлення цього плагіна. Він містить безліч правил із опціями для налаштування Вам буде надано точну опцію для запису у файл конфігурації, щоб вимкнути всі попередження та помилки. Важливо зауважити, що цей плагін єдиний, який підтримує JSX, а підтримка ES6 є набагато більшою краще в порівнянні з іншими плагінами.

Використання: Залежно від конфігурації SublimeLinter, під час редагування або збереження код буде лінтований. Це можна налаштувати за допомогою Choose Lint Modeкоманди.

Sublime-JSHint

Плагін JSHint Gutter сумісний із Sublime Text 2 і 3. Дозволяє розробникам перевіряти код JavaScript на наявність жахливих помилок і умов кодування. Цей плагін також можна налаштувати, щоб показувати підказку в каналі та безперебійно працювати з файлами .jshintrc для конкретного проекту. Він покладається на JSHint, розгалуження JSLint. Оскільки лінтер написаний на JavaScript, Node.js потрібен для інтерпретації коду JavaScript поза браузером.

Використання: Ctrl+alt+Jдля Windows або Cmd+Option+Jякщо ви користуєтеся Mac. Ви також можете клацнути правою кнопкою миші, вибрати JSHint і натиснути на Lint Code. Інший спосіб — відкрити файл JavaScript, відкрити консоль у Sublime Text із View, потім Show Console і ввести view.run_command("jshint"). Рекомендується налаштувати власну комбінацію клавіш для цього, перейшовши до Параметри -> Прив’язки клавіш – Користувач і додавши команду, як { "keys": ["ctrl+shift+j"], "command": "jshint" }у цьому масиві.

Форматування

Інструменти форматування використовуються, щоб прикрасити блоки коду та відформатувати їх, щоб зробити їх більш читабельними.

Sublime-jsfmt

Цей плагін підтримує обидві версії Sublime Text і автоматично форматує код JavaScript відповідно до певного стилю. Розробнику не потрібно читати попередження та виправляти проблему форматування вручну. In можна встановити через менеджер пакунків, вибравши jsfmtв спадному меню.

Використання: Спеціальний для проекту файл .jsfmtrc можна розмістити в кореневому каталозі проекту для конфігурацій. Доступ до нього можна отримати за таким шляхом: Preferences -> Package Settings -> Sublime JSFMT. Окрім цього, існує можливість налаштувати клавіатурне скорочення, перейшовши до Параметри -> Прив’язки клавіш – Користувач і додавши { "keys": ["ctrl+q"], "command": "format_javascript" }в масив.

JsFormat

Він підтримує обидві версії Sublime Text. Цей плагін форматування JavaScript використовує засіб форматування командного рядка з jsbeautifier у фоновому режимі для форматування всього файлу js, json або лише вибраної частини файлу. Спеціальну конфігурацію проекту також можна виконати за допомогою параметрів файлу .jsbeautifyrc. Окрім цього, пробіли та стилі форматування також можна налаштувати.

Використання: прив’язка клавіш за замовчуванням ctrl+alt+fдля Windows і cmd+option+fMac. Плагін використовує параметри табуляції та відступу, налаштовані зі стандартними translate_tabs_to_spacesта tab_sizeпіднесеними налаштуваннями.

Аналіз коду

Це механізми виведення коду, які використовуються для прискорення процесу розробки шляхом забезпечення автоматичного завершення коду, підказок аргументів функції тощо.

Терн для Sublime

Цей плагін аналізу коду для JavaScript розроблено для інтеграції з редакторами коду для інтелектуального редагування JavaScript. Він оснащений такими чудовими функціями, як:

• Автозаповнення змінних і властивостей
• Підказки аргументів функції
• Запит типу виразу
• Автоматичний рефакторинг

Вам потрібно переконатися, що Node.js і npm встановлено, перш ніж продовжити встановлення цього плагіна.

Використання: просто використовуйте alt+., щоб перейти до визначення предмета, на який вказує курсор, і alt+,повернутися до місця, де ви були під час виконання попередньої alt+.команди. Нарешті, alt+spaceщоб вибрати всі посилання на певну змінну в поточному файлі.

Підсвічування синтаксису

У цьому розділі ми розглянемо плагін підсвічування синтаксису.

JavaScriptNext

Цей плагін чудово підсвічує синтаксис JavaScript. Окрім покращення підсвічування синтаксису для ES5, він також підтримує новий синтаксис ES6, такий як модулі, стислі методи, функції зі стрілками, класи та генератори. Його можна встановити за Package Controlдопомогою вибору JavaScript Nextзі спадного списку.

Використання: щоб використовувати цей плагін для окремого файлу JavaScript, ви можете змінити налаштування в. view -> syntax -> JavaScriptNextЩоб встановити це як синтаксис JavaScript за умовчанням, відкрийте файл JavaScript, а потім виберіть View -> Syntax -> Open all with current extension as... -> JavascriptNext. Схему кольорів також можна змінити, вибравши одну з Preferences -> Color Scheme -> JavaScriptNext.

Документація

Зараз ми перевіримо плагін, який дозволяє досить легко писати коментарі до коду та документацію.

sublime-jsdocs

Плагін DocBlockr підтримує Sublime text 2 і 3 для JavaScript, включаючи специфікації ES6. Його можна встановити за допомогою простого вибору DocBlockr у package control. Цей плагін легко налаштовується та дозволяє автоматично завершувати коментарі, розширювати коментарі, прикрашати коментарі, додавати документацію, що стосується змінних і функцій.

Використання: напишіть і /**натисніть enter або tab, щоб створити новий рядок і закрити коментар. Під час написання документації для функції ви побачите, що вона намагається зробити інтелектуальне припущення про значення, що повертається, а у випадку змінної вона намагається визначити тип змінної за її назвою.

Плагіни для бібліотек JavaScript

Ви можете встановити плагіни для деяких популярних бібліотек JavaScript, таких як AngularJS і jQuery. Крім того, деякі плагіни допомагають пришвидшити процес розробки, надаючи фрагменти коду. Наприклад, плагін фрагмента JQuery можна встановити для розробки jQuery.

Висновок

У цій статті ми розглянули деякі корисні плагіни для розробників JavaScript. Не соромтеся поділитися будь-яким іншим зручним плагіном у розділі коментарів і допомогти спільноті розробників.