Vite環境最...咦!壞掉了...

環境什麼的
果然還是最麻煩了! 哭阿!
──────────────── By Opshell

目標：成功完成一個能用的環境

在完賽後，環境也不堪改造，神機錯亂了，
沒錯，他開始不分敵我到處亂紅，
找不到問題就算了，還傷眼...
身為一個工程師，看到滿畫面的紅線能忍= =?
更何況，因為Error Len的關係，
他還會有一堆紅字...

過程：從新改造

• RE 再來一場：

  從裝個新的vite出來用：

   yarn create vite webadminvite --template vue-js
   cd webadminvite
  

• 安裝VS Code 外掛

  為了徹底釐清問題
  Ops幾乎把全部的外掛都拆了，
  把要用的裝起來就好，盡量乾淨QAQ：

  1. ESLint
  2. Prettier ESLint
  3. Vue Language Features (Volar)
  4. TypeScript Vue Plugin (Volar)
  5. Error Lens

• ESLint

  我嚴重懷疑就是這個部分沒弄好，
  他才會超載，直接錯亂給我看...

• 1. 安裝 ESLint

   yarn add eslint -D
  

• 2. 產生 .eslintrc.cjs

  所以這次直接乖乖用eslint --init自己產生：

   yarn eslint --init
  

  1. How would you like to use ESLint?
     • 選擇：To check syntax and find problems
  2. What type of modules does your project use?
     • 選擇：JavaScript modules (import/export)
  3. Which framework does your project use?
     • 選擇：Vue.js
  4. Does your project use TypeScript?
     • 選擇：Yes
  5. Where does your code run?
     • 選擇：Browser
  6. What format do you want your config file to be in?
     • 選擇：JavaScript
  7. Would you like to install them now?
     • 選擇：Yes
  8. Which package manager do you want to use?
     • 選擇：yarn

• 3. .eslintrc.cjs 修正

  等他裝完之後，會生出.eslintrc.cjs這個檔案在根目錄，
  你打開他，會發現第一行就報錯給你看= =：
  這時候你需要在下面的env加上node: true讓eslint認識他
  因為module.exports是要透過node處理的：

   // .eslintrc.cjs
   module.exports = {
     env: {
        browser: true,
        es2021: true,
        node: true,
     },
     // ... 省略一堆
   }
  

• 4. 新增指令

  ESLint 裝完之後，想檢查就檢查：
  在根目錄下package.json裡新增指令：

   // package.json
   "scripts": {
     // ...上面省略
     "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"
   },
   // ...下面省略
  

  新增完可以直接執行看看，在終端輸入：

   yarn run lint
  

  然後就報錯了，主要問題：vue/vue3-essential

  1. eslint看不懂 *.vue 文件，解析噴錯了，

  需要而外裝解析器，但是可以看到.eslintrc.cjs裡，
  已經有extends``plugin:vue/vue3-essential了，
  但是parser設定的是@typescript-eslint/parser，
  且照.eslintrc.cjs的extends順序可以知道，
  會報錯的原因就是@typescript-eslint/parser蓋掉了vue-eslint-parser，
  所以我們要稍微調整解析器一下：

   // .eslintrc.cjs
   module.exports = {
     parser: 'vue-eslint-parser',
     parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        parser: '@typescript-eslint/parser',
     },
   }
  

  2. "{} 不能當作一個類型"：

  在 .eslintrc.cjs 裡關掉這個錯誤提醒，
  畢竟是不可能避開{}的使用的：

   // .eslintrc.cjs
   module.exports = {
     // ...以上省略
     rules: {
       '@typescript-eslint/ban-types': [
           // 關閉錯誤(error)：不要以 {} 當作一個類型
           'error',
           {
               extendDefaults: true,
               types: {
                   '{}': false,
               },
           }
        ],
     }
   }
  

  3. 這是一個警告，警告你用了any，因為想盡量避免any，

  所以Ops會留著這個警告，如果你想關掉，你可以在上面的rules在加一條：

   // .eslintrc.cjs
   module.exports = {
     // ...以上省略
     rules: {
       '@typescript-eslint/ban-types': [
           // 關閉錯誤(error)：不要以 {} 當作一個類型
           'error',
           {
               extendDefaults: true,
               types: {
                   '{}': false,
               },
           }
        ],
        "@typescript-eslint/no-explicit-any": ["off"], // 關閉警告(warning)：不允許使用 any
     }
   }
  

• 再次執行

  再度執行看看：

   yarn run lint
  

  沒意外的話，看起來乖多了。

  

小結：

前前後後重裝了超多次，
絕對要筆記起來，
不然之後又來，Ops絕對吐血三升...
今天這樣只是剛開始，
明天繼續...