vscode 中 eslint prettier 和 eslint -loader 配置关系

前置

本文将探究 vscode prettier 插件和 eslint 插件在 vscode 中的配置以及这两者对应的在项目中的配置文件的关系，最后提及 vscode eslint 插件配置与 eslint-loader 的相互配合。中间还提及了 .vscode/settings.json 的作用。

本文建立在你对 vscode 、eslint、prettier、webpack 有简单了解的基础下进行。希望本文对你有帮助，以后搭建项目能够得心应手。

如有错误，一定不吝赐教。

初始化测试项目

创建文件夹 eslint-prettier-test 和 eslint-prettier-test/index.js。

vscode prettier

安装 vscode 插件 prettier

vscode 安装插件 prettier。

配置插件 prettier

通过 vscode settings.json 设置 vscode 默认格式化工具为 prettier。以 JavaScript 为例。

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},

我们以在 JavaScript 语句末尾添加分号为例，打开 vscode 配置文件 settings.json 配置 prettier 插件。

{
    "prettier.semi": true,
}

此时在 vscode 中格式化代码会将 JavaScript 语句自动加上分号。

创建 .prettierrc

然后再我们的项目根目录下创建 .prettierrc 配置文件。

在 .prettierrc 中写入配置。

{
    "semi": false
}

这个配置项即不为 JavaScript 语句添加分号，与上文 settings.json 中的配置相反。眼见为实，我们再次格式化 js 文件。

由于 gif 会循环播放，简单解释一下。当我按下 vscode 格式化快捷键，分号消失了。

总结

这代表项目根目录下的 .prettierrc 配置文件会影响 vscode 的 prettier 插件，且优先级高于在 vscode settings.json 中的 prettier 插件配置。

我们知道这一点可以做什么？当你装上 vscode 的 prettier 插件后，你应该先将 vscode 的默认格式化工具设为 prettier，并在 vscode 内部做好你期望的 prettier 插件配置。这对不使用 prettier 的项目的配置有效。当你的项目中包含 .prettierrc 配置文件时，该 .prettierrc 生效，vscode 中的 prettier 插件配置失效，互不冲突。

vscode eslint

eslint 配置同理。但是要想获得 eslint 提示，不仅需要在 vscode 中安装 eslint 插件。

你还需要在项目根目录创建一个 .eslintrc.js 文件才能使 vscode 抛出提示信息。当你删除 **.eslintrc.js 文件，提示将消失。例如，我们在项目根目录下的 .eslintrc.js 写入如下配置。

module.exports = {
    env: {
        es6: true,
    },
    rules: {
        'no-console': 'warn',
    },
};

允许 es6 语法
使用 console 抛出警告

vscode 根据规则在我们使用console时抛出了警告。

.vscode

你可以在任意的项目根目录创建一个 .vscode/settings.json 文件，这个 json 文件可以配置 vscode 中 settings.json 同样的配置。例如下面这样。

{
    "editor.formatOnSave": true,
}

这项配置使 vscode 在保存时自动格式化代码。在 vscode 内部的配置文件 settings.json，同样可以配置这条选项。.vscode/settings.json 会覆盖 vscode 内部配置文件 settings.json 中的配置，这是合理的。

那么这么做的好处是什么呢？当一个项目需要多人协作时，可以通过配置项目根目录下的 .vscode/settings.json 达到共享配置的目的。

.vscode 中的插件配置

我们可以将 vscode 插件的配置放到 .vscode/settings.json 中与他人共享插件配置吗？当然是可以的。不要忘了 .vscode/settings.json 可以配置 vscode 内部的 settings.json，vscode 插件的配置也写在 vscode 内部的 settings.json 中。常常不必这么做。像 prettier 和 eslint 为我们提供了单独的配置文件放在项目根目录下，vscode 能够自动读取其配置并生效（前提是 vscode 安装了对应的插件），这在上文已经验证了。

我们可以打开一个大型开源项目参考他们是如何做的。例如跨端框架 Taro。

他们将 prettier 和 eslint 配置放到单独的配置文件中 (图中的 .prettierrc 和 .eslintrc.js)。打开 .vscode/setting.json 查看一下。

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],
  "jest.autoEnable": false,
  "typescript.tsdk": "node_modules/typescript/lib"
}

不必将校验规则放到 .vscode/settings.json 中。配置中的 eslint.validate 规定 ESlint 插件需要校验的语言类型，添加上对应的语言后 VSCode 才会在代码编辑器中正确的高亮错误的语法。如果你在 vscode 中安装了 eslint 插件，默认配置中包含一些常用语言，一般无需再单独配置。

记住一点即可：.vscode/settings.json 仅作用于 vscode 内部的 settings.json。

eslint-loader

如果你使用 webpack 构建项目，应该会使用 eslint-loader。可以在 loader 中配置校验规则。这和上文所说的不是一会事，项目在本地跑起来时（通常在生产环境屏蔽 eslint-loader 的抛出信息）。当你的代码不符合校验规则时， eslint-loader 会在控制台抛出错误或者警告。

在本文开始已经建好的项目中安装 eslint-loader。如果使用 eslint-loader，还需要安装 eslint。

npm init -y && npm i webpack webpack-cli eslint eslint-loader -D

安装完毕，我们在 package.json 中看下当前项目的依赖。

"devDependencies": {
  "eslint": "^7.14.0",
  "eslint-loader": "^4.0.2",
  "webpack": "^5.9.0",
  "webpack-cli": "^4.2.0"
}

使用 eslint-loader 还需要稍作配置。在项目根目录下新建 webpack.config.js。

module.exports = {
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: /node_modules/,
                loader: 'eslint-loader',
                options: {
                    // eslint options (if necessary)
                },
            },
        ],
    },
};

为了能使这个简单的例子跑起来，我们还需要将项目中的 index.js 文件放到 src 中，因为 wepack 默认入口文件在src/index.js，这里为了方便不做多余的webpack配置，直接创建 src 文件夹并将 index.js 移入。

不要忘了，在上文 .eslintrc.js 已经配置了一条校验规则，它作用于 vscode eslint 插件。此时 index.js 中的内容也没有改变，依然在抛出警告。

接下来我们在控制台运行命令 webpack。webpack 将会把 src/index.js 打包到 dist/main.js。

如你所愿，eslint-loader 在控制台为我们抛出了一条警告，即我们在 .eslintrc.js 中配置的使用 console 时抛出警告。所以， .eslintrc.js 不仅作用于 vscode 中 eslint 插件，还作用与 eslint-loader。

如果你仍有疑惑，接下来上文我们已经配置好的 wepack.config.js 中的 eslint-loader 注释掉。

module.exports = {
    // module: {
    //     rules: [
    //         {
    //             test: /.js$/,
    //             exclude: /node_modules/,
    //             loader: 'eslint-loader',
    //             options: {
    //                 // eslint options (if necessary)
    //             },
    //         },
    //     ],
    // },
};

再次运行 webpack，即使不看结果你应该知道了，打包过程 webpack 并不会给我们抛出任何错误。

总结

通过 loader 和 vscode 插件以及插件的配置，打通了整个开发环节的语法校验以及格式化。