一步步詳細講解vue3配置ESLint

更新時間：2023年01月16日 11:43:40 作者：harmsworth2016

ESLint主要用于代碼規(guī)范、統(tǒng)一代碼風格,下面這篇文章主要給大家介紹了關于vue3配置ESLint的相關資料,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下

前言

對于前端項目而言，ESLint 可以檢查代碼，統(tǒng)一代碼風格，避免不必要的錯誤。在 vue3 中配置 ESLint，如下所示。

環(huán)境

vite 2.3.3
vue 3.0.5

說明

由于在 ESLint優(yōu)先級中 .eslintrc.js 的優(yōu)先級最高，故使用 .eslintrc.js。

準備一個 vue3 項目，請移步 vite構建vue3項目

安裝

目前有 2 種主流配置 ESLint 的方式，都需要 eslint 庫的支持，故都需安裝 eslint。

standard
airbnb

standard規(guī)范

standard 有一個專門配合 ESLint 提供配置項的庫，eslint-config-standard。要想使用 standard 規(guī)范，必須安裝相關依賴。

yarn add eslint-config-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node -D
# OR
npm install --save-dev eslint-config-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node

可以看出，這里沒有針對 vue 文件的檢查規(guī)范的庫，vue 生態(tài)鏈中提供了eslint-plugin-vue庫。eslint-plugin-vue 的官網(wǎng)更加詳細的介紹了如何配置 .eslintrc.js

安裝 eslint-plugin-vue

yarn add eslint eslint-plugin-vue -D
#OR
npm install --save-dev eslint eslint-plugin-vue

官方配置如下

由于，eslint-plugin-vue 配置規(guī)則的強度逐步遞增，此處只使用最基本的配置 plugin:vue/vue3-essential。

再將 standard 添加上，此時 .eslintrc.js 配置如下

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue
    'plugin:vue/vue3-essential', 
    'standard'
  ],
};

eslint 已經(jīng)生效，如下所示：

vue 生態(tài)鏈已經(jīng)包裝好 eslint-config-standard ，即 vuejs/eslint-config-standard

故，可以直接安裝并使用

yarn add @vue/eslint-config-standard -D
#OR
npm install @vue/eslint-config-standard --save-dev

初步總結

安裝 standard規(guī)范
安裝 eslint 和 eslint-plugin-vue
替換 eslint-config-standard 為 @vue/eslint-config-standard所有的安裝如下所示

yarn add eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint eslint-plugin-vue @vue/eslint-config-standard -D
# OR
npm install --save-dev eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint eslint-plugin-vue @vue/eslint-config-standard

.eslintrc.js 配置如下

// .eslintrc.js
module.exports = {
 root: true,
 env: {
   node: true,
 },
 extends: [
   // https://github.com/vuejs/eslint-plugin-vue
   'plugin:vue/vue3-essential', 
   // https://github.com/vuejs/eslint-config-standard
  '@vue/standard'
 ],
};

其實，@vue/eslint-config-standard 是 eslint-config-standard 的集成，故無需安裝 eslint-config-standard。

package.json

{
  "name": "vue3-vite",
  "version": "0.0.0",
  "scripts": {
    "serve": "vite preview",
    "build": "vite build",
    "lint": "vue-cli-service lint",
    "dev": "vite"
  },
  "dependencies": {
    "vue": "^3.0.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.2.2",
    "@vue/compiler-sfc": "^3.0.5",
    "@vue/eslint-config-standard": "^6.0.0",
    "eslint": "^7.27.0",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-vue": "^7.10.0",
    "vite": "^2.3.3"
  }
}

vue 官方推薦安裝 ESLint

上文已經(jīng)驗證了使用 yarn 的方式安裝 eslint-plugin-vue，現(xiàn)在我們使用官方推薦的方式。

先卸載所有已安裝的包

yarn remove eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint eslint-plugin-vue @vue/eslint-config-standard
# OR
npm uninstall eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint eslint-plugin-vue @vue/eslint-config-standard

刪除 .eslintrc.js 文件

vue add @vue/cli-plugin-eslint

此處一定要安裝了 @vuejs/app 才能在命令行中使用 vue 命令，可參考 vite構建vue3項目

執(zhí)行后，選擇一種自己喜歡的規(guī)范

默認保存即檢查代碼

見證奇跡的時刻到了，vue 自動安裝了必備的包并添加了配置文件。

package.json

{
  "name": "vue3-vite",
  "version": "0.0.0",
  "scripts": {
    "serve": "vite preview",
    "build": "vite build",
    "lint": "vue-cli-service lint",
    "dev": "vite"
  },
  "dependencies": {
    "vue": "^3.0.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.2.2",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.5",
    "@vue/eslint-config-standard": "^5.1.2",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^7.0.0",
    "vite": "^2.3.3"
  }
}

對比2個package.json

經(jīng)過對比可得知，vue 官方的安裝 ESLint 的方式多了2個包，且版本較低。

查看 eslint-config-standard 可知，eslint-plugin-standard 在新版 eslint-config-standard 中已經(jīng)刪除了。

再次總結

使用 vue 官方提供的命令更方便配置 ESLint。自己配置 ESLint 能夠透徹的了解需要哪些包。

airbnb規(guī)范

對于 airbnb 規(guī)范，我不習慣使用，故未了解相關資料，可使用 vue 官方命令一鍵生成。

總結

到此這篇關于vue3配置ESLint的文章就介紹到這了,更多相關vue3配置ESLint內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue slot 在子組件中顯示父組件傳遞的模板
這篇文章主要介紹了vue slot 在子組件中顯示父組件傳遞的模板,需要的朋友可以參考下
2018-03-03
詳解給Vue2路由導航鉤子和axios攔截器做個封裝
本篇文章主要介紹了詳解給Vue2路由導航鉤子和axios攔截器做個封裝，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-04-04
Vue的transition-group與Virtual Dom Diff算法的使用
這篇文章主要介紹了Vue的transition-group與Virtual Dom Diff算法的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-12-12
vue3?封裝自定義組件v-model的示例
這篇文章主要介紹了vue3?封裝自定義組件v-model及自定義組件使用v-model，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2022-07-07
使用axios發(fā)送post請求,將JSON數(shù)據(jù)改為form類型的示例
今天小編就為大家分享一篇使用axios發(fā)送post請求,將JSON數(shù)據(jù)改為form類型的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
vue兩個組件間值的傳遞或修改方式
這篇文章主要介紹了vue兩個組件間值的傳遞或修改的實現(xiàn)代碼，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-07-07
在vue中使用css modules替代scroped的方法
本篇文章主要介紹了在vue中使用css modules替代scroped的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
fetch網(wǎng)絡請求封裝示例詳解
這篇文章主要介紹了fetch網(wǎng)絡請求封裝的示例內(nèi)容詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2021-11-11
一文教會你快速上手vue的登錄界面(最新版)
幾乎每個項目都會使用登錄頁面,這篇文章主要給大家介紹了如何通過一文教會你快速上手vue的登錄界面,文中通過實例代碼介紹的很詳細,需要的朋友可以參考下
2022-11-11
electron打包vue項目的方法步驟
本文主要介紹了electron打包vue項目，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03