Vscode 开启eslint代码检测

在VScode中安装eslint插件

image.png

这个插件是VScode编辑的功能，如果你的项目中有.eslintrc.json文件，它会自动读取文件的规则，自动检测代码

通过npm安装eslint包

npm install eslint --save-dev

如果只安装了这个npm包，编辑器是不能直接检测代码的，它是运行在工作台，需要用命令手动去检测,npx run eslint --init,会自动生成一个.eslintrc.json文件。

image.png

您想如何使用ESLint？
.只检查语法
.检查语法并找出问题
.检查语法、发现问题并强制执行代码样式
这里我选第二项

image.png

您想如何使用ESLint问题？
.JavaScript模块（导入/导出）
.CommonJS（需要/导出）
.这些都不是
这里我选择是第一项

image.png

您的项目使用哪种框架？
这里选择是都不是

image.png

你的项目使用TypeScript吗？» 否/是
我的项目是angular，用的都是ts，所以我这里选择yes

image.png

你的代码在哪里运行(按选择，切换全部，反转选择）
这里选择是默认就好

image.png

您希望配置文件的格式是什么？
这里选择json

image.png

.你想现在用npm安装它们吗?
我用的是npm,所以我选择是

image.png

这是所有的配置选项，此时执行完成后，所在的项目中会生成一个.eslintrc.json文件,所有的配置规则都写在这个文件里面。

image.png

安装好了VsCode的插件后，配置setting

  "eslint.autoFixOnSave": true,
    "eslint.alwaysShowStatus": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "typescript",  //检测ts的选项
            "autoFix": true
        },
    ],
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },

配置.eslintrc.json的检测规则

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
}

这个配置是自动生成的，想要按照自己的想法来，可以去查eslint配置规则，有一个rules选项，规则都应该写在这里
我先配置一个，我先列举一个看自动检测能不能生效，设置了一个不允许console

   "overrides":[//要配置具体文件规则overrides
        {
            "files": ["*.ts"],
            "extends": [
            ],
            "rules": {   //配置具体检测规则
                "no-console":2
            }
        }
    ]

image.png

此时的规则已经生效了，说明此流程能走通