vite+vue3代碼風(fēng)格校驗(yàn)及格式化方式
團(tuán)隊(duì)代碼風(fēng)格統(tǒng)一一直是博主想干又沒有時(shí)間去干的事情，剛好借著新項(xiàng)目搭建，嘗試一下使用Eslint及Prettier工具提升一下項(xiàng)目代碼的整體質(zhì)量。
本文在配置方面僅做簡(jiǎn)單的配置，流程熟悉可以參考Eslint及Prettier官方文檔定制自己喜歡的標(biāo)準(zhǔn)。
安裝Eslint包
npm install eslint -D
初始化Eslint
npm init @eslint/config
執(zhí)行命令后會(huì)出現(xiàn)以下選項(xiàng)：
（可以按照?qǐng)D片配置，也可以后面直接更改.eslintrc.cjs文件）
具體配置可以以自己項(xiàng)目為準(zhǔn)，博主這里使用的是vite+vue3+js
安裝完成之后項(xiàng)目的根目錄會(huì)出現(xiàn).eslintrc.cjs文件
module.exports = {
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:vue/vue3-essential"
],
"overrides": [
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"vue"
],
"rules": {
}
}
安裝vite-plugin-eslint包
// 該包的作用是在vite運(yùn)行時(shí)自動(dòng)檢測(cè)eslint規(guī)范，根據(jù)配置在終端顯示未通過的校驗(yàn)代碼 npm install vite-plugin-eslint -D
安裝eslint-parser 及 @babel/core 包
// 該包的作用是允許eslint在babel轉(zhuǎn)換的源代碼上運(yùn)行 npm install @babel/eslint-parser -D npm install @babel/core -D
安裝prettier相關(guān)包
npm install prettier -D npm install eslint-config-prettier -D // eslint兼容的插件,將關(guān)閉eslint所有不必要或可能與Prettier沖突的規(guī)則 npm install eslint-plugin-prettier -D // eslint的prettier,將Prettier作為ESLint規(guī)則運(yùn)行，并將差異作為單個(gè)ESLint問題報(bào)告。
安裝vue-eslint-parser包
// 用于`.vue`文件的ESLint自定義解析器。 npm install vue-eslint-parser -D
配置.prettierrc
// .prettierrc, 配置不做過多說明，具體可查閱相關(guān)文檔
{
"printWidth": 120,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"trailingComma": "none",
"singleQuote": true,
"bracketSpacing": true,
"jsxBracketSameLine": false,
"endOfLine": "auto",
"arrowParens": "avoid"
}
配置.eslintrc.cjs
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'eslint:recommended', // eslint核心規(guī)則
'plugin:vue/vue3-essential', // 繼承eslint-plugin-vue組件中的基礎(chǔ)配置
'plugin:prettier/recommended', // 繼承eslint-plugin-prettier組件中的基礎(chǔ)配置
'eslint-config-prettier' // 處理配置兼容問題
],
parser: 'vue-eslint-parser', // 使用vue解析器
parserOptions: { // 設(shè)置支持的JavaScript語(yǔ)言選項(xiàng)
ecmaVersion: 'latest', // 指定EcmaScript的版本
sourceType: 'module', // script/module
ecmaFeatures: {
jsx: true
}
},
plugins:{
'vue', // eslint-plugin-vue縮寫
'prettier' // eslint-plugin-prettier縮寫
},
globals: {
// 添加全局變量，防止no-undef 規(guī)則發(fā)出警告
defineProps: 'readonly',
defineEmits: 'readonly',
defineExpose: 'readonly',
withDefaults: 'readonly'
},
rules: {
'no-console': 'warn',
'vue/multi-word-component-names': 'off' // extends中繼承過來的屬性，可以重新修改
...
}
}
VSCode配置
安裝ESLint及Prettier插件
1.打開VSCode設(shè)置>用戶>文本編輯器>格式化>勾選Format On Save
2. 搜索Prettier>勾選Require Config
3.打開VSCode設(shè)置>用戶>文本編輯器>Default Formatter>選擇Prettier - Code formatter
4.ctr+shift+p打開首選項(xiàng)配置settings.json>添加eslint vue支持
... "eslint.validate": [ "javascript", "javascriptreact", "vue" ], ...
特別提醒：
每次修改完Eslint及Prettier配置最好重新啟動(dòng)VSCode，防止出現(xiàn)配置不生效的情況
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了VUE項(xiàng)目中路由之間的傳值方式，文中的示例代碼講解詳細(xì)，涉及到的方法也都是開發(fā)時(shí)常用的，希望對(duì)大家有多幫助2023-06-06
vue使用keep-alive實(shí)現(xiàn)組件切換時(shí)保存原組件數(shù)據(jù)方法
這篇文章主要介紹了vue使用keep-alive實(shí)現(xiàn)組件切換時(shí)保存原組件數(shù)據(jù)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue3+ts項(xiàng)目中.env配置環(huán)境變量與情景配置方式
本文介紹了如何在Vite中配置環(huán)境變量和不同的運(yùn)行模式,環(huán)境變量文件以.env開頭,僅VITE_前綴的變量會(huì)被暴露,開發(fā)模式加載.env.development,生產(chǎn)模式加載.env.production,NODE_ENV用于區(qū)分開發(fā)和生產(chǎn)環(huán)境2024-10-10
vue3中keep-alive和vue-router的結(jié)合使用方式
這篇文章主要介紹了vue3中keep-alive和vue-router的結(jié)合使用方式，?具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue-element-admin如何設(shè)置默認(rèn)語(yǔ)言
這篇文章主要介紹了vue-element-admin如何設(shè)置默認(rèn)語(yǔ)言，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue.js實(shí)現(xiàn)選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)選項(xiàng)卡切換功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue全局自適應(yīng)大小:使用postcss-pxtorem方式
本文介紹了如何在Vue項(xiàng)目中使用postcss-pxtorem插件實(shí)現(xiàn)響應(yīng)式設(shè)計(jì),postcss-pxtorem可以自動(dòng)將CSS文件中的px單位轉(zhuǎn)換為rem單位,從而實(shí)現(xiàn)更好的自適應(yīng)布局,通過配置postcss-pxtorem插件,可以在構(gòu)建時(shí)自動(dòng)完成轉(zhuǎn)換,無(wú)需手動(dòng)修改代碼2025-01-01
這篇文章主要為大家詳細(xì)介紹了Vue生命周期和數(shù)據(jù)共享，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
Element-UI中關(guān)于table表格的那些騷操作(小結(jié))
這篇文章主要介紹了Element-UI中關(guān)于table表格的那些騷操作(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了vue父子組件slot插槽的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08