欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2024年01月02日 09:13:03   作者：James_liPeng  
這篇文章主要介紹了vue3如何添加eslint校驗(eslint-plugin-vue),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

前言

例如：

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

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

一、eslint是什么？

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

二、使用步驟

1.引入庫 安裝eslint 和 eslint-plugin-vue

代碼如下：

npm install --save-dev eslint eslint-plugin-vue

2.添加配置

在項目的根目錄下新增.eslintrc.js文件， 文件內(nèi)容如下，可粘貼后直接使用， 重點是配置是 plugin:vue/vue3-recommended, rules中的內(nèi)容是在vue3-recommended的配置基礎(chǔ)上，額外自定義的配置， 具體的參數(shù)配置可根據(jù)自己的項目實際情況進(jìn)行相關(guān)的配置， 配置官網(wǎng)文檔為

eslint-plugin-vue 官網(wǎng)文檔

module.exports = {
  extends: [
    'plugin:vue/vue3-recommended'
  ],
  rules: {
    'vue/max-attributes-per-line': ['error', {
      singleline: 5 //標(biāo)簽超出5個屬性就會換行
    }],
    'vue/script-setup-uses-vars': 'error', // setup 語法糖校驗
    'object-curly-spacing': ['error', 'always'], // 對象前后要加空格 { a: 1 }
    // 'array-bracket-spacing': ['error', 'always'], // 數(shù)組前后要加空格 [ 1, 2 ]
    'array-bracket-newline': ['error', { "minItems": 5}], // 數(shù)組超過五個值可以換行
    'arrow-spacing': "error", //箭頭函數(shù)前后加空格 () => {}
    // 'vue/no-unsupported-features': ['error', { // 校驗不支持的特性
    //   'version': "^3.0.0",
    //   'ignores': [],
    // }]
    'vue/block-tag-newline': ['error', { //  標(biāo)簽直接的換行規(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， 數(shù)據(jù)， 和方法
    //   "groups": ['props', 'data', 'methods']
    // }],
  }
}

3.添加自動化代碼修復(fù)

在package.json的script中添加

"lint-fix": "eslint --fix --ext .js --ext .vue src/"

運行npm run lint-fix 就可以進(jìn)行代碼的自動化修復(fù)了

注意：有些代碼之后修復(fù)可能會影響代碼的功能的風(fēng)險， 這種代碼修復(fù)不會自動化修復(fù)，會給出相關(guān)的提示。

4.在vue.config.js中設(shè)置

在vue.config.js的module.exports中設(shè)置

lintOnSave: true,

總結(jié)

上文中提供的相關(guān)eslint校驗配置只能支持大部分的代碼校驗，還達(dá)不到prettier對于vue2的校驗力度， 需要更多的校驗配置可以參考官網(wǎng)的api。

相關(guān)文章

最新評論