面试题：Webpack 中如何配置 ESLint 实现基础的代码检查

Question

请描述在 Webpack 项目中，将 ESLint 集成进来进行基础代码检查的步骤，包括安装相关依赖、配置 Webpack 和 ESLint 的配置文件等方面。

Answer 1

1. 安装相关依赖

1. 安装 ESLint： 在项目根目录下运行 npm install eslint --save-dev，这将安装 ESLint 到项目的开发依赖中。
2. 安装 ESLint Webpack 插件： 运行 npm install eslint-loader --save-dev，eslint-loader 允许在 Webpack 构建过程中执行 ESLint 检查。

2. 配置 ESLint

1. 初始化 ESLint 配置文件： 在项目根目录运行 npx eslint --init，这会引导你通过一系列问题来生成 .eslintrc 配置文件。你可以选择适合项目的风格（如 Airbnb、Google 等），以及项目所使用的技术栈（如 JavaScript 模块、React 等）。生成的配置文件一般为 .eslintrc.json 或 .eslintrc.js 等格式。
2. 手动配置（可选）： 如果不使用初始化向导，也可以手动创建 .eslintrc.json 文件，并添加如下基本配置示例：

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

• env 定义了代码运行的环境，这里设置为浏览器环境且支持 ES2021 语法。
• extends 可以继承一些已有的规则集，这里继承了 ESLint 推荐的规则。
• parserOptions 配置解析器的选项，指定 ECMAScript 版本和模块类型。
• rules 中定义具体的规则，如 semi 要求语句必须以分号结尾，quotes 要求使用双引号。

3. 配置 Webpack

在 Webpack 的配置文件（一般是 webpack.config.js）中添加 eslint-loader：

module.exports = {
    //...其他 Webpack 配置
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'eslint-loader',
                enforce: 'pre'
            }
        ]
    }
};

• test 匹配所有的 JavaScript 文件。
• exclude 排除 node_modules 目录，因为一般不需要检查第三方库的代码。
• use 使用 eslint-loader 进行检查。
• enforce: 'pre' 确保 eslint-loader 在其他 loader 之前执行，这样可以在代码被其他 loader 处理之前就发现语法错误等问题。

4. 运行检查

在 package.json 的 scripts 中添加脚本，方便运行 ESLint 检查，例如：

{
    "scripts": {
        "lint": "eslint src"
    }
}

这里 src 是项目源代码的目录，你可以根据实际情况修改。运行 npm run lint 就可以执行 ESLint 代码检查。在 Webpack 构建过程中，由于配置了 eslint-loader，也会自动进行 ESLint 检查并报告错误。