ESLint

???在所有的JavaScript 項(xiàng)目開發(fā)中我們都會接觸到 ESLint 這個詞，ESLint 是個什么樣的組件會給為項(xiàng)目做些什么嗎？ESLint 是一種檢查語法錯誤以及代碼是否按照預(yù)定規(guī)則編寫的工具。ESLint 可以幫助開發(fā)者發(fā)現(xiàn)代碼中潛在的錯誤。在Vue項(xiàng)目中Eslint一般都會配合其他語法檢測工具一起使用，最經(jīng)典的組合是Eslint+ Prettier 。

???Eslint 和 Prettier 并不局限于 Vue.js，而是掌握 JavaScript 的必備知識，所以推薦給不懂 ESLint 的同學(xué)。即使你看了這篇文章，你也會無法理解 ESLint 和 Prettier 的所有規(guī)則，但是通過查看運(yùn)行你可以完全理解 ESLint 和 Prettier 是做什么的。下面讓我們通過實(shí)際檢查操作而不是用文字解釋來輕松理解 ESLint 的作用與使用。

第一章 Vue3項(xiàng)目創(chuàng)建 1 Vue CLI 創(chuàng)建vue項(xiàng)目
第一章 Vue3項(xiàng)目創(chuàng)建 2 使用 Webpack 5 搭建 vue項(xiàng)目
第一章 Vue3項(xiàng)目創(chuàng)建 3 Vite 創(chuàng)建 vue項(xiàng)目
第二章 Vue3 基礎(chǔ)語法指令
第三章 Vue Router路由器的使用
第四章 VUE常用 UI 庫 1 ( element-plus,Ant ,naiveui,ArcoDesign)
第四章 VUE常用 UI 庫 2 ( ailwind 后臺框架)
第五章 Vue 組件應(yīng)用 1( Props )
第五章 Vue 組件應(yīng)用 2 ( Emit )
第五章 Vue 組件應(yīng)用 3( Slots )
第五章 Vue 組件應(yīng)用 4 ( provide 和 inject )
第五章 Vue 組件應(yīng)用 5 (Vue 插件)
第六章 Pinia,Vuex與axios,VueUse 1（Pinia）
第六章 Pinia,Vuex與axios,VueUse 2(Vuex)
第六章 Pinia,Vuex與axios,VueUse 3（VueUse）
第六章 Pinia,Vuex與axios,VueUse 4（axios）
第七章 TypeScript 上
第七章 TypeScript 中
第七章 TypeScript 下 創(chuàng)建Trello 任務(wù)管理器
第八章 ESLint 與 測試 ( ESLint )
第八章 ESLint 與 測試 ( Jest )
第八章 ESLint 與 測試 (TypeScript 中Jest與檢測環(huán)境集成)

1 ESLint創(chuàng)建

在Vue項(xiàng)目中導(dǎo)入ESLint組件，ESLint官網(wǎng) https://eslint.org/docs/latest/地址。

1. 首先，安裝 ESLint：

npm install eslint --save-dev
//安裝vue項(xiàng)目中eslint插件
npm install eslint-plugin-vue --save-dev

2. 然后，初始化 ESLint 配置文件：

npm init @eslint/config
或者
npx eslint --init

? How would you like to use ESLint? ...
  To check syntax only //僅檢查語法
> To check syntax and find problems //檢查語法并發(fā)現(xiàn)問題
  //檢查語法、發(fā)現(xiàn)問題并強(qiáng)制執(zhí)行代碼風(fēng)格
  To check syntax, find problems, and enforce code style
//對項(xiàng)目代碼質(zhì)量要求不高的項(xiàng)目可以選擇一和二
//選擇“檢查語法并發(fā)現(xiàn)問題”，因?yàn)樯院笪覀冞€將使用 Prettier 來強(qiáng)制執(zhí)行代碼樣式。

? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
//選擇 JavaScript 模塊主要是因?yàn)?Vue3 使用它們。
  
? Which framework does your project use? ...
  React
> Vue.js
  None of these 
//選擇Vue項(xiàng)目
  
//選擇是否驗(yàn)證TypeScript語法
 ? Does your project use TypeScript? ? No / Yes 
//項(xiàng)目沒有使用TypeScript選擇no

//你的代碼在哪里運(yùn)行 
? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node 
//選擇Browser“瀏覽器”，因?yàn)?Vue項(xiàng)目需要在瀏覽器上運(yùn)行web項(xiàng)目，如果是桌面或者是app選擇Node。

//您希望您的配置文件采用什么格式
? What format do you want your config file to be in? … 
  JavaScript
  YAML
? JSON
//開發(fā)中一般會使用JavaScript與JSON作為配置 .eslintrc文件格式。

eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest

//你想現(xiàn)在用 npm 安裝它們嗎？ 選擇是
? Which package manager do you want to use? ...
> npm
  yarn
  pnpm

執(zhí)行完成后將在項(xiàng)目中新創(chuàng)建一個 .eslintrc.cjs 文件。

項(xiàng)目
 |---node_modules
 |---src       
 |---.eslintrc.cjs    ESLint配置文件  
 |---package.json     項(xiàng)目組件文件
 |---vite.config.js   vite配置文件

接下來在項(xiàng)目中的 package.json 文件中添加以下腳本。

"scripts": {
  "lint": "eslint --ext .js,.vue src"
}

最后，可以在終端中運(yùn)行 npm run lint 命令來檢測代碼。

npm run lint
> vue-line@0.0.0 lint      
> eslint --ext .js,.vue src

???在 ESLint 初始化成功后，在項(xiàng)目中出現(xiàn)一個.eslintrc.js文件，文件內(nèi)容如下。

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential"
    ],
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
}

???你可以在 package.json 文件中檢查到eslint與eslint-plugin-vue導(dǎo)入的規(guī)則版本。

{
 ......
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "eslint": "^8.32.0",
    "eslint-plugin-vue": "^9.9.0",
    "vite": "^4.0.0"
  }
}

2 ESLint 規(guī)則設(shè)置

???在項(xiàng)目根目錄下的**.eslintrc.cjs文件中的extends**屬性中定義了項(xiàng)目使用的規(guī)則組件。以后與ESLint有關(guān)的其他規(guī)則組件都需要在extends中進(jìn)行加入，后邊會涉及的Prettier 組件也會在extends中設(shè)置。只有在extends中引入的規(guī)則組件才會在ESLint檢測的中被使用到。

• eslint:recommended 是ESLint的原始規(guī)則。
• plugin:vue/vue3-essential 是vue語法模板規(guī)則。

"extends": [
    "eslint:recommended",
    "plugin:vue/vue3-essential"
],

???從ESLint文檔https://eslint.org/docs中查看“eslint:recommended”應(yīng)用的驗(yàn)證規(guī)則內(nèi)容。

???從eslint-plugin-vue官網(wǎng)上https://eslint.vuejs.org/rules/查看到Vue的驗(yàn)證規(guī)則內(nèi)容。

為了驗(yàn)證規(guī)則的有效性，我們將App.vue文件中的代碼進(jìn)行了修改。

<script setup>
import HelloWorld from './components/HelloWorld.vue'
let msg="測試驗(yàn)證lint";
</script>
<template>
</template>
<style scoped>
</style>

???執(zhí)行l(wèi)int語法檢測功能，編輯器會提示一些語法規(guī)則檢測錯誤信息。

npm run lint
> vue-line@0.0.0 lint
> eslint --ext .js,.vue src
D:\vue\vue-line\src\App.vue
  2:8  error  'HelloWorld' is defined but never used    no-unused-vars
  3:5  error  'msg' is assigned a value but never used  no-unused-vars
  5:1  error  The template requires child element       vue/valid-template-root
? 3 problems (3 errors, 0 warnings)

???上面前兩個編譯失敗發(fā)生錯誤的“no-unused-vars”提示，是由于ESLint 規(guī)則檢測到的。ESLint 規(guī)則的與 vue 規(guī)則不同，開頭沒有“vue/”的錯誤提示都是ESLint中的原始規(guī)則錯誤。 vue/valid-template-root是eslint-plugin-vue檢測出來Vue語法錯誤的規(guī)則提示。

在ESLint官網(wǎng)中查詢到no-unused-vars錯誤信息內(nèi)容，沒有未使用定義的變量。

在eslint.vuejs官網(wǎng)中可以查詢到 vue/valid-template-root規(guī)則信息提示內(nèi)容，提示錯誤信息模板中沒有內(nèi)容。

3 ESLint驗(yàn)證設(shè)置

??? .eslintrc.js 文件中的rules屬性是用于設(shè)置ESLint的驗(yàn)證的地方，通過設(shè)置rules中的屬性來控制整個ESLint檢測內(nèi)容，例如關(guān)閉有沖突的規(guī)則，關(guān)閉不想使用的規(guī)則，縮進(jìn)格式等等內(nèi)容。下面我們要關(guān)閉上面出現(xiàn)錯誤提示的vue/valid-template-root規(guī)則，編輯 .eslintrc.js 文件中的rules屬性，在rules屬性里添加vue/valid-template-root，并設(shè)置其值為off，off表示錯誤級別，表示關(guān)閉驗(yàn)證。

module.exports = {
    ......
    "plugins": [
        "vue"
    ],
    "rules": {
        //關(guān)閉vue/valid-template-root驗(yàn)證
        'vue/valid-template-root':'off'
    }
}

???設(shè)置完成后，再次執(zhí)行 npm run lint命令，編譯成功后會發(fā)現(xiàn)錯誤提示中的vue/valid-template-root信息不見了。

 npm run lint
> vue-line@0.0.0 lint
> eslint --ext .js,.vue src
D:\vue\vue-line\src\App.vue
  2:8  error  'HelloWorld' is defined but never used        no-unused-vars
  3:5  error  'msg' is assigned a value but never used      no-unused-vars

???錯誤級別除了“off”之外還有“warn”（警告）和“error”（錯誤）都是規(guī)則的設(shè)置值。設(shè)置為error會導(dǎo)致編譯失敗。如果設(shè)置為warn，會顯示警告信息，但是編譯會正常運(yùn)行。為了開發(fā)調(diào)試方便將項(xiàng)目中的console與debugger錯誤關(guān)閉，在項(xiàng)目發(fā)布打包的時候可以將這個檢測在打開。

  rules: {
    'vue/valid-template-root':'off'
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },

4 ESLint格式化設(shè)置

???ESLint 也可以用作格式化程序（代碼格式化），所以我也會檢查如何設(shè)置它。通過使用格式化程序，您可以設(shè)置縮進(jìn)并統(tǒng)一整個項(xiàng)目文件中是否存在引號和分號。

???使用 ESLint 規(guī)則將縮進(jìn)從 2 更改為 4。格式化程序也可以寫在 .eslintrc.js 文件中。設(shè)置是在一個數(shù)組中進(jìn)行的，在第一個元素中設(shè)置錯誤級別，在第二個元素中設(shè)置設(shè)置值。

module.exports = {
    ......
    "plugins": [
        "vue"
    ],
    "rules": {
        'vue/valid-template-root':'off',
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        //格式化驗(yàn)證縮進(jìn)4行
        'indent': ['error', 4]
    }
}

在這里，我們將檢查縮進(jìn)設(shè)置。查看 App.vue 文件，當(dāng)前縮進(jìn)為 2。

<script setup>
let msg="測試驗(yàn)證lint";
const onfind=()=>{
//當(dāng)前縮進(jìn)為2空格    
  alert(1);
}
</script>
<template>
  <div @click="onfind">我格式縮進(jìn)2格</div>
</template>
<style scoped>
</style>

??? 執(zhí)行l(wèi)int語法檢測命令，編輯器會出現(xiàn)編譯錯誤。第 5-1 行是錯誤的，因?yàn)樗鼈冎豢s進(jìn)了 2 格，正確的縮進(jìn)4個空格。

npm run lint
> vue-line@0.0.0 lint
> eslint --ext .js,.vue src
D:\vue\vue-line\src\App.vue
  2:5  error  'msg' is assigned a value but never used      no-unused-vars
  5:1  error  Expected indentation of 4 spaces but found 2  indent

vue模板格式設(shè)置

??? 這個時候你會發(fā)現(xiàn)在App.vue代碼中的規(guī)則驗(yàn)證，只對script標(biāo)簽中的代碼縮進(jìn)4格規(guī)則進(jìn)行了檢測，但是template標(biāo)簽里面的HTML縮進(jìn)并沒有進(jìn)行規(guī)則檢測。你要對模板中的HTML縮進(jìn)進(jìn)行驗(yàn)證就需要在 .eslintrc.js文件中設(shè)置模板的驗(yàn)證項(xiàng)，加入 vue/html-indent 規(guī)則驗(yàn)證改模板標(biāo)簽的縮進(jìn)。

module.exports = {
    ......
    "plugins": [
        "vue"
    ],
    "rules": {
        'vue/valid-template-root':'off',
        'indent': ['error', 4],
        //模板格式設(shè)置
        "vue/html-indent": ["error", 4]
    }
}

執(zhí)行l(wèi)int語法檢測命令就會看到針對template標(biāo)簽里面的HTML縮進(jìn)的錯誤提示了。

 npm run lint
> vue-line@0.0.0 lint
> eslint --ext .js,.vue src
D:\vue\vue-line\src\App.vue
  2:5  error  'msg' is assigned a value but never used             no-unused-vars
  5:1  error  Expected indentation of 4 spaces but found 2         indent
  9:1  error  Expected indentation of 4 spaces but found 0 spaces  vue/html-indent

第 9-1 行是錯誤提示沒有縮進(jìn)4個空格。

5 ESLint自動修復(fù)

???? 我們可以在代碼中來修改縮進(jìn)4個空格的錯誤，但是有的時候代碼量巨大的時候這就是一個艱巨的任務(wù)。在ESLint指令中提供了一個自動修復(fù)錯誤的指令，可以幫助我們輕松解決這個問題。在npm run lint后邊加上-- --fix參數(shù)。

npm run lint -- --fix

運(yùn)行命令對項(xiàng)目中所有的代碼進(jìn)行檢測與修復(fù)。

npm run lint -- --fix
> vue-line@0.0.0 lint
> eslint --ext .js,.vue src "--fix"
D:\vue\vue-line\src\App.vue
  2:5  error  'msg' is assigned a value but never used  no-unused-vars

App.vue中的代碼縮進(jìn)格數(shù)都變成了4格。

<script setup>
let msg="測試驗(yàn)證lint";
const onfind=()=>{
//當(dāng)前縮進(jìn)為2空格    
    alert(1);
}
</script>
<template>
    <div @click="onfind">我格式縮進(jìn)2格</div>
</template>
<style scoped>
</style>

6 Prettier

???? Prettier是一款超強(qiáng)的代碼格式化工具，與ESLint，TSLint等各種格式化工具不同的是，Prettier只檢測代碼格式化的格式問題，而不關(guān)心語法問題。所以在項(xiàng)目中可以單獨(dú)用ESLint檢測代碼的質(zhì)量，但由于ESLint專門針對語法進(jìn)行分析，所以有些代碼部分會覆蓋不到，這個時候需要使用到Prettier來進(jìn)行代碼的格式檢測了。

npm install prettier --save-dev 
npm install @vue/eslint-config-prettier eslint-plugin-prettier --save-dev

• prettier prettier格式化。
• eslint-config-prettier 它提供了一個設(shè)置來關(guān)閉所有 Prettier 可以覆蓋的 ESLint 規(guī)則，解決 ESLint 與 Prettier 沖突。
• vue/eslint-config-prettier 用與Vue 項(xiàng)目中，它禁用了所有與 Prettier 沖突的 ESLint 規(guī)則，以保證 Prettier 的代碼格式化功能在Vue項(xiàng)目中可以正常工作。

在package.json 文件中會看到，新增加“@vue/eslint-config-prettier”、“eslint-plugin-prettier”、“prettier”三個包。

{
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/eslint-config-prettier": "^7.0.0",
    "eslint": "^8.33.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.9.0",
    "prettier": "^2.8.3",
    "vite": "^4.0.0"
  }
}

在ESLint的 配置文件.eslintrc.cjs中，extends屬性中加入“@vue/prettier”格式化組件。

module.exports = {
    ......
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "@vue/prettier"
    ],
}

????運(yùn)行檢測指令，會發(fā)現(xiàn) prettier 組件檢測到代碼中所有的格式化的錯誤信息。例如代碼結(jié)尾“;”冒號，提示雙引號改成了單引號，代碼的縮進(jìn)不規(guī)范等等問題。

npm run lint
> vue-line@0.0.0 lint
> eslint --ext .js,.vue src
D:\vue\vue-line\src\App.vue
   2:5   error    'msg' is assigned a value but never used      no-unused-vars
   2:8   warning  Replace `="測試驗(yàn)證lint"` with `·=·"測試驗(yàn)證lint";`   prettier/prettier
   3:13  warning  Replace `=()=>` with `·=·()·=>·`              prettier/prettier
   4:1   warning  Replace `//當(dāng)前縮進(jìn)為2空格····` with `··//當(dāng)前縮進(jìn)為2空格`  prettier/prettier 
   5:1   error    Expected indentation of 4 spaces but found 2  indent
   6:2   warning  Insert `;`                                    prettier/prettier
  11:15  warning  Delete `?`                                    prettier/prettier
D:\vue\vue-line\src\main.js
  1:27  warning  Replace `'vue'` with `"vue";`                  prettier/prettier
  2:8   warning  Replace `'./style.css'` with `"./style.css";`  prettier/prettier
  3:17  warning  Replace `'./App.vue'` with `"./App.vue";`      prettier/prettier
  5:22  warning  Replace `'#app')` with `"#app");`              prettier/prettier
? 15 problems (3 errors, 12 warnings)
  1 error and 12 warnings potentially fixable with the `--fix` option.

????當(dāng)運(yùn)行自動自動修正指令后， Prettier組件也會做同樣的事情。Prettier 會根據(jù)默認(rèn)規(guī)則自動修正vue項(xiàng)目中的代碼，而無需手工修改代碼格式。

 npm run lint -- --fix
> vue-line@0.0.0 lint
> eslint --ext .js,.vue src "--fix"
D:\vue\vue-line\src\App.vue
  2:5  error    'msg' is assigned a value but never used      no-unused-vars
  4:3  warning  Delete `··`                                   prettier/prettier
  5:1  error    Expected indentation of 4 spaces but found 2  inden
 ? 4 problems (3 errors, 1 warning)
  1 error and 1 warning potentially fixable with the `--fix` option.

????可以看到App.vue中的代碼格式已經(jīng)變得符合規(guī)范了，無需我們自己手動調(diào)整代碼格式。

<script setup>
let msg = "測試驗(yàn)證lint";
const onfind = () => {
    //當(dāng)前縮進(jìn)為2空格
  alert(1);
};
</script>
<template>
  <div @click="onfind">我格式縮進(jìn)2格</div>
</template>
<style scoped></style>

1 .prettierrc文件配置

????在 Vue 項(xiàng)目安裝文件夾中創(chuàng)建一個Prettier的配置文件 .prettierrc。.prettierrc 文件是Prettier組件的配置文件，用于配置Prettier的格式化規(guī)則，如換行符、默認(rèn)縮進(jìn)2，行尾分號，雙引號等格式。在.prettierrc文件中根據(jù)項(xiàng)目實(shí)際情況來定義自己的定義檢測項(xiàng)目。

項(xiàng)目
 |---node_modules
 |---src       
 |---.eslintrc.cjs    ESLint配置文件
 |---.prettierrc      Prettier配置文件   
 |---package.json     項(xiàng)目組件文件
 |---vite.config.js   vite配置文件

在.prettierrc文件中寫入一下配置。

{
  "tabWidth": 4, //縮進(jìn)寬度
  "semi": false,//代碼結(jié)尾不使用;號
  "singleQuote": true //使用單引號而不是雙引號
}

在官網(wǎng)中可以https://prettier.io/docs/en/options.html查看到全部的檢測格式說明。

運(yùn)行 npm run lint 查看到代碼格式錯誤提示。

 npm run lint
> vue-line@0.0.0 lint
> eslint --ext .js,.vue src
D:\vue\vue-line\src\App.vue
  2:5   error    'msg' is assigned a value but never used      no-unused-vars
  2:11  warning  Replace `"測試驗(yàn)證lint";` with `'測試驗(yàn)證lint'`       prettier/prettier
  4:1   warning  Replace `··` with `····`                      prettier/prettier
  4:1   error    Expected indentation of 4 spaces but found 2  indent
  5:1   warning  Replace `··alert(1);` with `····alert(1)`     prettier/prettier
  5:1   error    Expected indentation of 4 spaces but found 2  indent
  9:1   warning  Insert `··`                                   prettier/prettier
 ? 8 problems (4 errors, 4 warnings)
  2 errors and 4 warnings potentially fixable with the `--fix` option.

同樣可以使用npm run lint – --fix指令自動修復(fù)代碼格式規(guī)則。

npm run lint -- --fix
> vue-line@0.0.0 lint
> eslint --ext .js,.vue src "--fix"
D:\vue\vue-line\src\App.vue
  2:5  error  'msg' is assigned a value but never used  no-unused-vars
? 2 problems (2 errors, 0 warnings)

App.vue中的代碼發(fā)生變化，格式錯誤被修復(fù)。代碼中的;號消失了，雙引號變成引號，縮進(jìn)變成4格。

<script setup>
let msg = '測試驗(yàn)證lint'
const onfind = () => {
    //當(dāng)前縮進(jìn)為2空格
    alert(1)
}
</script>
<template>
    <div @click="onfind">我格式縮進(jìn)2格</div>
</template>
<style scoped></style>

2 .eslintrc.cjs 中設(shè)置Prettier配置

????可以在.eslintrc.cjs 文件中來配置.prettierrc中的相同功能。這樣在項(xiàng)目中就不需要使用**.prettierrc**配置文件來設(shè)置格式檢測規(guī)則，可以使項(xiàng)目更加整潔一些。

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "@vue/prettier"
    ],
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
        'vue/valid-template-root':'off',
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        //prettier驗(yàn)證設(shè)置
        "prettier/prettier": [
            "error",
            {
              tabWidth: 2,
              singleQuote: false,
              semi: true,
            },
          ],
    }
}

7 Babel

?????Babel是種JavaScript代碼編譯器，它可以將ES6、ES7、ES8等的代碼轉(zhuǎn)換為ES5代碼，更好理解的說法就是將node語法代碼轉(zhuǎn)換成可以在瀏覽器中運(yùn)行的javascript代碼。Babel可以和ESLint組合在一起來完成vue項(xiàng)目中的代碼質(zhì)量檢測，Babel做代碼的轉(zhuǎn)換工作，ESLint做代碼中的語法錯誤檢查和修復(fù)。

?????將它們兩個組合在一起，可以實(shí)現(xiàn)代碼的靜態(tài)分析與檢測，排查可能出現(xiàn)的問題與風(fēng)險點(diǎn)，它會將node語法代碼和css樣式html模板樣式在不啟動服務(wù)器執(zhí)行的情況下就可以檢測到整個項(xiàng)目代碼中潛在的問題。Babel與ESLint組件在集成到項(xiàng)目的時候需要引入多種類型的@babel組件，可以在官網(wǎng)中找到你要使用的編譯的對應(yīng)類型組件。如果項(xiàng)目版本較低可以使用babel-eslint組件。Babel的官方網(wǎng)址https://babeljs.io/。

1 在項(xiàng)目中導(dǎo)入babel依賴組件。

npm install  @babel/core @babel/eslint-parser --save-dev
npm install  @babel/preset-env --save-dev
npm install  @babel/preset-react --save-dev

2 在**.eslintrc.cjs**文件中的設(shè)置babel信息，parser屬性中配置"@babel/eslint-parser"，可以在parserOptions屬性中設(shè)置其他配置選項(xiàng)。

• requireConfigFile false 允許@babel/eslint-parser 在沒有 Babel 配置的文件的情況下運(yùn)行。
• babelOptions Babel 解析器的配置對象，代替配置文件的配置Babel 基礎(chǔ)設(shè)置項(xiàng)目。

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "@vue/prettier"
    ],
    "overrides": [
    ],
    //vue-eslint-parser
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module",
        //無配置文件模式
        "requireConfigFile": false,
        //ESLint集成babel插件
        "parser": '@babel/eslint-parser',
        //babel配置信息設(shè)置
        "babelOptions": {
            babelrc: false,
            configFile: false,
            //babel使用什么類型的編輯器組件
            presets: ["@babel/preset-env"],           
            "parserOpts": {
                "plugins": ["jsx"]
            }
        } 
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
}

App.vue文件中的代碼內(nèi)容，我們使用ESLint+Prettier與Babel進(jìn)行質(zhì)量檢測。

<script setup>
const msg='測試驗(yàn)證lint'
const onfind =()=> {
// 當(dāng)前縮進(jìn)為2空格
alert(1)
}
</script>
<template>
<div @click="onfind">我格式縮進(jìn)2格</div>
</template>
<style scoped>

運(yùn)行npm run lint 指令驗(yàn)證Babel是否配置成功，后端沒有異常，有檢測語法錯誤提示出來，表示Babel組件集成成功。

npm run lint

> vue-line@0.0.0 lint
> eslint --ext .js,.vue src

D:\vue\vue-line\src\App.vue
   2:7   error    'msg' is assigned a value but never used     no-unused-vars
   2:10  warning  Replace `='測試驗(yàn)證lint'` with `·=·"測試驗(yàn)證lint";`  prettier/prettier
   3:15  warning  Replace `()` with `·()·`                     prettier/prettier
   4:1   warning  Insert `··`                                  prettier/prettier
   5:1   warning  Replace `alert(1)` with `··alert(1);`        prettier/prettier
   6:2   warning  Insert `;`                                   prettier/prettier
   9:1   warning  Insert `··`                                  prettier/prettier
  12:5   warning  Insert `·`                                   prettier/prettier
  13:1   warning  Replace `font-size:` with `··font-size:·`    prettier/prettier

D:\vue\vue-line\src\components\HelloWorld.vue
  2:10  error    'ref' is defined but never used      no-unused-vars
  2:21  warning  Replace `'vue'` with `"vue";`        prettier/prettier
  5:1   error    The template requires child element  vue/valid-template-root

D:\vue\vue-line\src\main.js
  1:27  warning  Replace `'vue'` with `"vue";`                  prettier/prettier
  2:8   warning  Replace `'./style.css'` with `"./style.css";`  prettier/prettier
  3:17  warning  Replace `'./App.vue'` with `"./App.vue";`      prettier/prettier
  5:22  warning  Replace `'#app')` with `"#app");`              prettier/prettier
? 16 problems (3 errors, 13 warnings)

?????如果將要使用Babel配置文件來設(shè)置Babel功能，需要在**.eslintrc.cjs文件中requireConfigFile** 屬性刪除。在項(xiàng)目的根目錄中創(chuàng)建**.babelrc文件，在.babelrc**文件設(shè)置Babel功能項(xiàng)。

.babelrc文件中設(shè)置@babel/preset-env組件內(nèi)容，.babelrc文件中的參數(shù)屬性可以在官網(wǎng)查看。

{
    "presets": [
      [
        "@babel/preset-env",
          {
            "targets": {
              "ie": 11,
              "esmodules": true
            },
            "useBuiltIns": "usage",
            "corejs": 3
          }
        ]
    ]
 }

?????Babel 在編輯JavaScript，CSS,HTML,TyptSricpt，其他模板語言的時候，會用到它們對應(yīng)的@Babel 組件。我們需要在官網(wǎng)上查到這些對應(yīng)語言的使用組件，使用將它們導(dǎo)入到項(xiàng)目中，在.babelrc文件中配置組件的插入就可以使用ESLint+Babel模式來檢查和提高代碼質(zhì)量了。

8 airbnb 與 standard

?????在上面介紹了Prettier，Babel與ESLint集成使用的情況。但是在實(shí)際開發(fā)中配置ESLint與這些第三方組件聯(lián)合使用的過程非常繁瑣麻煩，需要解決各種版本沖突和兼容性，語言編譯解析等等問題。當(dāng)這些檢測，格式，編譯轉(zhuǎn)錄組件的規(guī)則配置信息數(shù)量龐大后，組件之間的沖突與維護(hù)會變得非常困難。我們會把配置文件寫的復(fù)雜又難以理解，有的時候會出現(xiàn)各種奇怪的問題，需要花費(fèi)大量的時間去調(diào)試它們，項(xiàng)目會變得非常難以維護(hù)。為了很好的解決上面的問題，出現(xiàn)了一種整套的規(guī)則檢測組件，不需要在維護(hù)這些復(fù)雜的組件關(guān)系和它們在配置文件中的各種規(guī)則設(shè)置。我們直接導(dǎo)入一套規(guī)則組件，在項(xiàng)目中只對這一套規(guī)則組件進(jìn)行配置與維護(hù)。

?????現(xiàn)在比較流行的 standard 和 airbnb 兩個規(guī)則組件，它們是現(xiàn)階段使用最多最流行，整體實(shí)踐效果最好的規(guī)則組件。我們只需要直接拿來使用它們的功能，而不需要在設(shè)置其他組件來進(jìn)行質(zhì)量檢驗(yàn)了。standard 和 airbnb檢測組件可以很方便的幫助我們在項(xiàng)目中檢查出代碼中的可能錯誤和潛在問題，以保證項(xiàng)目的質(zhì)量和可維護(hù)性。如果你從來沒有使用過 airbnb 之類的檢測規(guī)則來檢測過項(xiàng)目代碼，那么你編寫的代碼中的各個地方都有可能出現(xiàn)錯誤。

1 airbnb

?????導(dǎo)入airbnb組件到項(xiàng)目中來，它的驗(yàn)證規(guī)則屬性可以在https://github.com/lin-123/javascript中查看到。

npm install --save-dev @vue/eslint-config-airbnb 
npm install --save-dev eslint-config-airbnb-base

在ESLint的配置文件.eslintrc.cjs 中的extends屬性里設(shè)置 ‘@vue/airbnb’，它可以同時設(shè)置使用多個規(guī)則組件內(nèi)容。

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        'plugin:vue/vue3-essential',
        '@vue/airbnb',
    ],
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'vuejs-accessibility/click-events-have-key-events': 'off',   
    }
}

運(yùn)行檢測npm run lint檢測指令，可以看到項(xiàng)目代碼已經(jīng)運(yùn)行airbnb中設(shè)置的驗(yàn)證規(guī)則了。

npm run lint
npm run lint -- --fix

standard使用

?????standard使用與airbnb 基本一樣，在項(xiàng)目中導(dǎo)入它的基礎(chǔ)組件包和eslint兼容包，在eslint中加載這個standard規(guī)則。standard中所有驗(yàn)證規(guī)則在https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md#javascript-standard-style中查看到。

npm install standard --save-dev
npm install @vue/eslint-config-standard --save-dev
//加入.eslintrc.cjs 文件中
module.exports = {
    "extends": [
       'plugin:vue/vue3-essential',
       '@vue/standard'
    ],
}
//檢測與自動修復(fù)
npm run lint
npm run lint -- --fix

大家在實(shí)際的開發(fā)中可以根據(jù)自己項(xiàng)目情況來選擇最適合的組合方式。

• ESLint

• ESLint+Prettier

• ESLint+Prettier+Babel

• ESLint+airbnb

• ESLint+standard

9 ESLint 中TypeSript設(shè)置

?????TypeSript類型的項(xiàng)目中加入ESLint的TypeSript規(guī)則檢測，第一種方式是通過初始化eslint來導(dǎo)入TypeSript檢測所需要的包，

npm init vite@latest ESLint-TypeSript
cd ESLint-TypeSript
npm install
//安裝vue項(xiàng)目中eslint插件
npm install eslint --save-dev
//安裝vue項(xiàng)目中eslint插件
npm install eslint-plugin-vue --save-dev
npm init @eslint/config

? How would you like to use ESLint? ...
  To check syntax only //僅檢查語法
> To check syntax and find problems //檢查語法并發(fā)現(xiàn)問題
? What type of modules does your project use? ...
> JavaScript modules (import/export)

? Which framework does your project use? ...
  React
> Vue.js
? 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
? Which package manager do you want to use? ...
> npm
  yarn
  pnpm

已有eslint項(xiàng)目中可以不使用初始化的方式來創(chuàng)建typescript-eslint，可以直接使用npm導(dǎo)入的方式導(dǎo)入typescript-eslint規(guī)則驗(yàn)證包。

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-vue

• @typescript-eslint/parser 允許 ESLint 加載 Typescript 的解析器。
• @typescript-eslint/eslint-plugin 為 Typescript 提供 Lint 規(guī)則的插件。

.eslintrc.cjs文件設(shè)置

在.eslintrc.cjs文件中的parserOptions元素中加入parser屬性和值@typescript-eslint/parser，在語法檢測的時候可以檢測typesrcipt語法內(nèi)容。

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended",
    ],
    "overrides": [
    ],
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module",
        "parser": "@typescript-eslint/parser",
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
}

“parser”: “vue-eslint-parser” 這句很重要，必須要加上。

"lint": "eslint --ext .js,.vue,.ts src"
"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"

prettier配置文件的寫法。

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended",
        "@vue/prettier",
    ],
    "overrides": [
    ],
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module",
        "parser": "@typescript-eslint/parser",
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

standard 規(guī)則引入

在eslint+typescript項(xiàng)目環(huán)境中加入standard規(guī)則組件，需要先引入standard-with-typescript包到項(xiàng)目中來。文章來源地址http://www.zghlxwxcb.cn/news/detail-764517.html

npm install @vue/eslint-config-standard-with-typescript --save-dev 

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:vue/vue3-essential",
        '@vue/eslint-config-standard-with-typescript'
    ],
    "overrides": [
    ],
    "parser": "",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module",
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    //關(guān)閉引入規(guī)則 vite/client, use `import` style instead
    '@typescript-eslint/triple-slash-reference': 'off'
    }
}

到了這里，關(guān)于Vue3最佳實(shí)踐 第八章 ESLint 與 測試 ( ESLint )的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！