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 插件以及插件的配置，打通了整个开发环节的语法校验以及格式化。