vue3如何添加eslint校验(eslint-plugin-vue)
作者：James_liPeng
这篇文章主要介绍了vue3如何添加eslint校验(eslint-plugin-vue),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
前言
例如：
随着 随着vue3项目的使用， 提高团队的代码规范和减少code review的时间， eslint的代码校验就越来越重要了。
目前的pritter对vue3的支持度不是很理想，很多vue3的新特性还不支持，目前pritter官网上也没有给出解决方案， 所以只能自己使用eslint来配置vue3的代码校验
一、eslint是什么？
本文针对的是有前端开发基础的同学，所以基础概念不做赘述。
二、使用步骤
1.引入库 安装eslint 和 eslint-plugin-vue
代码如下：
npm install --save-dev eslint eslint-plugin-vue
2.添加配置
在项目的根目录下新增.eslintrc.js文件， 文件内容如下，可粘贴后直接使用， 重点是配置是 plugin:vue/vue3-recommended, rules中的内容是在vue3-recommended的配置基础上，额外自定义的配置， 具体的参数配置可根据自己的项目实际情况进行相关的配置， 配置官网文档为
module.exports = {
extends: [
'plugin:vue/vue3-recommended'
],
rules: {
'vue/max-attributes-per-line': ['error', {
singleline: 5 //标签超出5个属性就会换行
}],
'vue/script-setup-uses-vars': 'error', // setup 语法糖校验
'object-curly-spacing': ['error', 'always'], // 对象前后要加空格 { a: 1 }
// 'array-bracket-spacing': ['error', 'always'], // 数组前后要加空格 [ 1, 2 ]
'array-bracket-newline': ['error', { "minItems": 5}], // 数组超过五个值可以换行
'arrow-spacing': "error", //箭头函数前后加空格 () => {}
// 'vue/no-unsupported-features': ['error', { // 校验不支持的特性
// 'version': "^3.0.0",
// 'ignores': [],
// }]
'vue/block-tag-newline': ['error', { // 标签直接的换行规范
"singleline": "always",
"multiline": "always",
"maxEmptyLines": 0,
"blocks": {
"script": {
"singleline": "always",
"multiline": "always",
"maxEmptyLines": 0,
},
"template": {
"singleline": "always",
"multiline": "always",
"maxEmptyLines": 0,
},
"my-block": {
"singleline": "always",
"multiline": "always",
"maxEmptyLines": 0,
}
}
}],
// 'vue/no-unused-properties': ['error', { // 未使用的props， 数据， 和方法
// "groups": ['props', 'data', 'methods']
// }],
}
}3.添加自动化代码修复
在package.json的script中添加
"lint-fix": "eslint --fix --ext .js --ext .vue src/"
运行npm run lint-fix 就可以进行代码的自动化修复了
注意：有些代码之后修复可能会影响代码的功能的风险， 这种代码修复不会自动化修复，会给出相关的提示。
4.在vue.config.js中设置
在vue.config.js的module.exports中设置
lintOnSave: true,
总结
上文中提供的相关eslint校验配置只能支持大部分的代码校验，还达不到prettier对于vue2的校验力度， 需要更多的校验配置可以参考官网的api。