Линтинг — JS: Настройка окружения

У кода есть множество разных характеристик, по которым можно судить, насколько хорошо он написан. Среди них есть одна базовая, с которой начинают все разработчики — это стиль написания. Сравните два варианта оформления кода:

// Без форматирования
const find_sum = (a, b) => {
  const c = a + b; return c
}

// С форматированием
const findSum = (a, b) => {
  const sum = a + b
  return sum
}

Второй вариант читается значительно проще. Чем больше будет кода, тем больше будет различий. Хороший стиль кодирования — базовое требование к коду в коммерческой разработке. Это важно, в том числе для упрощения командной разработки. Как правило, в одном проекте работает от нескольких до десятков программистов и крайне важно, чтобы им было легко читать код друг друга не спотыкаясь о неправильное форматирование.

Универсальным решением этой задачи сейчас стала утилита prettier, которая берет весь код в файле и полностью переформатирует его так как нужно в соответствии со своими правилами. Однако этого недостаточно и можно пойти гораздо дальше. Prettier форматирует код, но не вникает в его семантику (назначение). Например, в JavaScript хорошим тоном считается использовать === вместо ==. Так значительно безопаснее и так мы защищаемся от случайных ошибок преобразований типов. Prettier не может автоматически заменять == на === потому что это может сломать код.

Для отслеживания подобных ситуаций существует класс программ, называемых линтерами. Линтеры содержат большое количество правил, которые могут выдать рекомендации как стоит писать код, а как не стоит. Более того, часто линтеры расширяются плагинами под конкретные фреймворки, что позволяет отслеживать специфичные ошибки и давать рекомендации по тому, как писать код в этих фреймворках.

В JavaScript-мире особой популярностью пользуется линтер eslint. Количество правил, по которым он проверяет код, исчисляется сотнями. Посмотрите на этот небольшой участок кода:

let a = 5
a++

С точки зрения форматирования здесь все хорошо, а что скажет линтер? Eslint выдаст три предупреждения:

• Identifier name 'a' is too short id-length. Слишком короткое имя.
• Unary operator '++' used no-plusplus. Используется инкремент, что опасно.
• 'a' is assigned a value but never used no-unused-vars. Переменная не используется, а значит она либо не нужна, либо в коде ошибка.

Ссылки выше ведут на страницы конкретных правил, где подробно объясняется, почему так код писать не нужно и как его писать нужно. Изучать правила eslint очень полезно, они прививают хорошие практики написания кода.

Установка и настройка Eslint

Eslint устанавливается как dev зависимость прямо в проект:

npm install --save-dev eslint @eslint/create-config

После установки его надо настроить, иначе он не будет выполнять проверки. Для этого нужно запустить команду инициализации, которая использует дополнительный пакет @eslint/create-config. Во время настройки eslint задаст много разных вопросов. Мы установили определенные версии пакетов, при которых настройка будет выглядеть так, как показана ниже. Если вы установите другие версии пакетов, то варианты ответов могут отличаться. Но вы всегда можете отредактировать файл настройки вручную.

npx eslint --init
✔ What do you want to lint? · javascript
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · no
✔ Where does your code run? · node
The config that you've selected requires the following dependencies:

eslint, @eslint/js, globals
✔ Would you like to install them now? · Yes
✔ Which package manager do you want to use? · npm
☕️Installing...

Выбор пунктов Browser/Node выполняется по клавише пробела, а подтверждение по Enter

В результате настройки eslint создаст файл, который нужно добавить в репозиторий:

// eslint.config.mjs
import js from '@eslint/js'
import globals from 'globals'
import { defineConfig } from 'eslint/config'

export default defineConfig([
  { files: ['**/*.{js,mjs,cjs}'], plugins: { js }, extends: ['js/recommended'] },
  { files: ['**/*.{js,mjs,cjs}'], languageOptions: { globals: globals.node } },
])

Сам по себе eslint не использует какие-то стилистические правила. Чтобы это исправить нужно добавить стили кодирования. Мы будем использовать ESLint Stylistic. В первую очередь нужно установить пакет:

npm install --save-dev @stylistic/eslint-plugin

После установки нужно добавить правила стилей в файле настроек eslint. Итоговый файл выглядит так:

// eslint.config.mjs
import js from '@eslint/js'
import globals from 'globals'
import { defineConfig } from 'eslint/config'
import stylistic from '@stylistic/eslint-plugin'

export default defineConfig([
  stylistic.configs.recommended,
  { files: ['**/*.{js,mjs,cjs}'], plugins: { js }, extends: ['js/recommended'] },
  { files: ['**/*.{js,mjs,cjs}'], languageOptions: { globals: globals.node } },
])

И последний шаг — запуск eslint:

# Обратите внимание на точку, это указание текущей директории и всех поддиректорий
npx eslint .

Если ошибок нет, то eslint молча завершит свою работу. Если ошибки есть — выведет список с указанием того, что нужно поправить.

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

Кроме нахождения ошибок eslint может их исправлять. По крайней мере те ошибки, которые могут быть исправлены с гарантией сохранения работоспособности. Для этого нужно добавить флаг --fix в запуск:

npx eslint --fix .

Самостоятельная работа

1. Повторите шаги из теории. Установите и настройте линтер в вашем проекте
2. Добавьте в Makefile команды для линтинга и исправления ошибок
3. Подключите в ваш редактор интеграцию с линтером.
4. Запушьте изменения на Github.

В итоге у вас быть настроен Eslint и его интеграция с редактором.

Дополнительные материалы

1. Документация ESlint
2. nodejs-package - пример проекта с настроенным линтером
3. ESLint - расширение для VSCode