vscode使用eslint
1.vscode安装eslint插件，确保已启用https://img-blog.csdnimg.cn/direct/7fa49e52e673445ba6c81087ee5d5e68.png
2.代码安装eslint依靠
npm install eslint eslint-plugin-vue --save-dev
3.根目录下添加.eslintrc.json（文件在文末）
有些项目是.eslintrc.js ，详细怎么配不清楚，反正我这个项目，扔这里一个js文件没啥反应，换成json就红红火火，路过的大佬懂得贫困给表明下谢谢
https://img-blog.csdnimg.cn/direct/b9e68e70038640ddbbac9e245c426e3e.png
4.vscode设置
https://img-blog.csdnimg.cn/direct/3229c76fc0bd4445aa374cefcb6de309.png
https://img-blog.csdnimg.cn/direct/38439ec5d5974bfdbc564dcc24a568a0.png
打开settings.json，加一段（网上能搜到很多种，随便挑个顺眼的）
"eslint.enable": true,
"eslint.run": "onType",
"eslint.options": {
"extensions": [
".js",
".vue",
".jsx",
".tsx"
]
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
当然也可以搜这个设置勾一下，欠好使就还是settings改吧
https://img-blog.csdnimg.cn/direct/37f4a029e67140809daf9af261593dfe.png
完成：搞到这里，不用重启，代码就开始大片红红火火恍恍惚惚(见下图)，阐明成功了，难以形貌是开心还是不开心
https://img-blog.csdnimg.cn/direct/eb063eaa654c4bf1b5f3c5b73ea14d3a.png
附：.eslintrc.json （注意前面有个点）rules里面0是关1告诫2报错，看个人意愿。
rules后面可以加些设置，有特别需求找文档看看
https://www.tkcnn.com/eslint/rules.html
例：
// 禁用把戏数字,忽略 0, -1, 1, 2，及数组索引
“no-magic-numbers”: , “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": }], // 需要忽略的组件名
// 单行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": ,
// 强制在关键字前后使用一致的空格 (前后腰需要)
"keyword-spacing": 0,
// 强制在块之前使用一致的空格
"space-before-blocks": 0,
// 强制在注释中 // 或 /* 使用一致的空格
"spaced-comment": 0,
// 函数定义时括号前面要不要有空格
"space-before-function-paren": ,
// 嵌套块和语句的特定缩进2格
"indent":,
// 禁止 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": , "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": ,
// 禁止对 function 声明重新赋值
"no-func-assign": 2,
// 禁止可以在有更简单的可替代的表达式时使用三元操作符
"no-unneeded-ternary": 2,
// 禁止出现未使用过的变量
"no-unused-vars": ,
// 禁止不必要的布尔转换
"no-extra-boolean-cast": 0,
// 使用类型安全的相等运算符
"eqeqeq": 2
}
}
用webstorm的同学请自求多福
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]