Как настроить Atom для разработки на JavaScript

Создание удобного рабочего окружения.

Содержание
  1. Стандарты кодирования
  2. Автоматическое дополнение
  3. Автоматическое дополнение файлов и модулей
  4. Переход на определения

Атом – популярный бесплатный редактор кода, созданный разработчиками GitHub’а для программистов. Он активно развивается, для него есть сотни плагинов, его легко настраивать под свои нужды.

Атом построен на технологии Electron, поэтому он работает на Windows, Linux и macOS. Среди базовых возможностей редактора, доступных сразу после установки:

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

Пакетный менеджер нужен для установки и удаления пакетов расширений (плагинов). Для удобной разработки на JavaScript для бэкенда и фронтенда нужно установить несколько пакетов.

install package in atom

Для установки нового пакета зайдите в настройках во вкладку “Install”, введите название пакета в строке поиска, нажмите кнопку “Install”.

Стандарты кодирования

Eslint – это утилита, проверяющая стандарты кодирования на JavaScript. Стандарт де-факто в мире JS.

eslint atom

Нужно сначала установить eslint в системе, а потом установить расширение Атома, которое будет использовать установленный линтер. Есть разные способы интеграции линтера с расширением. Мы рассмотрим установку линтера глобально в системе.

  1. Установите Node.js используя пакетный менеджер вашей операционной системы.
  2. Установите eslint командой npm install -g eslint. Вероятно, вам понадобится использовать sudo.
  3. Установите плагины, которые конфигурируют eslint. Без них (по умолчанию) eslint ничего не проверяет.
     npm install -g eslint-config-airbnb-base eslint-plugin-import
    
  4. eslint требует наличия конфигурационного файла. Создайте в корне вашего проекта файл .eslintrc.yml со следующим содержанием:

     extends:
       - 'airbnb-base'
     env:
       node: true
       browser: true
    
  5. Установите расширение “linter-eslint” в Атоме.
  6. Отметьте галочку Use Global Eslint в настройках расширения (Settings -> Packages -> Linter Eslint).

Автоматическое дополнение

Встроенное автодополнение в редакторе работает по самой примитивной схеме, анализируя содержимое файлов. С помощью сторонней утилиты “tern” можно добиться более продвинутого поведения. “tern” умеет:

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

tern js

Расширение Атома atom-ternjs не требует установки ничего другого и работает само по себе.

Автоматическое дополнение файлов и модулей

Полезное расширение autocomplete-modules автоматически дополняет название файлов и модулей при импорте.

autocomplete-modules

Переход на определения

js-hyperclick позволяет быстро перемещаться к определению функции или переменной по клику.

js-hyperclick


Кирилл Мокевнин, Рахим Давлеткалиев

Поделиться
Отправить