前置

本文将探究 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。
vscode 中 eslint prettier 和 eslint -loader 配置关系-LMLPHP

配置插件 prettier

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

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

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

{
    "prettier.semi": true,
}

此时在 vscode 中格式化代码会将 JavaScript 语句自动加上分号
vscode 中 eslint prettier 和 eslint -loader 配置关系-LMLPHP

创建 .prettierrc

然后再我们的项目根目录下创建 .prettierrc 配置文件。
vscode 中 eslint prettier 和 eslint -loader 配置关系-LMLPHP
在 .prettierrc 中写入配置。

{
    "semi": false
}

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

vscode 中 eslint prettier 和 eslint -loader 配置关系-LMLPHP
由于 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 插件。

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

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

module.exports = {
    env: {
        es6: true,
    },
    rules: {
        'no-console': 'warn',
    },
};
  • 允许 es6 语法
  • 使用 console 抛出警告

vscode 中 eslint prettier 和 eslint -loader 配置关系-LMLPHP
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
vscode 中 eslint prettier 和 eslint -loader 配置关系-LMLPHP
他们将 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 移入。

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

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

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

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

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

如你所愿,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 并不会给我们抛出任何错误。

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

总结

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

11-30 09:03