解放滿滿的import

正事還沒做就先Import一堆
不行吧?
─────────────────── By Opshell

目標：Auto起來

裝完ESLint、Prettier，
看起來沒啥問題，可以乖乖用，難道是因為，
unplugin-auto-import和unplugin-vue-components，在鬧?

過程：

• 路徑別名設定起來

  安裝 @type/node
  可以直接參考[Day22]：Vite 環境最...咦裝好了 part1
  唯一不同的地方是需要再tsconfig.json裡，
  compilerOptions增加配置：

   // tsconfig.json
   {
     "compilerOptions": {
        // ...以上省略
        "types": ["vite/client", "node"]
        // ...以下省略：
     }
   }
  

  詳請可以參閱Vite 官方中文文檔，
  這邊就不多做解釋了= 口=

   yarn add prettier -D
  

  然後為了配合ESLint，
  配合VS Code外掛Prettier ESLint的文件
  我們安裝這兩個：

   yarn add eslint-config-prettier -D
   yarn add eslint-plugin-prettier -D
  

• AutoLoad

  安裝 unplugin-auto-import和unplugin-vue-components
  的方式和 [Day23]：Vite 環境最麻煩了 part 2
  基本沒有區別，注意讓AutoImport的eslintrc:{enabled
  選項為true生成一下參照檔案，
  然後把參照檔案加入.eslintrc.cjs裡extends的最前面

   module.exports = {
     extends: [
       './.eslintrc-auto-import.json', // `unplugin-auto-import` 生成的規則設定
       'eslint:recommended',
       'plugin:vue/vue3-essential',
       'plugin:@typescript-eslint/recommended',
       'plugin:prettier/recommended',
       'prettier',
     ],
   }
  

小結：

往後就沒有甚麼特別的環境要裝了，
把檔案都處理好後，總算可以完全正常執行了，
雖然看起來好像沒做什麼，
但其實Ops反覆裝了5~6次，
爬了N篇文章+各種官方文件...
真的要筆記起來，
也希望能夠真的幫助到有問題的各位。

真‧完賽總結+心得：

這次是真的結束了，教學果然是最好的學習方式，
推薦還在觀望的各位，有機會也來參加鐵人賽，
大家晚安