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

Однако каждая команда должна придерживаться единого стандарта программирования. Так код будет легче просматривать и поддерживать. В этом помогает ESLint.

ESLint  —  инструмент статической проверки кода, используемый для мониторинга качества и стилистической выдержанности кода JavaScript. TSLint, применявшийся ранее для проверки кода на TypeScript, уже устарел. Сегодня ESLint используется и для кода TypeScript.

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


Установите Node.js

Пакет ESLint будет установлен менеджером пакетов Node (npm). Поэтому потребуется установить на компьютер Node.js. Его можно загрузить по этой ссылке. Команды для установки Node.js в системе Linux приведены ниже. Обратите внимание, что в версию системы со временем будут вноситься изменения, но команды останутся прежними.

# Загрузите пакет с сайта https://nodejs.org/en/

# Разархивируйте файлы в место назначения, например в базовый каталог.
$ cd $HOME/Downloads
$ tar xvf node-v18.7.0-linux-x64.tar.xz -C $HOME

# Добавьте путь к папке `/bin` в `PATH` в `.bashrc`, чтобы 
# система могла найти исполняемые файлы:
$ export PATH=$PATH:$HOME/node-v18.7.0-linux-x64/bin

Настройте папку проекта

Если вы работаете с JS-фреймворком, то папка проекта обычно создается автоматически. Тем не менее создадим ее с нуля, чтобы настройки, введенные позже, можно было использовать повсеместно. Для инициирования проекта Node.js выполните следующие команды:

# Создайте папку проекта и перейдите в нее:
$ mkdir js-ts-linting-example
$ cd js-ts-linting-example

# Инициируйте проект, а именно сгенерируйте начальный `package.json`:
$ npm init

Введите информацию о проекте, следуя указаниям мастера настройки. На основе предоставленной информации будет создан файл package.json. Поскольку проект может быть создан не на Node.js, шаблонный код, такой как main: index.js, можно удалить. Мы обновим раздел scripts позже, когда ESLint будет установлен и настроен.


Установка ESLint и настройка конфигурационного файла

Чтобы установить и настроить ESLint, выполните следующую команду:

$ npm init @eslint/config

Выберите опции, которые лучше всего подходят для проекта, и файл package.json будет обновлен соответствующим образом. Для данного проекта были выбраны следующие опции:

✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · standard
✔ What format do you want your config file to be in? · JavaScript

Если в проекте не используется TypeScript, можно пропустить опции для TypeScript в процессе установки. В противном случае нужно будет установить и TypeScript:

$ npm install --save-dev typescript

На этом этапе файл package.json будет выглядеть следующим образом:

{
"name": "js-ts-linting-example",
"version": "1.0.0",
"description": "Demo project for setting up ESLint for JavaScript/TypeScript code.",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Lynn",
"license": "ISC",
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.33.0",
"@typescript-eslint/parser": "^5.33.0",
"eslint": "^8.21.0",
"eslint-config-standard": "^17.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-n": "^15.2.4",
"eslint-plugin-promise": "^6.0.0",
"typescript": "^4.7.4"
}
}

Чтобы использовать ESLint для кода TypeScript, потребуется файл конфигурации для TypeScript под названием tsconfig.json. Этот файл обычно автоматически генерируется JS-фреймворками, такими как Angular. Если же его нужно создать с нуля, выполните эту команду с помощью npx:

$ npx tsc --init

Будет создан файл tsconfig.json со множеством шаблонов кода, большинство из которых не нужно менять. Вы можете настроить их соответствующим образом, исходя из ваших требований.

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

Этот файл содержит пользовательские настройки для ESLint. Для проекта, написанного на JavaScript, можно использовать его напрямую, если вам не нужны пользовательские настройки. Однако нам нужно добавить настройки, прежде чем использовать его для проверки кода TypeScript. Кроме того, мы добавим несколько правил для проверки кода. Обновленный файл .eslintrc.js имеет следующее содержание:

module.exports = {
env: {
browser: true,
es2021: true
},
extends: [
'standard',
'eslint:recommended',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: [
'@typescript-eslint' // Для TypeScript.
],
overrides: [ // Используем `overrides`, чтобы ESLint мог проверять файлы как JS, так и TS.
{
files: ['*.ts', '*.tsx'],
extends: [
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
],
parserOptions: {
tsconfigRootDir: __dirname,
project: ['./tsconfig.json'],
},
},
],
ignorePatterns: ['.eslintrc.js'],
rules: {
quotes: ["error", "double"], // Использовать двойные кавычки.
semi: ["error", "always"], // Всегда добавлять точку с запятой в конце утверждения.
indent: ["error", 2], // Отступ — это два пробела.
"no-console": "error" // Избегать использования в коде методов на консоли (`console`).
}
}

Важно отметить, что потребуется добавить настройки для кода TypeScript в разделе overrides, иначе ESLint не получится использовать для одновременной проверки кода JavaScript и TypeScript.

Для правил ключами являются имена правил, которые можно найти здесь, а значениями  —  действия для соответствующих правил. Если значение является строкой или числом, то это уровень ошибок. В данном случае error или 2 означает, что нарушение правила вернет ошибку, и код выхода будет равен 1. Если значение представляет собой массив, то первый элемент  —  это уровень ошибок, а второй  —  конфигурация для правила. Например, первое правило определяет, что следует использовать только двойные кавычки, иначе будет возвращена ошибка.

Если увидите в IDE предупреждение о том, что .eslintrc.js не включен ни в один путь компилятором TypeScript, то либо добавьте его в линтинг, либо проигнорируйте его. Игнорировать проще: нужно просто добавить новый ключ ignorePatterns, как показано выше, или добавить его в файл .eslintignore. Если хотите также линтить этот файл, добавьте его в tsconfig.config. Если нужно добавить .eslintrc.js для линтинга, обратитесь к этому обсуждению на StackOverflow.

Если увидите сообщение TS2304:Cannot find name '__dirname' в .eslintrc.js, выполните эту команду, чтобы исправить возникшую ошибку:

$ npm install @types/node --save-dev

Использование ESLint для проверки кода JavaScript

Теперь, когда ESLint установлен и настроен, добавим этот JS-файл в папку проекта и применим ESLint для его проверки. Все используемые здесь файлы можно найти в конце статьи.

function sum(x, y) {
    return x + y
}

const x = 100;
const y = '200';
const xPlusY = sum(x, y);
console.log(`${x} + ${y} = ${xPlusY}`)

В этом файле есть несколько очевидных ошибок и нестандартное форматирование, которые могут быть проверены и исправлены с помощью ESLint.

Если хотите, чтобы ESLint проверил только код, выполните эту команду:

$ npx eslint src/example.js

Вы увидите ошибки, которые стоит исправить для улучшения кода:

1:13  error  Missing space before function parentheses     space-before-function-paren
  2:1   error  Expected indentation of 2 spaces but found 4  indent
  2:17  error  Missing semicolon                             semi
  6:11  error  Strings must use doublequote                  quotes
  8:1   error  Unexpected console statement                  no-console
  8:39  error  Missing semicolon                             semi

✖ 6 problems (6 errors, 0 warnings)
  5 errors and 0 warnings potentially fixable with the `--fix` option.

Если хотите, чтобы ESLint автоматически исправлял код, добавьте опцию --fix к вышеуказанной команде:

$ npx eslint src/example.js --fix

Большинство косметических погрешностей могут быть исправлены ESLint автоматически. Однако есть некоторые проблемы, которые необходимо исправлять вручную. Например, ESLint не удалит console.log автоматически  —  вам придется удалять его самостоятельно:

8:1  error  Unexpected console statement  no-console

✖ 1 problem (1 error, 0 warnings)

Использование ESLint для проверки кода TypeScript

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

function sum(x: number, y: number): number {
    return x + y
}

const x = 100;
const y = '200';
const xPlusY = sum(x, y);
console.log(`${x} + ${y} = ${xPlusY}`)

Для проверки кода TypeScript используется та же команда. Можно специально указать расширение, но это необязательно:

$ npx eslint --ext .ts src/example.ts

Будут выданы такие же ошибки:

1:13  error  Missing space before function parentheses     space-before-function-paren
  2:1   error  Expected indentation of 2 spaces but found 4  indent
  2:17  error  Missing semicolon                             semi
  8:1   error  Unexpected console statement                  no-console
  8:39  error  Missing semicolon                             semi

✖ 5 problems (5 errors, 0 warnings)
  4 errors and 0 warnings potentially fixable with the `--fix` option.

Однако в коде TypeScript кавычки не проверяются  —  это известная проблема. Чтобы проверять кавычки в коде TypeScript, вам придется обновить правила в соответствии с этой инструкцией:

{
// Другие правила в исходном файле.
"quotes": "off", // Обратите внимание: вы должны отключить базовое правило, так как оно может сообщать о неправильных ошибках.
"@typescript-eslint/quotes": ["error", "dobule"]
}

Кроме того, проблему с кавычками для кода TypeScript можно легко исправить с помощью Prettier.


Использование tsc для проверки кода TypeScript

Следует отметить, что непоследовательный тип в строке 7 в example.ts не указывается ESLint. К сожалению, ESLint сообщает только об ошибках собственных линтеров, игнорируя ошибки компиляции TypeScript.

Проверить ошибки компиляции TypeScript для типов, как показано в нашем примере, можно с помощью команды tsc. Обычно к ней добавляется опция --noEmit, поскольку чаще всего нужно проверить только ошибки компиляции (без создания скомпилированных файлов JavaScript).

Воспользуемся tsc для проверки кода TypeScript:

$ npx tsc src/example.ts --noEmit

Теперь видим непоследовательный тип в строке 7 при вызове функции sum:

example.ts:7:23 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

7 const xPlusY = sum(x, y);
                        ~
Found 1 error in example.ts:7

Добавление скриптов для линтинга в package.json

Добавим несколько скриптов в package.json, которые можно будет легко вызывать для проверки всех файлов в проекте:

"scripts": {
"check-types": "npx tsc --noEmit",
"lint": "npx eslint 'src/**/*.{js,jsx,ts,tsx}'"
}

Обратите внимание, что можно добавлять расширения файлов в eslint, но не в tsc.

Теперь запустим проверку типов и линтинг для всех файлов в проекте:

$ npm run check-types
$ npm run lint

Использование ESLint в VS Code

Использование ESLint в командной строке является обязательным, если необходимо добавить его в конвейеры проверки кода, такие как Git-хуки pre-commit. При написании кода желательно иметь обратную связь с интерактивной средой разработки (IDE) в режиме реального времени, чтобы была возможность немедленно исправлять проблемы. Использование VS Code позволяет установить расширение ESLint для проверки кода именно в таком режиме.

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

Теперь при внесении какой-либо ошибки в .eslintrc.js вы сможете сразу же увидеть ее с помощью сообщения об ошибке:

Наконец, если расширение ESLint установлено и включено, а файл .eslintrc.js настроен правильно, можно сразу же увидеть ошибки в VS Code:


Теперь вы знаете, как установить и настроить ESLint для проверки качества и стилистической выдержанности кода JavaScript и TypeScript. Весь код из статьи можно найти в этом репозитории.

Читайте также:

Читайте нас в TelegramVK и Дзен


Перевод статьи Lynn Kwong: How Use ESLint to Write Elegant Code in JavaScript and TypeScript

Предыдущая статья5 секретов продуктивной работы в VS Code
Следующая статьяПодробное знакомство с кортежами в C#