vscode下eslint检查配置

场景

开发工具vscode，希望编辑器可以支持eslint的报错展示，及自动修复。

eslint安装

1、eslint vscode plugin安装
在vscode里自行搜索添加“eslint”插件。

2、在项目根目录下添加.eslintrc文件，可自行添加一些rules。

{
    "rules": {
        "no-undef": 2,
        "no-unused-vars": 2,
        "no-multi-spaces": 2,
        "object-curly-spacing": 2,
        "no-console": 1
    }
}

3、打开vscode的设置配置里关于eslint的配置，我是添加在folder下。可以在设置里选择在folder下添加，打开到这个setting.json，添加如下配置：

image.png

{
  "eslint.enable": true,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ]
}

也可以直接在根目录下添加.vscode文件夹，然后在.vscode文件夹下新建setting.json文件，添加配置。内容同上。

三步设置完毕，记得重启一下vscode！

排查小技巧

如果设置不成功，可以先查看一下是eslint检查有问题？
还是lint检查功能ok，但是vscode的插件没有把检查结果展示到编辑器里。

1、检查eslint有没有成功检测到lint错误

npx eslint ${file_url}

如果能拿到lint错误，证明lint是生效的。是vscode插件的问题。

2、查看vscode的eslint插件有没有被启动。可以打开vscode的终端，views -> terminal ，切换到output下，查看tasks里有没有eslint，没有的话是不是有启动的报错。

image.png

3、如果tasks里有启动，那就是setting.json里的设置有问题了。没有打开eslint，或者你要检测的语言没有在检测语言之列，要重新设置，我这里只设置了.vue, .js：

"eslint.enable": true,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ]

添加.ts文件的检测可以添加：

"eslint.validate": [
      "javascript",
      "javascriptreact",
      {
        "language": "typescript",
        "autoFix": true
      },
      {
        "language": "typescriptreact",
        "autoFix": true
      }
    ]