Плагины 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.run_command("jshint"). Для этого рекомендуется настроить собственную комбинацию клавиш, перейдя в «Настройки» -> «Привязки клавиш» — «Пользователь» и добавив команду, как { "keys": ["ctrl+shift+j"], "command": "jshint" }в этом массиве.

Форматирование

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

Sublime-jsfmt

Этот плагин поддерживает обе версии Sublime Text и автоматически форматирует код JavaScript в соответствии с определенным стилем. Разработчику не нужно читать предупреждения и исправлять проблему с форматированием вручную. Его можно установить через диспетчер пакетов, выбрав jsfmtв раскрывающемся меню.

Использование: файл .jsfmtrc для конкретного проекта можно поместить в корневой каталог проекта для конфигураций. Доступ к нему можно получить по следующему пути: Preferences -> Package Settings -> Sublime JSFMT. Кроме того, есть возможность настроить сочетание клавиш, перейдя в «Настройки» -> «Привязки клавиш» — «Пользователь» и добавив { "keys": ["ctrl+q"], "command": "format_javascript" }в массив.

JsФормат

Он поддерживает обе версии Sublime Text. Этот плагин форматирования JavaScript использует средство форматирования командной строки из jsbeautifier в фоновом режиме для форматирования всего файла js, json или только выбранной части файла. Специфическую конфигурацию проекта также можно выполнить с помощью настроек файла .jsbeautifyrc. Кроме того, стили пробелов и форматирования также настраиваются.

Использование: привязка клавиш по умолчанию предназначена ctrl+alt+fдля Windows и cmd+option+fMac. Плагин использует настройки табуляции/отступа, настроенные со стандартными translate_tabs_to_spacesи tab_sizeвозвышенными настройками.

Анализ кода

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

Терн для возвышенного

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

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

Вы должны убедиться, что Node.js и npm установлены, прежде чем приступить к установке этого плагина.

Использование: Просто используйте alt+., чтобы перейти к определению объекта, на который указывает курсор, и alt+,вернуться туда, где вы были при выполнении предыдущей alt+.команды. Наконец, alt+spaceчтобы выбрать все ссылки на определенную переменную в текущем файле.

Подсветка синтаксиса

В этом разделе мы рассмотрим плагин подсветки синтаксиса.

JavaScriptСледующий

Этот плагин является превосходной подсветкой синтаксиса JavaScript. Помимо улучшения подсветки синтаксиса для ES5, он также поддерживает новый синтаксис ES6, такой как модули, краткие методы, стрелочные функции, классы и генераторы. Его можно установить через Package Control, выбрав JavaScript Nextиз выпадающего списка.

Использование: чтобы использовать этот плагин для отдельного файла JavaScript, вы можете изменить настройку в разделе view -> syntax -> JavaScriptNext.Чтобы установить его в качестве синтаксиса JavaScript по умолчанию, откройте файл javascript, затем выберите View -> Syntax -> Open all with current extension as... -> JavascriptNext. ColorScheme также можно изменить, выбрав один из Preferences -> Color Scheme -> JavaScriptNext.

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

Теперь мы познакомимся с плагином, который упрощает написание комментариев к коду и документации.

возвышенное-jsdocs

Плагин DocBlockr поддерживает как Sublime text 2, так и 3 для JavaScript, включая спецификации ES6. Его можно установить, просто выбрав DocBlockr в папке package control. Этот плагин легко настраивается и позволяет автоматически заполнять комментарии, расширять комментарии, украшать комментарии, добавлять документацию, относящуюся к переменным и функциям.

Использование: Напишите и /**нажмите Enter или Tab, чтобы создать новую строку и закрыть комментарий. При написании документации для функции вы увидите, что она пытается сделать разумное предположение о возвращаемом значении, а в случае переменной она пытается определить тип переменной по ее имени.

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

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

Вывод

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