vscode使用eslint

1.vscode安装eslint插件，确保已启用

2.代码安装eslint依赖
npm install eslint eslint-plugin-vue --save-dev
3.根目录下添加.eslintrc.json（文件在文末）
有些项目是.eslintrc.js ，具体怎么配不清楚，反正我这个项目，扔这里一个js文件没啥反应，换成json就红红火火，路过的大佬懂得麻烦给解释下谢谢

4.vscode设置


打开settings.json，加一段（网上能搜到很多种，随便挑个顺眼的）

"eslint.enable":true,"eslint.run":"onType","eslint.options":{"extensions":[".js",".vue",".jsx",".tsx"]},"editor.codeActionsOnSave":{"source.fixAll.eslint":true},

当然也可以搜这个配置勾一下，不好使就还是settings改吧

完成：搞到这里，不用重启，代码就开始大片红红火火恍恍惚惚(见下图)，说明成功了，难以描述是开心还是不开心

附：.eslintrc.json （注意前面有个点）rules里面0是关1警告2报错，看个人意愿。
rules后面可以加些配置，有特殊需求找文档看看
https://www.tkcnn.com/eslint/rules.html
例：
// 禁用魔术数字,忽略 0, -1, 1, 2，及数组索引
“no-magic-numbers”: [2, { “ignore”: [0, -1, 1, 2], “ignoreArrayIndexes”: true }],

{"env":{"browser":true,"es2021":true,"node":true},"extends":["plugin:vue/recommended",// "standard-with-typescript","eslint:recommended"],"overrides":[],"parserOptions":{"ecmaVersion":"latest","sourceType":"module"},"globals":{"globalConfig":"readonly","$i18nConfig":"readonly","$extend":"readonly","moment":"readonly","AMap":"readonly"},// plugins: [//   "vue"// ],/**
     * "off" 或 0 - 关闭规则
     * "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出),
     * "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
    */"rules":{// 使用分号"semi":0,// esLint要求组件名称以驼峰格式命名，所以index.vue会报错,添加此规则进行忽略"vue/multi-word-component-names":[0,{"ignores":["index"]}],// 需要忽略的组件名// 单行html元素内容在新的一行"vue/singleline-html-element-content-newline":0,// 多行html元素内容在新的一行"vue/multiline-html-element-content-newline":2,// 每行的最大属性数量"vue/max-attributes-per-line":0,// 标签属性正确排序"vue/attributes-order":0,// HTML 属性名是小写且使用短横线分隔"vue/attribute-hyphenation":0,// 组件定义的名称遵循大小写风格"vue/component-definition-name-casing":0,// v-for 指令正确"vue/valid-v-for":0,// v-for 带key"vue/no-v-for-template-key":0,// 代码风格// 禁用console"no-console":2,// 禁用 debugger"no-debugger":2,// 禁止不必要的括号"no-extra-parens":0,// 禁止不必要的分号"no-extra-semi":2,// 禁止连续多个不用于缩进的空格"no-multi-spaces":2,// 禁止不必要的转义字符"no-useless-escape":0,// 强制使用一致的反勾号、双引号或单引号"quotes":0,// 引号类型 `` "" ""// 分号后面和前面是否应该有空格"semi-spacing":0,// 控制逗号前后的空格"comma-spacing":0,// 强制在花括号中使用一致的空格"object-curly-spacing":0,// 强制在对象字面量的属性中键和值之间使用一致的间距"key-spacing":[0,{"beforeColon":false,"afterColon":true}],// 强制在关键字前后使用一致的空格 (前后腰需要)"keyword-spacing":0,// 强制在块之前使用一致的空格"space-before-blocks":0,// 强制在注释中 // 或 /* 使用一致的空格"spaced-comment":0,// 函数定义时括号前面要不要有空格"space-before-function-paren":[0,"always"],// 嵌套块和语句的特定缩进2格"indent":[2,2,{"SwitchCase":1}],// 禁止 function 定义中出现重名参数"no-dupe-args":2,// 禁止对象字面量中出现重复的 key"no-dupe-keys":2,// 禁止重复的 case 标签"no-duplicate-case":2,// 禁止在return、throw、continue 和 break语句之后出现不可达代码"no-unreachable":2,// 禁用稀疏数组"no-sparse-arrays":2,// 禁用魔术数字(3.14什么的用常量代替),忽略 0, -1, 1, 2，及数组索引"no-magic-numbers":[2,{"ignore":[0,-1,1,2],"ignoreArrayIndexes":true}],// 禁止使用 var 多次声明同一变量"no-redeclare":2,// 禁止自身比较"no-self-compare":2,// 不允许在变量定义之前使用它们"no-use-before-define":0,// 禁用未声明的变量，除非它们在 /*global */ 注释中被提到"no-undef":2,// 禁止将变量初始化为 undefined"no-undef-init":2,// 禁止将 undefined 作为标识符"no-undefined":0,// 禁止对 catch 子句的参数重新赋值"no-ex-assign":2,// 禁止条件表达式中出现赋值操作符"no-cond-assign":[2,"except-parens"],// 禁止对 function 声明重新赋值"no-func-assign":2,// 禁止可以在有更简单的可替代的表达式时使用三元操作符"no-unneeded-ternary":2,// 禁止出现未使用过的变量"no-unused-vars":[2,{"vars":"all","args":"none"}],// 禁止不必要的布尔转换"no-extra-boolean-cast":0,// 使用类型安全的相等运算符"eqeqeq":2}}

用webstorm的同学请自求多福