vue3如何添加eslint校驗(yàn)(eslint-plugin-vue)
前言
例如：
隨著 隨著vue3項(xiàng)目的使用， 提高團(tuán)隊(duì)的代碼規(guī)范和減少code review的時(shí)間， eslint的代碼校驗(yàn)就越來(lái)越重要了。
目前的pritter對(duì)vue3的支持度不是很理想，很多vue3的新特性還不支持，目前pritter官網(wǎng)上也沒有給出解決方案， 所以只能自己使用eslint來(lái)配置vue3的代碼校驗(yàn)
一、eslint是什么？
本文針對(duì)的是有前端開發(fā)基礎(chǔ)的同學(xué)，所以基礎(chǔ)概念不做贅述。
二、使用步驟
1.引入庫(kù) 安裝eslint 和 eslint-plugin-vue
代碼如下：
npm install --save-dev eslint eslint-plugin-vue
2.添加配置
在項(xiàng)目的根目錄下新增.eslintrc.js文件， 文件內(nèi)容如下，可粘貼后直接使用， 重點(diǎn)是配置是 plugin:vue/vue3-recommended, rules中的內(nèi)容是在vue3-recommended的配置基礎(chǔ)上，額外自定義的配置， 具體的參數(shù)配置可根據(jù)自己的項(xiàng)目實(shí)際情況進(jìn)行相關(guān)的配置， 配置官網(wǎng)文檔為
module.exports = {
extends: [
'plugin:vue/vue3-recommended'
],
rules: {
'vue/max-attributes-per-line': ['error', {
singleline: 5 //標(biāo)簽超出5個(gè)屬性就會(huì)換行
}],
'vue/script-setup-uses-vars': 'error', // setup 語(yǔ)法糖校驗(yàn)
'object-curly-spacing': ['error', 'always'], // 對(duì)象前后要加空格 { a: 1 }
// 'array-bracket-spacing': ['error', 'always'], // 數(shù)組前后要加空格 [ 1, 2 ]
'array-bracket-newline': ['error', { "minItems": 5}], // 數(shù)組超過(guò)五個(gè)值可以換行
'arrow-spacing': "error", //箭頭函數(shù)前后加空格 () => {}
// 'vue/no-unsupported-features': ['error', { // 校驗(yàn)不支持的特性
// '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.添加自動(dòng)化代碼修復(fù)
在package.json的script中添加
"lint-fix": "eslint --fix --ext .js --ext .vue src/"
運(yùn)行npm run lint-fix 就可以進(jìn)行代碼的自動(dòng)化修復(fù)了
注意：有些代碼之后修復(fù)可能會(huì)影響代碼的功能的風(fēng)險(xiǎn)， 這種代碼修復(fù)不會(huì)自動(dòng)化修復(fù)，會(huì)給出相關(guān)的提示。
4.在vue.config.js中設(shè)置
在vue.config.js的module.exports中設(shè)置
lintOnSave: true,
總結(jié)
上文中提供的相關(guān)eslint校驗(yàn)配置只能支持大部分的代碼校驗(yàn)，還達(dá)不到prettier對(duì)于vue2的校驗(yàn)力度， 需要更多的校驗(yàn)配置可以參考官網(wǎng)的api。
相關(guān)文章
vue.js 實(shí)現(xiàn)輸入框動(dòng)態(tài)添加功能
這篇文章主要介紹了vue.js 實(shí)現(xiàn)輸入框動(dòng)態(tài)添加功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了vue3.0如何在全局掛載對(duì)象和方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
使用vue實(shí)現(xiàn)計(jì)時(shí)器功能
這篇文章主要為大家詳細(xì)介紹了使用vue實(shí)現(xiàn)計(jì)時(shí)器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vue+Webpack完美整合富文本編輯器TinyMce的方法
這篇文章主要介紹了Vue+Webpack完美整合富文本編輯器TinyMce的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
這篇文章主要為大家詳細(xì)介紹了Vue的基本知識(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
這篇文章主要介紹了vue3中安裝并且使用Tailwind CSS的完整步驟,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-04-04
在uni-app中使用element-ui的方法與報(bào)錯(cuò)解決
我們?cè)陂_web開發(fā)的時(shí)候，經(jīng)常會(huì)使用到element或者uview-ui,下面這篇文章主要給大家介紹了關(guān)于在uni-app中使用element-ui的方法與報(bào)錯(cuò)解決的相關(guān)資料,需要的朋友可以參考下2022-04-04
vue3父子組件數(shù)據(jù)更新不及時(shí)的問題解決方案
文章介紹了在使用props向子組件傳值時(shí),如果直接賦值不會(huì)導(dǎo)致子組件數(shù)據(jù)更新的問題,文章提供了解決方案,通過(guò)在父組件中使用 nextTick確保數(shù)據(jù)變化后再調(diào)用子組件中的接口,從而保證數(shù)據(jù)同步更新,感興趣的朋友跟隨小編一起看看吧2025-12-12
這篇文章主要為大家詳細(xì)介紹了vue-loader的工作原理與使用,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
使用iView Upload 組件實(shí)現(xiàn)手動(dòng)上傳圖片的示例代碼
這篇文章主要介紹了使用iView Upload 組件實(shí)現(xiàn)手動(dòng)上傳圖片的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10