feat: update article

src/pages/blog/vite-vue-ts-eslint-setup.md

@@ -11,8 +11,9 @@ original: https://hackmd.io/@xq/vite-vue-ts-eslint-setup
 
 > 以下使用 pnpm 作為套件管理工具，與 npm 或 yarn 的指令會有些許差異，請查看隨附的官方文件
 
-完整配置範例：https://github.com/ngseke/vite-vue-ts-eslint-example
+## TL;DR
 
+完整配置範例：https://github.com/ngseke/vite-vue-ts-eslint-example
 
 ## 🏗️ 透過 Vite 官方的 Preset 新建專案
 
@@ -37,7 +38,7 @@ pnpm i
 pnpm create @eslint/config
 ```
 
-依序回答以下問題：
+依序回答以下問題後，便會在根目錄新建 `.eslintrc.cjs`：
 
 > ✔ How would you like to use ESLint? · **style**
 > ✔ What type of modules does your project use? · **esm**
@@ -50,8 +51,6 @@ pnpm create @eslint/config
 > ✔ Would you like to install them now? · No / **Yes**
 > ✔ Which package manager do you want to use? · **pnpm**
 
-此時根目錄下便會新建 `.eslintrc.cjs`
-
 ## 😵 處理 VSCode Output 的 ESLint 的問題
 
 雖然 ESLint 已初始化完成，但你會發現它尚未正常運作。例如試著在任意 `.ts` 或 `.vue` 檔隨便加多餘的空格，卻看不到預期的 error 或 warning 的波浪底線。
@@ -262,7 +261,7 @@ pnpm run lint
 
 ### 用指令自動修復錯誤
 
-打開 `package.json`，在 `scripts` 中加入以下指令 `lint-fix`：
+打開 `package.json`，在 `scripts` 中加入以下指令 `lint:fix`：
 
 ```diff
 // package.json
@@ -273,15 +272,15 @@ pnpm run lint
     "build": "vue-tsc && vite build",
     "preview": "vite preview",
     "lint": "npx eslint . --ext .ts,.js,.cjs,.vue",
-+   "lint-fix": "npx eslint --fix . --ext .ts,.js,.cjs,.vue"
++   "lint:fix": "npx eslint --fix . --ext .ts,.js,.cjs,.vue"
   },
 }
 ```
 
 接著在 terminal 測試執行效果
 
 ```shell
-pnpm run lint-fix
+pnpm run lint:fix
 ```
 
 順利的話「**可自動修正**（automatically fixable）」的那些規則都會被自動修正，也就是在 [Rule 列表](https://eslint.org/docs/latest/rules/)有 🔧 符號的那些項目。