vue3如何添加eslint校验(eslint-plugin-vue)

更新时间：2024年01月02日 09:13:03 作者：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的配置基础上，额外自定义的配置，具体的参数配置可根据自己的项目实际情况进行相关的配置，配置官网文档为

eslint-plugin-vue 官网文档

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。

您可能感兴趣的文章:

Vue3 appear 失效的问题及如何使用 appear
appear 是一个在元素默认被显示的情况下调用进入动画效果,使得元素在这种初次渲染情况下执行进入动画的属性,最近在学习vue3的动画时遇到appear无法生效的问题,本文给大家详细讲解,感兴趣的朋友一起看看吧
2023-10-10
Vuejs第十三篇之组件——杂项
组件（Component）是 Vue.js 最强大的功能之一。本文重点给大家介绍vuejs组件相关知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
2016-09-09
Vue中v-if、v-if-else、v-else-if与v-show的基本使用
v-if,v-else,v-else-if,v-if指令用于条件性地渲染一块内容,这块内容只会在指令的表达式返回truth值的时候被渲染,这篇文章主要给大家介绍了关于Vue中v-if、v-if-else、v-else-if与v-show的基本使用,需要的朋友可以参考下
2022-10-10
手把手教你如何在vue项目中使用rem布局
公司内部一直有大屏的需求,也一直再做,中途也踩了一些坑,但是没有认真的来总结下,下面这篇文章主要给大家介绍了关于如何在vue项目中使用rem布局的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-02-02
Vite配置代理Proxy解决跨域问题小结
我们在做项目的时候经常会遇到跨域的问题,下面这篇文章主要给大家介绍了关于Vite配置代理Proxy解决跨域问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-03-03
vue 实现微信浮标效果
微信的浮窗，大伙应该都用过，当我们正在阅读一篇公众号文章时，突然需要处理微信消息，点击浮窗，在微信上会有个浮标，点击浮标可以再次回到文章。今天小编抽空给大家介绍vue 实现微信浮标效果，感兴趣的朋友一起看看吧
2019-09-09
vue报错之exports is not defined问题的解决
这篇文章主要介绍了vue报错之exports is not defined问题的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
Vue中的v-for列表循环示例详解
循环使用v-for指令,v-for指令需要以site in sites形式的特殊语法,sites是源数据数组并且site是数组元素迭代的别名,下面这篇文章主要给大家介绍了关于Vue中v-for列表循环的相关资料,需要的朋友可以参考下
2022-11-11
vue 的 solt 子组件过滤过程解析
这篇文章主要介绍了vue 的 solt 子组件过滤过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
vue实现登录后页面跳转到之前页面
本文给大家分享了vue实现登录后页面跳转到之前页面的一个功能，有这方便需要的朋友学习参考下吧。
2018-01-01