ESLint, Prettier + VSCode

Это часть 2/2 моей серии статей о настройке минимального проекта Node.js & Express с помощью Babel. Ознакомьтесь с частью 1 здесь:



Минимальная установка Node.js, Express и Babel
Давайте настроим базовый API Node.js / Express.js, который использует Babel. Babel «транспилирует наш код и модуль ES2015 +… medium.com »



В части 1 я настроил Babel в новом проекте Node / Express, рассказал о версиях Node, настроил сценарии для использования Babel для разработки и производства и подумал, стоит ли Babel того ( tldr; я думаю, что любое направление справедливо).

В этом посте мы рассмотрим настройку ESLint и Prettier в нашем проекте Node, а затем специально рассмотрим пару параметров настройки, которые я использую в VS Code. Почему эта установка входит в мою серию Минимальная установка? Я думаю, что это ключ к тому, чтобы начать свой проект с некоторых автоматических стилей и статических проверок для передовых методов / обнаружения ошибок из коробки.

Один из ключевых вопросов, на который мы обратимся, - «Как заставить ESLint и Prettier хорошо работать вместе?» К счастью, это очень распространенный рабочий процесс для современной разработки Node.

Код для всей установки (части 1 и 2 моего поста) можно найти здесь:



neightjones / node-babel-template
Этот шаблон создает базовый API Node.js / Express.js с использованием babel. Он также устанавливает удобные значения по умолчанию для eslint и… github.com



Справочная информация: ESLint & Prettier

ESLint

Прямо со своего сайта ESLint ESLint статически анализирует ваш код, чтобы быстро находить проблемы. ESLint проверит ваш код, чтобы увидеть, не нарушаете ли вы какое-либо из его правил (есть много значений по умолчанию, и вы также можете настроить набор правил). Например, вот правило no-dupe-keys. Это довольно просто - ESLint сочтет это ошибкой в ​​вашем коде, если вы создадите объект вроде const x = { hello: 'world', hello: 'Nate' }. Подобные правила очень полезны, потому что могут уберечь вас от ошибки. Другие правила не столько об очевидных ошибках, сколько о лучших практиках.

Красивее

Как они упоминают, Prettier - самоуверенный разработчик кода. Это означает, что они не хотят предоставлять вам массу вариантов, а предпочитают, чтобы вы соглашались со стилем кода, который они помогают вам поддерживать. Тем не менее, мы рассмотрим, как сделать некоторые основные переопределения стиля. Я не возражаю против его твердого мнения - стиль в основном принимается сообществом разработчиков, а автоматическое форматирование является большим преимуществом для последовательности и простоты разработки.

Так в чем же разница? Есть ли совпадения?

Есть ли смысл использовать оба инструмента одновременно? Абсолютно. Красивее говорит здесь. По сути, Prettier заботится обо всех правилах, связанных со стилем (интервалы, запятые, точки с запятой, круглые скобки в стрелочных функциях), а ESLint заботится обо всем, что не связано со стилем, например, о проблемах с неиспользуемыми переменными, повторяющихся ключах в объектных литералах и многом другом. .

Но на самом деле существует совпадение, потому что ESLint также содержит некоторые правила, связанные со стилем. Итак, наша цель - настроить все так, чтобы правила ESLint, связанные со стилем, не противоречили нашей настройке Prettier, поскольку мы решили использовать Prettier в качестве авторитетного стилиста.

Давайте начнем с кода ... для первого шага давайте приступим к базовой настройке ESLint.

Шаг 1: базовая настройка ESLint

Связанное выше репо содержит весь окончательный код для этой настройки.

Начните со следующей установки:

npm install --save-dev eslint eslint-config-airbnb-base eslint-plugin-import

Для чего они нужны?

  • eslint - основной пакет ESLint
  • eslint-config-airbnb-base: ESLint использует различные наборы правил, которые вы или третья сторона можете определить, которые заключаются в выборе правил синтаксиса, которые являются ошибками, или просто предупреждениями и т. Д. Набор правил Airbnb - действительно популярные варианты для автоматического получения твердый набор правил
  • eslint-plugin-import это пакет, который помогает с линтингом относительно выражений стиля модуля ES import / export вместе с путями к файлам и т. Д. Фактически, наш пакет Airbnb отмечает, что нам также нужен этот пакет для использования с его правилами

Теперь мы создаем файл с именем .eslintrc.js, который содержит нашу конфигурацию ESLint. Для начала это будет выглядеть так:

  • Во-первых, мы указываем среду, которая определяет набор глобальных переменных. Мы используем современные es2021
  • Во-вторых, мы extend airbnb-base - теперь мы используем правила линтинга Airbnb.
  • Наконец, мы устанавливаем ecmaVersion и sourceType в нашем parserOptions - ecmaVersion фактически устанавливается автоматически нашим значением es2021 env (es2021 === es12), но мы оставим его здесь, и мы используем модули ES, поэтому module

Давайте проверим, работает ли пока что. Добавьте эту строку как новый скрипт в свой package.json:

"scripts": {
  // ...other scripts,
  "lint": "eslint \"src/**/*.js\""
}

Идите вперед и запустите npm run lint из корня вашего проекта и посмотрите, что появится. Я исправлю ошибки линтинга в образце репозитория, когда он будет опубликован, но вот несколько примеров ошибок, которые я вижу (также есть предупреждения):

  • ошибка Ожидается 1 пустая строка после оператора импорта, за которой не следует другой импорт import / newline-after-import`
  • Expected 1 empty line after import statement not followed by another import - это правило стиля, касающееся пустых строк после импорта
  • 'next' is defined but never used - это ошибка неиспользуемой переменной, относящаяся к параметру next в конечной точке Express (сгенерирована в Части 1 моей настройки)
  • Unable to resolve path to module '#routes/index' - это интересно… в Части 1 мы настраивали абсолютный импорт, используя Babel с псевдонимами… как ESLint должен это понимать? Мы позаботимся об этом позже в этой публикации.

Это хорошее начало - теперь мы знаем, что наш линтер работает и правильно настроен по правилам Airbnb. Мы уже видим, что ESLint жалуется на стилистический элемент (пустая строка после импорта), поэтому теперь мы настроим Prettier и убедимся, что ESLint не заботится о правилах стиля, поскольку мы Передаем это исключительно Prettier.

Шаг 2. Добавьте Prettier

Затем давайте установим Prettier:

npm install --save-dev prettier

И давайте добавим в наш package.json еще один скрипт:

"scripts": {
  // ... other scripts,
  "format": "prettier --write \"src/**/*.js\""
}

Запустите npm run format, который скажет Prettier автоматически пройти и отформатировать код для нас (т. Е. Он фактически изменит ваши файлы, если они еще не соответствуют стандартам Prettier).

Оно работает! Но некоторые вещи мне не подходят… например, в примере проекта вы можете увидеть, что я использую одинарные кавычки. Однако после запуска npm run format Prettier обновил весь мой код, чтобы использовать двойные кавычки, среди других обновлений. Мы можем выполнить настройку с помощью .prettierrc файла в крыше вашего проекта, который выглядит следующим образом:

Эта конфигурация устанавливает точку с запятой, добавляет конечные запятые ко всем объектам, массивам и т. Д., Применяет одинарные кавычки и устанавливает максимум 80 символов в строке. Запустите npm run format еще раз, и вы увидите эти изменения автоматически.

Довольно круто ... но ESLint и Prettier сейчас вообще не общаются. На данный момент будет множество случаев, когда правила ESLint и Prettier конфликтуют, что делает невозможным выполнение обоих. Например, вы можете запустить формат Prettier, который изменит код на такой way создает ошибки ESLint / Airbnb ... но вы не можете изменить его обратно, потому что Prettier будет сообщать об ошибках.

Давайте заставим их работать вместе. Добавьте эти 2 пакета:

npm install --save-dev eslint-plugin-prettier eslint-config-prettier
  • eslint-plugin-prettier это плагин ESLint, который запускает Prettier в фоновом режиме и сообщает результаты как ошибки ESLint. Мы настраиваем это в файле .eslintrc.js, поскольку это плагин ESLint, и в результате ESLint будет управлять кораблем, используя Prettier в качестве инструмента в фоновом режиме.
  • eslint-config-prettier это конфигурация ESLint, которая просто отключает любые правила, которые могут конфликтовать со стилем Prettier. Как они упоминают, поскольку они просто отключают правила и ничего больше не делают, вы хотите использовать это в тандеме с другим набором правил (то есть нашим набором правил Airbnb), отключив правила, которые будут конфликтовать

Обновите свой .eslintrc.js, чтобы он выглядел следующим образом:

Вот обновления:

  • В ключе extends мы сохраняем airbnb-base, но добавляем prettier после правил Airbnb, в котором говорится: «Используйте правила Airbnb, но затем отключите все правила, указанные в eslint-config-prettier»
  • В rules мы помечаем проблемы, которые появляются через Prettier (в eslint-plugin-prettier), как ESLint errors.
  • В plugins мы должны указать, что действительно используем eslint-plugin-prettier

Что происходит сейчас? В ESLint теперь есть все правила, которые могут конфликтовать с отключенным Prettier, поэтому мы знаем, что, когда мы запускаем Prettier (npm run format, как мы его настроили), он больше не может приводить к форматированию кода, который ESLint рассмотрит ошибку.

Во-вторых, давайте еще раз проверим концепцию «сообщения о проблемах Prettier как об ошибках ESLint». В файле app.js в образце репозитория первая строка выглядит так:

import createError from 'http-errors';

Измените его, чтобы использовать двойные кавычки, как это, и удалите точку с запятой:

import createError from "http-errors"

Помните, что в нашем .prettierrc мы указали одинарные кавычки и обязательные точки с запятой. Мы ожидаем, что ESLint будет использовать Prettier в фоновом режиме и сообщать об ошибках Prettier (спасибо eslint-plugin-prettier)… запустить npm run lint и посмотреть, что произойдет:

error: Replace `"http-errors"` with `'http-errors';` prettier/prettier

Прохладный! У нас есть ошибка ESLint, вызванная нашими проверками Prettier, как мы и хотели.

На данный момент наша установка работает довольно гладко, но есть еще одна серьезная ошибка линтинга ...

Шаг 3. Исправьте ошибки линтинга для абсолютного импорта Babel

В первой части этой серии статей мы добавили плагин Babel под названием babel-plugin-module-resolver, чтобы помочь нам определить псевдонимы для включения абсолютного импорта в наш код. Вот результат этой настройки:

import indexRouter from '#routes/index';

Поскольку Babel заботится об этих псевдонимах в процессе сборки, неудивительно, что ESLint не понимает, о чем мы здесь говорим. К счастью, мы можем использовать eslint-import-resolver-babel-module. Это помогает ESLint понять, что он может просматривать пути псевдонимов Babel, чтобы подтвердить существование импортированных файлов.

npm install --save-dev eslint-import-resolver-babel-module

А затем мы добавим settings ключ в наш .eslintrc.js файл, как указано в документации плагина ...

// ... the rest of your .eslintrc.js
  settings: {
    'import/resolver': {
      'babel-module': {},
    },
  },

После этого вы можете запустить npm run lint еще раз, и вы увидите, что эта категория ошибок исчезнет!

Шаг 4. Инструменты в VS Code (необязательно)

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

Вы установите эти два расширения VS Code:

Теперь, когда вы набираете, ваш код будет соединяться с плагином ESLint. Например, введите это в случайной строке:

const x = 'hi';

Сразу же вы увидите красную линию с ошибкой линтинга для no-unused-vars, поскольку эта переменная ничего не делает. Теперь вам не нужно запускать npm run lint, чтобы увидеть, что происходит (хотя иногда все же приятно сделать это, чтобы увидеть, что происходит с вашим проектом в целом).

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

Запустите cmd+shift+p и найдите Preferences: Open Settings (JSON). Скорее всего, вы увидите блок с ключом "[javascript]" (в противном случае создайте пустой блок с этим ключом). Затем добавьте "editor.formatOnSave": true в раздел "[javascript]". Поскольку у меня там были некоторые вещи по умолчанию, теперь у меня есть:

// ... other stuff
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },

Затем я добавляю аналогичный блок для формата json (и вы можете сделать другой, например, typescript и т. Д.):

// ... other stuff
    "[json]": {
        "editor.formatOnSave": true
    }

Теперь Prettier будет работать с вами, пока вы набираете и сохраняете файл. Вернемся к нашему предыдущему примеру в app.js… снова измените первую строку импорта, чтобы использовать двойные кавычки, а не одинарные, и удалите точку с запятой:

import createError from "http-errors"

Теперь сохраните файл ... Prettier исправит это за вас! Это очень удобно при разработке. Часто я пишу код, который, как я знаю, вероятно, нуждается в некотором исправлении (например, моя строка слишком длинная), и было бы здорово положиться на Prettier, чтобы исправить это немедленно. Это сэкономит мне кучу времени на размышления о форматировании.

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