Поддержание качества и согласованности кода в крупных проектах может оказаться сложной задачей для разработчиков ПО. По мере роста проектов и расширения команд возрастает вероятность появления несогласованных стилей программирования, пропущенных багов и потенциальных ошибок. Тогда на помощь приходит ESLint — инструмент статического анализа кода. Он помогает выявлять проблемные шаблоны или код, который не соответствует определенным стилевым рекомендациям. Это повышает качество и удобство сопровождения кодовых баз. В этой статье рассказываем об использовании ESLint и о том, как инструмент улучшает процессы разработки.
Что такое ESLint и его роль в разработке
ESLint — утилита для редактирования Javascript с открытым исходным кодом. Ее создал Николас Закас в июне 2013 года. Она часто используется для поиска проблемных шаблонов или кода, который не соответствует определенным стилевым рекомендациям. ESLint написан с использованием Node.js для обеспечения быстрой среды выполнения и простой установки через npm. С помощью него можно установить стандарт кодирования, используя определенный набор автономных правил.
В отличие от инструментов динамического анализа (например, тестирования), которые должны выполнить код для получения результата, сервис способен анализировать код без выполнения. Это помогает поддерживать и улучшать качество кода по мере его написания.
Одно из преимуществ использования инструмента — его способность обеспечивать единообразие стиля программирования в рамках всего проекта. Стандарты кодирования имеют большое значение для команд. Они гарантируют, что код читается и поддерживается любым членом команды, независимо от того, кто его написал. Определив набор правил в файле конфигурации, команды могут автоматически применять эти стандарты. Это делает базу кода единообразнее. Особенно важна согласованность в проектах с большим количеством участников. Инструмент позволяет снижать когнитивную нагрузку на разработчиков, пытающихся понять код и работать с ним.
Утилита помогает выявлять ошибки и потенциальные неполадки на ранней стадии разработки, задолго до запуска или развертывания кода. Статически анализируя код, ESLint может выявлять распространенные ошибки — синтаксические ошибки, неопределенные переменные или неправильное использование API. Выявление этих неполадок на ранней стадии цикла разработки экономит время и ресурсы: исправление недочетов на более поздних стадиях разработки или после развертывания обходится дороже. Такой упреждающий подход к обработке ошибок приводит к созданию более надежного ПО.
Установка и базовая настройка
Сначала вам нужно установить инструмент. Вы можете добавить его в свой проект в качестве зависимости от разработчика, используя npm или Yarn:
$ npm install eslint --save-dev
# or
$ yarn add eslint --dev
Его также можно установить глобально, а не локально (используя npm install eslint --global). Однако это не лучший вариант. В любом случае все используемые вами плагины или общедоступные конфигурации должны быть установлены локально.
После установки запустите мастер настройки клиента:
npx eslint --init
Эта команда предложит вам ответить на несколько вопросов о вашем стиле программирования и среде, что позволит инструменту создать файл конфигурации .eslintrc, адаптированный к вашему проекту
В файле .eslintrc вы можете определить правила, которые определяют стандарты кодирования для вашего проекта. Сервис предлагает широкий спектр правил, которые вы можете настроить. Это могут быть настройки форматирования — например, табуляция и пробелы, или проблемы с качеством кода — использование переменных перед объявлением.
{
"rules": {
"eqeqeq": "warn",
"curly": "error",
"quotes": ["error", "double"]
}
}
Можно запустить сервис для файлов вашего проекта с помощью командной строки:
npx eslint yourfile.js
Для более крупных проектов вы можете захотеть добавить скрипт в свой файл package.json, чтобы объединить весь проект:
"scripts": {
"lint": "eslint ."
}
Вы можете запустить npm run lint или yarn lint, чтобы проверить весь ваш проект.
ESLint не только выявляет проблемы, но и может автоматически устранять многие из них. Чтобы сделать это, запустите:
npx eslint yourfile.js --fix
Использование ESLint в проектах JavaScript и TypeScript
Создадим .eslintignore, чтобы инструмент не добавлял то, что нам не нужно:
touch .eslintignore
Затем добавим то, что мы хотим игнорировать. В следующем примере кода мы игнорируем папку dist/, которая содержит скомпилированный код на TypeScript. Если вы компилируете свой код на TypeScript в другую папку, обязательно используйте ее вместо dist. Вы должны быть в состоянии найти это в вашем файле .tsconfig.
node_modules
dist
Добавим в проект package.json скрипт lint, чтобы найти весь код TypeScript.
{
"scripts": {
...
"lint": "eslint . --ext .ts",
}
}
Запустим команду:
npm run lint
Для правила существует три режима: off, warn, and error.
-off означает 0 (полностью отключает правило)
-warn означает 1 (включает правило, но не приводит к сбою )
-error означает 2 (включает правило и приводит к сбою)
Вы можете запустить ESLint и попросить его исправить код. Для этого используют опцию --fix. Добавим новый скрипт в наш файл package.json под названием lint-and-fix.
{
"scripts": {
...
"lint": "eslint . --ext .ts",
"lint-and-fix": "eslint . --ext .ts --fix"
},
}
Команда:
npm run lint-and-fix
В результате появляется сообщение об ошибках:
/simple-typescript-starter/src/index.ts
2:1 warning Unexpected console statement no-console
2:1 error 'console' is not defined no-undef
Как интегрировать ESLint с Prettier
Начнем с установки расширения/плагина Peter and Saint для редактора/IDE. Например, в VS Code можно найти более понятные расширения и отказаться от них на VS Code Marketplace.
Установим еще два пакета, которые отвечают за объединение Prettier и ESLint:
npm install --save-dev eslint-config-prettier eslint-plugin-prettier
Первый отключает все правила ESLint, которые могут конфликтовать с Prettier. Второй интегрирует правила Prettier в правила ESLint.
Важно установить правила Prettier в своей конфигурации ESLint. Нужно создать файл .eslintrc в корневом каталоге вашего проекта и задать ему следующую конфигурацию:
{
"extends": ["prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": ["error"]
},
}
Настройка пользовательских правил в ESLint
Чтобы использовать пользовательское правило, вам необходимо написать плагин. Инструмент предлагает гибкую архитектуру для плагинов и полностью поддается подключению. Синтаксический анализатор и правила можно подключать, настраивать плагин в соответствии со своими потребностями.
ESLint — базовый статический анализатор кода: он проверяет ваш исходный код на наличие программных и стилистических ошибок (неправильный отступ, имена переменных). Он использует AST (абстрактное синтаксическое дерево) для оценки шаблонов в коде. AST используется для описания определенного синтаксического шаблона в коде.
Сначала создадим новый каталог (или выберем существующий). Например, новый каталог с именем eslint для хранения моих пользовательских правил и плагина (по сути, набор файлов правил в каталоге). Настройка проекта выглядит следующим образом:
src/
... app code ...
eslint/
... new code here ...
eslint.config.js
Сделаем index.js at eslint/index.js со следующим кодом, который будет определять наш плагин ESLint:
const fs = require("fs");
const path = require("path");
const ruleFiles = fs
.readdirSync(__dirname)
.filter((file) => file !== "index.js" && !file.endsWith("test.js"));
const rules = Object.fromEntries(
ruleFiles.map((file) => [path.basename(file, ".js"), require("./" + file)])
);
module.exports = { rules };
Чтобы начать использовать правила, нужно «установить» этот плагин, который требует изменения зависимостей package.json:
{
// ...
"devDependencies": {
// ...
"eslint-plugin-camchenry": "file:./eslint"
}
Затем запустим npm install. Теперь мы можем включить этот плагин в нашей конфигурации, чтобы начать его использовать:
{
// ...
"plugins": ["camchenry"]
Давайте создадим правило для предотвращения использования однобуквенных переменных, таких как x или i. Создайте новый файл с именем no-single-letter.js в каталоге eslint со следующим кодом:
// @ts-check
/** @type {import('eslint').Rule.RuleModule} */
module.exports = {
create(context) {
return {
Identifier: function (node) {
if (node.name.length === 1)
context.report({
node,
message: "Avoid single-letter identifiers",
});
},
};
},
};
Теперь можно включить это правило в нашем конфигурационном файле:
{
// ...
"rules": {
"camchenry/no-single-letter": "error"
}
}
Интеграция с популярными редакторами кода
Чтобы настроить инструмент для проекта Vue.js, вы можете использовать плагин client-plugin-var. Установите плагин с помощью npm:
npm install eslint eslint-plugin-vue --save-dev
Обновите файл конфигурации, чтобы включить плагин Vue.js :
{
"extends": ["eslint:recommended", "plugin:vue/recommended"],
"plugins": ["vue"],
"rules": {
"vue/html-indent": ["error", 2],
"vue/max-attributes-per-line": "off"
}
}
Эта конфигурация настраивает ESLint на использование рекомендуемых правил для Vue.js. Она включает в себя пользовательские правила для отступов HTML и форматирования атрибутов.
Чтобы настроить ESLint для проекта Node.js, вы можете использовать следующую конфигурацию:
{
"env": {
"node": true,
"es6": true
},
"extends": ["eslint:recommended"],
"rules": {
"no-console": "off",
"consistent-return": "error"
}
}
Она включает среду Node.js, расширяет рекомендуемые правила, содержит пользовательские правила для согласованных инструкций return и разрешения консольных инструкций.
Как ESLint помогает командной работе
В командной среде ESLint отвечает за качество и стиль кода. Когда команды используют его, они тратят меньше времени на обсуждение стилевых предпочтений или проверку кода на предмет стилистических проблем. Это позволяет уделять больше внимания архитектуре, дизайну и функциональности кода, а не форматированию или стилистическим несоответствиям.
В результате команды могут сотрудничать эффективнее, имея общее представление о том, что представляет собой «хороший код» в контексте их проекта. Возможность настройки также означает, что инструмент может адаптироваться к конкретным предпочтениям любой команды. Это делает его универсальным для проектов любого типа.
Практические рекомендации и лучшие практики по использованию
Кавычки. Двойные (““) и одинарные (‘") кавычки одинаковы с точки зрения функциональности и производительности. Нужно выбирать между ними, исходя из правил вашего проекта и личных предпочтений. Но важно не смешивать их в коде.
Ошибки. Проигнорируйте ошибку с комментарием eslint-disable. Иногда сервис ошибается. Это инструмент статического анализа, а статический анализ несовершенен. Если вы уверены, что неверен в конкретном случае (и вы подтвердили это с помощью другого разработчика), вы можете отключить сервис для этой строки в файле.
Конфигурации. Используйте возможности условной настройки для применения различных наборов правил в зависимости от среды (например, для разработки, производства). Настраивайте конфигурации для достижения оптимальной производительности и полезности в различных сценариях.
Работа с устаревшим кодом. Постепенно внедряйте инструмент в устаревшие кодовые базы, чтобы не перегружать команду. Используйте опцию Eslint --fix для автоматического устранения проблем в устаревшем коде, обеспечивая постепенную и управляемую миграцию.
Заключение: преимущества и важность ESLint для разработчиков
ESLint — полезный инструмент для современной веб-разработки. Он обладает преимуществами, выходящими далеко за рамки простого форматирования кода. Проект помогает применять единые стандарты кодирования, способствует раннему выявлению ошибок, повышению качества кода, облегчению совместной работы в команде и оптимизации процесса разработки. В условиях, когда сложность программного обеспечения и численность команды продолжают расти, такие инструменты, как ESLint, играют решающую роль в поддержании удобства обслуживания, надежности и качества кодовых баз.