eslint 配置和用法

在一個使用Webpack的項目中配置ESLint，你可以按照以下步驟操作：

首先，你需要在你的項目中安裝ESLint和對應(yīng)的Webpack loader。你可以使用npm或者yarn來安裝。在你的項目根目錄下打開終端，然后運行以下命令：

使用npm：

npm install eslint eslint-loader --save-dev

或者使用yarn：

yarn add eslint eslint-loader --dev

在你的項目根目錄下創(chuàng)建一個.eslintrc文件（或.eslintrc.js，.eslintrc.json，.eslintrc.yaml等）。這個文件將包含你的ESLint配置。例如：

{    "env": {        "browser": true,        "es2021": true    },    "extends": "eslint:recommended",    "parserOptions": {        "ecmaVersion": 12,        "sourceType": "module"    },    "rules": {    }}

這個配置文件啟用了推薦的ESLint規(guī)則，并設(shè)置了解析選項以支持ES2021和模塊。

在你的webpack.config.js文件中，添加一個新的module規(guī)則來使用eslint-loader：

module.exports = {    // ...    module: {        rules: [            {                test: /\.js$/,                exclude: /node_modules/,                use: ['eslint-loader'],            },            // 其他的loader規(guī)則...        ],    },    // ...};

這個規(guī)則會在Webpack構(gòu)建過程中運行ESLint，檢查所有的JavaScript文件（除了node_modules目錄下的文件）。

現(xiàn)在，每次你運行Webpack，ESLint都會檢查你的代碼并報告任何發(fā)現(xiàn)的問題。

注意：從ESLint 7開始，eslint-loader已被棄用，推薦使用eslint-webpack-plugin。你可以按照類似的步驟安裝和配置這個插件。

React

在一個React項目中配置ESLint，你可以按照以下步驟操作：

首先，你需要在你的項目中安裝ESLint和一些相關(guān)的插件。你可以使用npm或者yarn來安裝。在你的項目根目錄下打開終端，然后運行以下命令：

使用npm：

npm install eslint babel-eslint eslint-plugin-react --save-dev

或者使用yarn：

yarn add eslint babel-eslint eslint-plugin-react --dev

這里我們安裝了babel-eslint（一個ESLint的解析器，用于支持Babel的語法），以及eslint-plugin-react（包含了一些React相關(guān)的ESLint規(guī)則）。

在你的項目根目錄下創(chuàng)建一個.eslintrc文件（或.eslintrc.js，.eslintrc.json，.eslintrc.yaml等）。這個文件將包含你的ESLint配置。例如：

{    "parser": "babel-eslint",    "extends": ["eslint:recommended", "plugin:react/recommended"],    "env": {        "browser": true,        "es2021": true    },    "rules": {        // 你可以在這里添加更多的規(guī)則    }}

這個配置文件啟用了推薦的ESLint規(guī)則和React相關(guān)的規(guī)則，并設(shè)置了解析器和環(huán)境。

現(xiàn)在，每次你運行ESLint，它都會檢查你的React代碼并報告任何發(fā)現(xiàn)的問題。

注意：這只是一個基本的配置。你可能還需要根據(jù)你的項目需求，安裝和配置更多的插件，例如eslint-plugin-react-hooks（用于檢查React Hooks的規(guī)則）等。

全局變量

在ESLint中，你可以使用globals配置選項來定義全局變量。這個選項需要一個對象，對象的鍵是變量名，值是"writable"（可寫），"readonly"（只讀）或"off"（禁用）。

例如，如果你想在你的項目中使用全局變量MY_GLOBAL和ANOTHER_GLOBAL，你可以在.eslintrc文件中添加以下配置：

{    "globals": {        "MY_GLOBAL": "readonly",        "ANOTHER_GLOBAL": "writable"    }}

在這個例子中，MY_GLOBAL被設(shè)置為只讀，這意味著你可以在你的代碼中使用MY_GLOBAL，但不能修改它。ANOTHER_GLOBAL被設(shè)置為可寫，這意味著你可以在你的代碼中使用和修改ANOTHER_GLOBAL。

注意：如果你在你的代碼中使用了一個沒有在globals配置中定義的全局變量，ESLint會報告一個未定義的變量錯誤。如果你想讓ESLint忽略這個錯誤，你可以在globals配置中為這個變量添加一個條目，并將其值設(shè)置為"off"。

忽略文件

在ESLint中，你可以使用 .eslintignore 文件或者在配置文件中的 ignorePatterns 選項來指定哪些文件或目錄應(yīng)該被忽略，不被ESLint檢查。

如果你想讓ESLint只檢查 src 目錄，你可以創(chuàng)建一個 .eslintignore 文件，然后在文件中添加你想要忽略的目錄或文件。例如：

node_modules/public/build/

在這個例子中，node_modules、public 和 build 目錄將被ESLint忽略。

另一種方法是在你的ESLint配置文件中使用 ignorePatterns 選項：

{    "ignorePatterns": ["node_modules/", "public/", "build/"]}

這將達到相同的效果。

注意：.eslintignore 文件和 ignorePatterns 選項中的路徑都是相對于配置文件的。如果你的配置文件在一個子目錄中，你可能需要調(diào)整路徑以正確指向你想要忽略的目錄。

eslint-webpack-plugin

eslint-webpack-plugin 是一個用于在 webpack 構(gòu)建過程中運行 ESLint 的插件。以下是如何在項目中使用 eslint-webpack-plugin 的步驟：

首先，你需要在你的項目中安裝 eslint 和 eslint-webpack-plugin。你可以使用 npm 或者 yarn 來安裝。在你的項目根目錄下打開終端，然后運行以下命令：

使用 npm：

npm install eslint eslint-webpack-plugin --save-dev

或者使用 yarn：

yarn add eslint eslint-webpack-plugin --dev

在你的 webpack.config.js 文件中，引入 eslint-webpack-plugin 并在 plugins 部分使用它：

const ESLintPlugin = require('eslint-webpack-plugin');
module.exports = {  // ...  plugins: [    new ESLintPlugin(options), // 在這里，options 是一個可選的配置對象  ],  // ...};

options 是一個可選的配置對象，你可以使用它來自定義插件的行為。以下是一些可用的選項：

1、context：一個字符串，指定 ESLint 應(yīng)該檢查哪些文件。默認值是 webpack 的 context 配置選項。

2、extensions：一個字符串?dāng)?shù)組，指定應(yīng)該被檢查的文件的擴展名。默認值是 ['.js', '.jsx']。

3、exclude：一個字符串或字符串?dāng)?shù)組，指定應(yīng)該被 ESLint 忽略的文件或目錄。

4、lintDirtyModulesOnly：一個布爾值，如果設(shè)置為 true，ESLint 只會檢查在上次編譯后被修改的文件。默認值是 false。

5、formatter：一個函數(shù)，用于自定義 ESLint 的輸出格式。

更多關(guān)于 eslint-webpack-plugin 的信息，你可以參考其官方文檔：https://github.com/webpack-contrib/eslint-webpack-plugin