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，加一段（网上能搜到很多种，随便挑个顺眼的）

1.   "eslint.enable": true,
2.   "eslint.run": "onType",
3.   "eslint.options": {
4.       "extensions": [
5.           ".js",
6.           ".vue",
7.           ".jsx",
8.           ".tsx"
9.       ]
10.   },
11.   "editor.codeActionsOnSave": {
12.       "source.fixAll.eslint": true
13.   },

复制代码

当然也可以搜这个设置勾一下，欠好使就还是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 }],

1. {
2.   "env": {
3.     "browser": true,
4.     "es2021": true,
5.     "node":true
6.   },
7.   "extends": [
8.     "plugin:vue/recommended",
9.     // "standard-with-typescript",
10.     "eslint:recommended"
11.   ],
12.   "overrides": [
13.   ],
14.   "parserOptions": {
15.     "ecmaVersion": "latest",
16.     "sourceType": "module"
17.   },
18.   "globals": {
19.     "globalConfig": "readonly",
20.     "$i18nConfig": "readonly",
21.     "$extend": "readonly",
22.     "moment": "readonly",
23.     "AMap":"readonly"
24.   },
25.   // plugins: [
26.   //   "vue"
27.   // ],
28.   /**
29.      * "off" 或 0 - 关闭规则
30.      * "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出),
31.      * "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
32.     */
33.   "rules": {
34.     // 使用分号
35.     "semi": 0,
36.     // esLint要求组件名称以驼峰格式命名，所以index.vue会报错,添加此规则进行忽略
37.     "vue/multi-word-component-names": [0, { "ignores": ["index"] }], // 需要忽略的组件名
38.     // 单行html元素内容在新的一行
39.     "vue/singleline-html-element-content-newline": 0,
40.     // 多行html元素内容在新的一行
41.     "vue/multiline-html-element-content-newline": 2,
42.     // 每行的最大属性数量
43.     "vue/max-attributes-per-line":0,
44.     // 标签属性正确排序
45.     "vue/attributes-order":0,
46.     // HTML 属性名是小写且使用短横线分隔
47.     "vue/attribute-hyphenation":0,
48.     // 组件定义的名称遵循大小写风格
49.     "vue/component-definition-name-casing":0,
50.     // v-for 指令正确
51.     "vue/valid-v-for":0,
52.     // v-for 带key
53.     "vue/no-v-for-template-key":0,
54.   
55.     // 代码风格
56.     // 禁用console
57.     "no-console": 2,
58.     // 禁用 debugger
59.     "no-debugger": 2,
60.     // 禁止不必要的括号
61.     "no-extra-parens": 0,
62.     // 禁止不必要的分号
63.     "no-extra-semi": 2,
64.     // 禁止连续多个不用于缩进的空格
65.     "no-multi-spaces": 2,
66.     // 禁止不必要的转义字符
67.     "no-useless-escape": 0,
68.     // 强制使用一致的反勾号、双引号或单引号
69.     "quotes": 0, // 引号类型 `` "" ""
70.     // 分号后面和前面是否应该有空格
71.     "semi-spacing": 0,
72.     // 控制逗号前后的空格
73.     "comma-spacing": 0,
74.     // 强制在花括号中使用一致的空格
75.     "object-curly-spacing": 0,
76.     // 强制在对象字面量的属性中键和值之间使用一致的间距
77.     "key-spacing": [0,{"beforeColon": false,"afterColon": true}],
78.     // 强制在关键字前后使用一致的空格 (前后腰需要)
79.     "keyword-spacing": 0,
80.     // 强制在块之前使用一致的空格
81.     "space-before-blocks": 0,
82.     // 强制在注释中 // 或 /* 使用一致的空格
83.     "spaced-comment": 0,
84.     // 函数定义时括号前面要不要有空格
85.     "space-before-function-paren": [0, "always"],
86.     // 嵌套块和语句的特定缩进2格
87.     "indent":[2,2,{ "SwitchCase": 1 }],
88.   
89.     // 禁止 function 定义中出现重名参数
90.     "no-dupe-args": 2,
91.     // 禁止对象字面量中出现重复的 key
92.     "no-dupe-keys": 2,
93.     // 禁止重复的 case 标签
94.     "no-duplicate-case": 2,
95.     // 禁止在return、throw、continue 和 break语句之后出现不可达代码
96.     "no-unreachable": 2,
97.     // 禁用稀疏数组
98.     "no-sparse-arrays": 2,
99.     // 禁用魔术数字(3.14什么的用常量代替),忽略 0, -1, 1, 2，及数组索引
100.     "no-magic-numbers": [2, { "ignore": [0, -1, 1, 2], "ignoreArrayIndexes": true }],
101.     // 禁止使用 var 多次声明同一变量
102.     "no-redeclare": 2,
103.     // 禁止自身比较
104.     "no-self-compare": 2,
105.     // 不允许在变量定义之前使用它们
106.     "no-use-before-define": 0,
107.     // 禁用未声明的变量，除非它们在 /*global */ 注释中被提到
108.     "no-undef": 2,
109.     // 禁止将变量初始化为 undefined
110.     "no-undef-init": 2,
111.     // 禁止将 undefined 作为标识符
112.     "no-undefined": 0,
113.     // 禁止对 catch 子句的参数重新赋值
114.     "no-ex-assign": 2,
115.     // 禁止条件表达式中出现赋值操作符
116.     "no-cond-assign": [2, "except-parens"],
117.     // 禁止对 function 声明重新赋值
118.     "no-func-assign": 2,
119.     // 禁止可以在有更简单的可替代的表达式时使用三元操作符
120.     "no-unneeded-ternary": 2,
121.     // 禁止出现未使用过的变量
122.     "no-unused-vars": [2, { "vars": "all","args": "none" }],
123.     // 禁止不必要的布尔转换
124.     "no-extra-boolean-cast": 0,
125.     // 使用类型安全的相等运算符
126.     "eqeqeq": 2
127.   }
128. }

复制代码

用webstorm的同学请自求多福

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。