Vue3如何通過ESLint校驗代碼是否符合規(guī)范詳解
更新時間：2022年07月18日 11:04:09 作者：冷A冷
ESLint可以靈活設(shè)置規(guī)則,也發(fā)布了很多公開的規(guī)則集,下面這篇文章主要給大家介紹了關(guān)于Vue3如何通過ESLint校驗代碼是否符合規(guī)范的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
前言
VUE3中項目使用的了ESLint插件校驗代碼是否符合編碼規(guī)則，一起來看看eslint的安裝方式，vs code編輯器，idea編輯器中方法。
1.在項目中安裝ESLint命令
npm install eslint --save-dev
2.初始化ESLint配置命令
通過向?qū)У姆绞缴沙跏嫉呐渲冒?/p>
npx eslint --init You can also run this command directly using 'npm init @eslint/config'. npx: 40 安裝成功，用時 27.246 秒 √ How would you like to use ESLint? · style √ What type of modules does your project use? · esm √ Which framework does your project use? · vue ? Does your project use TypeScript? ? No / Yes ? Where does your code run? ... (Press <space> to select, <a> to toggle all, <i> to invert selection) √ Browser √ Node ? How would you like to define a style for your project? ... > Use a popular style guide Answer questions about your style ? Which style guide do you want to follow? ... > Airbnb: https://github.com/airbnb/javascript Standard: https://github.com/standard/standard Google: https://github.com/google/eslint-config-google XO: https://github.com/xojs/eslint-config-xo ? What format do you want your config file to be in? ... > JavaScript YAML JSON Checking peerDependencies of eslint-config-airbnb-base@latest The config that you've selected requires the following dependencies: eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest eslint-config-airbnb-base@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.2 @typescript-eslint/parser@latest √ Would you like to install them now with npm? · No / Yes Installing eslint-plugin-vue@latest, @typescript-eslint/eslint-plugin@latest, eslint-config-airbnb-base@latest, eslint@^7.32.0 || ^8.2.0, eslint-plugin-import@^2.25.2, @typescript-eslint/parser@latest npm WARN tsutils@3.21.0 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself. npm WARN vue-item@1.0.0 No description npm WARN vue-item@1.0.0 No repository field. + eslint@8.14.0 + eslint-plugin-import@2.26.0 + eslint-config-airbnb-base@15.0.0 + eslint-plugin-vue@8.7.1 + @typescript-eslint/parser@5.22.0 + @typescript-eslint/eslint-plugin@5.22.0 added 112 packages from 71 contributors, updated 4 packages and audited 195 packages in 187.851s 49 packages are looking for funding run `npm fund` for details found 0 vulnerabilities A config file was generated, but the config file itself may not follow your linting rules.
3.查看eslint.js文件
看到生成的文件在plugin:vue/essential使用了vue2的規(guī)則，修改vue3的ue3-strongly-recommended校驗方法。
module.exports = {
"env": {
"es2021": true
},
"extends": [
//默認(rèn)使用vue2的配置
//"plugin:vue/essential",
//修改使用vue3的規(guī)則
"plugin:vue/vue3-strongly-recommended",
"airbnb-base"
],
"parserOptions": {
"ecmaVersion": "latest",
"parser": "@typescript-eslint/parser",
"sourceType": "module"
},
"plugins": [
"vue",
"@typescript-eslint"
],
"rules": {
}
}
在 https://eslint.vuejs.org/user-guide/#usage #Bundle Configurations 可以看到說明，翻譯了下可以參考：
這個插件提供了一些預(yù)定義的配置?？梢酝ㄟ^將以下配置添加到extends. "plugin:vue/base"... 啟用正確 ESLint 解析的設(shè)置和規(guī)則。 使用 Vue.js 3.x 的配置。 "plugin:vue/vue3-essential"... base，以及防止錯誤或意外行為的規(guī)則。 "plugin:vue/vue3-strongly-recommended"... 上面，加上大大提高代碼可讀性和/或開發(fā)體驗的規(guī)則。 "plugin:vue/vue3-recommended"... 上面，加上強(qiáng)制執(zhí)行主觀社區(qū)默認(rèn)值的規(guī)則，以確保一致性。 使用 Vue.js 2.x 的配置。 "plugin:vue/essential"... base，以及防止錯誤或意外行為的規(guī)則。 "plugin:vue/strongly-recommended"... 上面，加上大大提高代碼可讀性和/或開發(fā)體驗的規(guī)則。 "plugin:vue/recommended"...以上，加上強(qiáng)制執(zhí)行主觀社區(qū)默認(rèn)值以確保一致性的規(guī)則。
4.在package.json下添加驗證腳本
–fix 可以自動修復(fù)低級代碼問題
"scripts": {
"dev":"vite",
"lint": "eslint ./src/**/*.{js,vue,ts,tsx,jsx} --fix"
},
5.編輯器中安裝eslint插件
5.1 VS Code中安裝eslint插件步驟，按下圖操作
在VS Code設(shè)置中開啟eslint格式化配置勾上，默認(rèn)是不開啟的。
5.2 Idea 中配置eslint方法
setting–搜索eslint就有結(jié)果，點ESLint勾上相應(yīng)的選項。
6.在提交git時自動進(jìn)行ESLint校驗方法
執(zhí)行命令：
npx mrm@2 lint-staged
在package.json文件下添加下面的代碼。提交git就會自動校驗修復(fù)，加入git提交。
"lint-staged": {
"*.{js,vue,ts}": [
"eslint --cache --fix",
"npm run lint", //執(zhí)行l(wèi)int校驗規(guī)則，不需要手動校驗
"git add" / /修改后的文件添加git
]
}
總結(jié)
項目中使用了ESLint插件工具，幫助我們寫出符合規(guī)范的代碼，可以提高代碼規(guī)范和編碼效率。當(dāng)然了，還有其他的工具也歡迎在評論區(qū)留言一起學(xué)習(xí)，成長進(jìn)步。
相關(guān)文章
使用yarn?build?打包vue項目時靜態(tài)文件或圖片未打包成功的問題及解決方法
這篇文章主要介紹了使用yarn?build?打包vue項目時靜態(tài)文件或圖片未打包成功的問題及解決方法，解決方法不復(fù)雜通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細(xì)介紹了基于Vue.js實現(xiàn)簡單搜索框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要為大家詳細(xì)解析了vue分頁組件table-pagebar使用實例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了基于Vue ECharts簡易實現(xiàn)雷達(dá)圖,本文通過實例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
vue.js樣式布局Flutter業(yè)務(wù)開發(fā)常用技巧
這篇文章主要為大家介紹了vue.js樣式布局Flutter業(yè)務(wù)開發(fā)中的常用技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2021-11-11
這篇文章主要介紹了Vue中生命周期定義及流程，生命周期又被稱為生命周期回調(diào)函數(shù)、生命周期函數(shù)或生命周期鉤子，下文關(guān)于其更多有趣的介紹需要的小伙伴可以參考一下文章詳細(xì)內(nèi)容2022-05-05
vue播放flv、m3u8視頻流(監(jiān)控)的方法實例
隨著前端大屏頁面的逐漸壯大,客戶的...其中實時播放監(jiān)控的需求逐步增加,視頻流格式也是有很多種,用到最多的.flv、.m3u8,下面這篇文章主要給大家介紹了關(guān)于vue播放flv、m3u8視頻流(監(jiān)控)的相關(guān)資料,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Antd的table組件表格的序號自增操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
elementui的el-popover修改樣式不生效的解決
在使用element-ui的時候，有一個常用的組件，那就是el-popover，本文就介紹一下elementui的el-popover修改樣式不生效的解決方法，感興趣的可以了解一下2021-06-06
這篇文章主要介紹了基于VUE的v-charts的曲線顯示功能,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-10-10