在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
你的代码在哪里运行(按<space>选择，<a>切换全部，<i>反转选择）
这里选择是默认就好
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
此时的规则已经生效了，说明此流程能走通
