ESLint携手VSCode

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情

前言

之前我们一同研究过ESLint相关内容，知道了ESLint有两个关键功能。

• 检测语法问题
• --fix选项可以修复格式问题

功能好用是好用，但我们不能每次写一行代码就执行ESLint命令去校验吧。

其实你的IDE/编辑器也帮你想好这个问题了，诸如常用的webstorm、VSCode等都集成了ESLint的功能，可以实时检测语法错误，保存时自动修复。

本节我们一起来研究VSCode的相关配置

安装

ESLint基础的安装配置在之前的文章中有，没看过的小伙伴可以看看。

我们以之前的代码为例

// .eslintrc.js
module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "rules": {
      "no-console": 'warn',  // console 报警
      "quotes": ['error', 'single'] // 引号必须单引号
    }
}

const a = "123";
console.log(a);

const b = "hello world";

首先我们在VSCode拓展中搜索ESLint

如图所示，第一个拓展ESLint是官方出的针对于VSCode的集成拓展，可以在VSCode中实时检测并提示代码。

第二个拓展ESLint Chinese Rules是ESLint规则中文辅助提示插件。一些常用规则会翻译成中文提示，目前支持的规则如下:

• eslint官方规则
• eslint-vue-plugin规则
• eslint-plugin-react规则

安装完毕后，查看我们之前的代码，就可以发现错误代码有了一些标注。

鼠标放在相应的标注上，可以提示错误原因。还是中英文双语的。

这样我们写代码的时候就可以实时检测代码，及时发现自己的问题所在了。

修复格式问题

接下来我们看如何实现格式修复的功能 进入用户设置中，点击右上角切换为json格式。

∂ 添加如下代码：

{
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
}

此配置表示文件保存时运行自动修复操作。 接下来我们打开刚才的代码，保存试试看