Используется в проекте React, скомпилированном с использованием Babel и Webpack
Eslint - это линтер, который обеспечивает соблюдение единого стандарта кодирования JavaScript, чтобы код, предоставленный разными разработчиками, соответствовал одним и тем же стилям кодирования и рекомендуемым методам работы с JavaScript.
Ниже приведено пошаговое руководство по настройке работы eslint в проекте webpack.
1. eslint-config-airbnb :
Eslint - это утилита линтинга, которая проверяет код посредством статического анализа, следуя набору правил. Правила можно настроить индивидуально для каждого проекта. Хороший способ начать - использовать руководство по стилю JavaScript Airbnb. Правила Airbnb являются всеобъемлющими и широко используются многими разработчиками в качестве базового стандарта. Для установки на Mac / Linux:
( export PKG=eslint-config-airbnb; npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest" )
Чтобы запустить линтер в проекте:
node_modules/.bin/eslint . --fix
2. eslint-plugin-flowtype
Если в проекте также установлен Flow, Eslint будет жаловаться на аннотации типа Flow. Eslint-plugin-flowtype включает линтинг типов Flow для ESlint.
npm install babel-eslint --save-dev npm install eslint-plugin-flowtype --save-dev
3. Eslint prettier или eslint-plugin-prettier
Prettier - еще один инструмент, который автоматически форматирует стиль и может конфликтовать с правилами форматирования в Eslint. Иногда возникают конфликты форматов, поскольку правила, применяемые Eslint и Prettier, различаются. Доступны несколько инструментов для решения проблем и интеграции Prettier в рабочий процесс.
Есть несколько способов интегрировать красивее в рабочий процесс.
- Расширение текстового редактора. Например, в VSCode Prettier - VSCode поможет отформатировать код при сохранении. После установки prettier-eslint нам необходимо настроить параметры VSCode. Некоторые ключевые настройки:
"editor.formatOnSave": true, //enables format on save! "javascript.validate.enable": false, "javascript.format.enable": false, "prettier.eslintIntegration": true //uses eslint-prettier as parser
2. используйте eslint-plugin-prettier, чтобы добавить Prettier как правило в Eslint и отключить другие правила, которые могут конфликтовать с eslint-config-prettier
4. Эслинт-загрузчик:
Используя eslint-loader в webpack, мы можем проверять наличие ошибок линтинга каждый раз, когда Babel выполняет транспиляцию. Мы можем просто добавить eslint-loader в файл конфигурации webpack, чтобы обеспечить мониторинг ошибок линтинга в реальном времени.
Примечание: enforce: “pre”
необходим, чтобы убедиться, что линтинг выполнен до того, как Babel перенесет код!
module.exports = { // ... module: { rules: [ { enforce: "pre", test: /\.js$/, exclude: /node_modules/, loader: "eslint-loader", }, { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", }, ], }, // ... }