在 Vue3 + Vite + TS 專案中配置 ESLint，讓 VSCode 編輯器自動修復錯誤
我透過
create-vite
腳手架建立的 Vue3 + TS 模板專案中沒有預設整合 ESLint 程式碼檢查工具。
透過查閱 ESLint 官方文件和其他相關的部落格後，我對 Vue3 + TS 專案從零配置 ESLint 寫了一篇總結。
建立 Vue3 + TS 專案
Vite 需要 Node。js 版本 >= 12。0。0
透過下面命令快速建立一個支援 Vue3 + TS 的專案模板：
yarn
create
vite
my
-
vue
-
app
——
template
vue
-
ts
安裝 npm 包
透過 npm 或 yarn（推薦）包管理工具安裝以下軟體包，部分包指定了版本號，主要避免版本過高和其他包不相容，出現一些奇怪的問題。
yarn
add
eslint
@
7。2。0
eslint
-
plugin
-
vue
@
7。20。0
vue
-
eslint
-
parser
@
typescript
-
eslint
/
parser
@
typescript
-
eslint
/
eslint
-
plugin
eslint
-
config
-
airbnb
-
base
@
14。2。1
eslint
-
plugin
-
import
-
D
eslint@7。2。0
eslint-plugin-vue@7。20。0
vue-eslint-parser
@typescript-eslint/parser
@typescript-eslint/eslint-plugin
eslint-config-airbnb-base@14。2。1
eslint-plugin-import
新增 .eslintrc.js 配置檔案
ESLint 支援好幾種格式的配置檔案，本篇文章中使用
。eslintrc。js
檔案格式 。
在專案的根目錄下建立
。eslintrc。js
配置檔案，並新增下面配置項：
module
。
exports
=
{
root
：
true
，
globals
：
{
defineEmits
：
‘readonly’
，
defineProps
：
‘readonly’
，
}，
extends
：
［
‘plugin：@typescript-eslint/recommended’
，
‘plugin：vue/vue3-recommended’
，
‘airbnb-base’
，
］，
parserOptions
：
{
parser
：
‘@typescript-eslint/parser’
，
ecmaVersion
：
2020
，
}，
rules
：
rules
：
{
‘no-debugger’
：
process
。
env
。
NODE_ENV
===
‘production’
？
‘warn’
：
‘off’
，
// 禁用 debugger
‘no-console’
：
process
。
env
。
NODE_ENV
===
‘production’
？
‘warn’
：
‘off’
，
// 禁用 console
‘no-bitwise’
：
‘off’
，
// 禁用按位運算子
‘no-tabs’
：
‘off’
，
// 禁用 tab
‘array-element-newline’
：
［
‘error’
，
‘consistent’
］，
// 強制陣列元素間出現換行
indent
：
［
‘error’
，
2
，
{
MemberExpression
：
0
，
SwitchCase
：
1
，
ignoredNodes
：
［
‘TemplateLiteral’
］
}，
］，
// 強制使用一致的縮排
quotes
：
［
‘error’
，
‘single’
］，
// 強制使用一致的反勾號、雙引號或單引號
‘comma-dangle’
：
［
‘error’
，
‘always-multiline’
］，
// 要求或禁止末尾逗號
‘object-curly-spacing’
：
［
‘error’
，
‘always’
］，
// 強制在大括號中使用一致的空格
‘max-len’
：
［
‘error’
，
120
］，
// 強制一行的最大長度
‘no-new’
：
‘off’
，
// 禁止使用 new 以避免產生副作用
‘linebreak-style’
：
‘off’
，
// 強制使用一致的換行風格
‘import/extensions’
：
‘off’
，
// 確保在匯入路徑中統一使用副檔名
‘eol-last’
：
‘off’
，
// 要求或禁止檔案末尾存在空行
‘no-shadow’
：
‘off’
，
// 禁止變數宣告與外層作用域的變數同名
‘no-unused-vars’
：
‘warn’
，
// 禁止出現未使用過的變數
‘import/no-cycle’
：
‘off’
，
// 禁止一個模組匯入一個有依賴路徑的模組回到自己身上
‘arrow-parens’
：
‘off’
，
// 要求箭頭函式的引數使用圓括號
semi
：
［
‘error’
，
‘never’
］，
// 要求或禁止使用分號代替 ASI
eqeqeq
：
‘off’
，
// 要求使用 === 和 ！==
‘no-param-reassign’
：
‘off’
，
// 禁止對 function 的引數進行重新賦值
‘import/prefer-default-export’
：
‘off’
，
// 如果模組只輸入一個名字，則傾向於預設輸出
‘no-use-before-define’
：
‘off’
，
// 禁止在變數定義之前使用它們，則傾向於預設輸出
‘no-continue’
：
‘off’
，
// 禁用 continue 語句
‘prefer-destructuring’
：
‘off’
，
// 優先使用陣列和物件解構
‘no-plusplus’
：
‘off’
，
// 禁用一元運算子 ++ 和 ——
‘prefer-const’
：
‘warn’
，
// 要求使用 const 宣告那些聲明後不再被修改的變數
‘global-require’
：
‘off’
，
// 要求 require（） 出現在頂層模組作用域中
‘no-prototype-builtins’
：
‘off’
，
// 禁止直接呼叫 Object。prototypes 的內建屬性
‘consistent-return’
：
‘off’
，
// 要求 return 語句要麼總是指定返回的值，要麼不指定
‘one-var-declaration-per-line’
：
‘off’
，
// 要求或禁止在變數宣告周圍換行
‘one-var’
：
‘off’
，
// 強制函式中的變數要麼一起宣告要麼分開宣告
‘import/named’
：
‘off’
，
// 確保命名匯入與遠端檔案中的命名匯出相對應
‘object-curly-newline’
：
‘off’
，
// 強制大括號內換行符的一致性
‘default-case’
：
‘off’
，
// 要求 switch 語句中有 default 分支
‘no-trailing-spaces’
：
‘off’
，
// 禁用行尾空格
‘func-names’
：
‘off’
，
// 要求或禁止使用命名的 function 表示式
radix
：
‘off’
，
// 強制在 parseInt（） 使用基數引數
‘no-unused-expressions’
：
‘off’
，
// 禁止出現未使用過的表示式
‘no-underscore-dangle’
：
‘off’
，
// 禁止識別符號中有懸空下劃線
‘no-nested-ternary’
：
‘off’
，
// 禁用巢狀的三元表示式
‘no-restricted-syntax’
：
‘off’
，
// 禁用特定的語法
‘no-await-in-loop’
：
‘off’
，
// 禁止在迴圈中出現 await
‘import/no-extraneous-dependencies’
：
‘off’
，
// 禁止使用外部包
‘import/no-unresolved’
：
‘off’
，
// 確保匯入指向一個可以解析的檔案/模組
‘template-curly-spacing’
：
［
‘error’
，
‘always’
］，
// 要求或禁止模板字串中的嵌入表示式周圍空格的使用
‘@typescript-eslint/no-var-requires’
：
‘off’
，
// 除import語句外，禁止使用require語句
‘@typescript-eslint/no-empty-function’
：
‘off’
，
// 不允許空函式
‘@typescript-eslint/no-explicit-any’
：
‘off’
，
// 禁止使用 any 型別
‘guard-for-in’
：
‘off’
，
// 要求 for-in 迴圈中有一個 if 語句
‘class-methods-use-this’
：
‘off’
，
// 強制類方法使用 this
‘vue/html-indent’
：
［
‘error’
，
2
］，
// 在中強制一致縮排
‘vue/html-self-closing’
：
‘off’
，
// 執行自閉合的風格
‘vue/max-attributes-per-line’
：
［
// 強制每行屬性的最大數量
‘warn’
，
{
singleline
：
{
max
：
3
，
allowFirstLine
：
true
，
}，
multiline
：
{
max
：
1
，
allowFirstLine
：
false
，
}，
}，
］，
‘vue/singleline-html-element-content-newline’
：
‘off’
，
// 要求單行元素的內容前後有一個換行符
}
}
我不會介紹 ESLint 中的規則是如何工作的，因為這稍微超出了本文的範圍。如果你對如何配置規則感興趣，你可以檢視 ESLint 文件。
可以使用外掛中支援的規則覆蓋 ESLint 配置中 rules 的規則：
ESLint 規則［1］
eslint-plugin-vue［2］
eslint-plugin-import［3］
@typescript-eslint/eslint-plugin［4］
配置 VSCode
安裝擴充套件
在 VSCode 編輯器中安裝 ESLint 和 Vetur 擴充套件外掛。
新增編輯器配置
shift
+
command
+
p
組合鍵開啟命令面板，輸入
settings
回車開啟配置檔案。
在 settings。json 檔案中追加下面的配置項：
{
//
其他選項。。。
“eslint。validate”
：
［
“javascript”
，
“javascriptreact”
，
“vue”
，
“typescript”
］，
“eslint。format。enable”
：
true
，
“eslint。alwaysShowStatus”
：
true
，
“editor。codeActionsOnSave”
：
{
“source。fixAll”
：
true
，
“eslint。autoFixOnSave”
：
true
，
}
}
儲存後重啟 VSCode 編輯器，基本上配置完成了。
開啟
main。ts
檔案，給其中一行程式碼加上
；
逗號。
因為 ESLint rules 中配置了
不允許末尾逗號
的規則，所以編輯器中將不符合規範的程式碼標記為紅色。
直接
control
+
s
鍵儲存，VSCode 會自動修復程式碼 ESLint 檢測出的錯誤，幫助我們去除了
；
逗號。
總結
再遇到類似的 Vue3 + TS 專案時，可以查閱和參考這篇文章，快速為專案加入 ESLint 程式碼檢查。
也可以把自己的 ESLint 配置抽離為一份可共享的配置，方便你的其他專案透過 ESLint 的 extends 鍵擴充套件可共享的配置。
參考資料
［1］ ESLint 規則：
https：//
cn。eslint。org/docs/rule
s/
［2］ eslint-plugin-vue：
https：//
eslint。vuejs。org/rules/
singleline-html-element-content-newline。html
［3］ eslint-plugin-import：
https：//
github。com/import-js/es
lint-plugin-import
［4］ @typescript-eslint/eslint-plugin：
https：//www。
npmjs。com/package/@type
script-eslint/eslint-plugin
［5］
https：//
chinese。freecodecamp。org
/news/vscode-vite-vue3-ts-eslint-stylelint-automatic-code-formatting/
