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

更新時間：2024年01月02日 09:13:03 作者：James_liPeng

這篇文章主要介紹了vue3如何添加eslint校驗(eslint-plugin-vue),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

前言

例如：

隨著隨著vue3項目的使用，提高團隊的代碼規(guī)范和減少code review的時間， eslint的代碼校驗就越來越重要了。

目前的pritter對vue3的支持度不是很理想，很多vue3的新特性還不支持，目前pritter官網上也沒有給出解決方案，所以只能自己使用eslint來配置vue3的代碼校驗

一、eslint是什么？

本文針對的是有前端開發(fā)基礎的同學，所以基礎概念不做贅述。

二、使用步驟

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', { //  標簽直接的換行規(guī)范
      "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。

您可能感興趣的文章:

Vue項目如何獲取本地文件夾絕對路徑
這篇文章主要介紹了Vue項目如何獲取本地文件夾絕對路徑問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
使用element-ui設置table組件寬度(width)為百分比
這篇文章主要介紹了使用element-ui設置table組件寬度(width)為百分比方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
詳解Vue CLI3 多頁應用實踐和源碼設計
這篇文章主要介紹了詳解Vue CLI3 多頁應用實踐和源碼設計，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
關于vue-router路徑計算問題
這篇文章主要介紹了關于vue-router路徑計算問題，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05
el-date-picker設置日期默認值兩種方法(當月月初至月末)
這篇文章主要給大家介紹了關于el-date-picker設置日期默認值(當月月初至月末)的相關資料,文中通過代碼示例將解決的辦法介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-08-08
vue3(ts)類型EventTarget上不存在屬性value的問題
這篇文章主要介紹了vue3(ts)類型EventTarget上不存在屬性value的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue實現商品放大鏡效果
這篇文章主要為大家詳細介紹了Vue實現商品放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
vue項目點擊元素后如何改變樣式
這篇文章主要介紹了vue項目點擊元素后如何改變樣式問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue項目中輪詢狀態(tài)更改方式(鉤子函數)
這篇文章主要介紹了vue項目中輪詢狀態(tài)更改方式(鉤子函數)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue2.0實現的tab標簽切換效果（內容可自定義）示例
這篇文章主要介紹了vue2.0實現的tab標簽切換效果,結合實例形式分析了vue.js實現內容可自定義的tab點擊切換功能相關操作技巧,需要的朋友可以參考下
2019-02-02