[Day23]：Vite 環境最麻煩了 part 2

Vite 環境最麻煩了

開始用Vite之後，是個會自立自強的大人了呢!!────────────────────── By Opshell

---

目標：

開始設定一些環境，框架行為、檢查等。

---

過程：

• 程式碼風格、檢查設定

  為了美觀、統一風格，我們一定是會安裝Prettier、ESLint， 等風格化套件，但由於是TypeScript，會有億點點不一樣：

  1. 安装 prettier

   yarn add -D -E prettier

  在webadminvite目錄下新增prettier.config.js然後設定他：

   // prettier.config.js
   module.exports = {
     printWidth: 200, // 一行最多200字元
     tabWidth: 4, // Tab = 4個空白
     useTabs: false, // 不使用 Tab 縮排，使用空格
     semi: true, // 行尾需要有分號
     singleQuote: true, // 使用單引號代替雙引號
     quoteProps: 'as-needed', // Object 的 key 僅在必要时用引號
     jsxSingleQuote: false, // jsx 不使用單引號，而使用雙引號
     trailingComma: 'all',  // 末尾使用逗號
     bracketSpacing: true, // 大括號內 首尾需要空白 { title: 'Opshell' }
     jsxBracketSameLine: false, // jsx Tag的尾端括號换行
     bracketSameLine: false,
     arrowParens: 'always', // 箭頭函數，只有一个參數的时候，也需要括號
     rangeStart: 0, // 每个文件格式化的範圍是文件的全部内容
     rangeEnd: Infinity,
     requirePragma: false, // 不需要寫文件開頭的 @prettier
     insertPragma: false, // 不需要自動在文件開頭插入 @prettier
     proseWrap: 'preserve', // 預設斷行
     htmlWhitespaceSensitivity: 'css', // 根據 CSS 設定決定 html 要不要斷行
     endOfLine: 'lf' // 換行符號使用lf
   }

  在webadminvite目錄下新增.prettierignore並設定他：

   node_modules
   dist
   public

  2. 安裝ESLint

  因為ESLint看不懂TypeScript，所以我们要安裝對應的@typescript-eslint/parser来擴充解析器； 再安裝@typescript-eslint/eslint-plugin、eslint-plugin-vue 來新增.ts等文件對應的語法。 再配合prettier安裝eslint-config-prettier、eslint-plugin-prettier 來應用prettier的設定。

   yarn add eslint -D
   yarn add eslint-plugin-vue -D
   yarn add @typescript-eslint/parser -D
   yarn add @typescript-eslint/eslint-plugin -D
   yarn add eslint-config-prettier -D
   yarn add eslint-plugin-prettier -D

  當然你也可以 縮成一行指令，這邊只是方便看。 在webadminvite目錄下新增.eslintrc.js然後把下面的設定塞進去：

   module.exports = {
     // parser 解析依賴設定
     parser: 'vue-eslint-parser',
     parserOptions: {
        parser: '@typescript-eslint/parser', // 設定解析器
        ecmaVersion: 2020, // 設定ECMAScript版本
        sourceType: 'module', // 設定原始碼類型
        ecmaFeatures: {} // 其他語言擴展，包含jsx、全域嚴格模式等
     },
     // 繼承套件的規則設定
     extends: [
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:prettier/recommended',
        'prettier'
     ],
     // 自訂規則
     rules: {}
   }

  然後新增忽略文件.eslintignore：

   node_modules/
   public/
   es/
   lib/
   dist/
   docs/
   src/assets/
   package.json

  這樣子風格檢查環境就做好了。

---

• AutoLoad(自動載入)

  在使用Vue 3的compostion(組合式) API的时候， 稍微大點的專案，通常會用很多import， Anthony Fu(antfu)(Vue 與 vite 的主要貢獻者之一)大大， 根據unplugin做了幾個自動import的套件， 我們使用unplugin-auto-import和unplugin-vue-components：

  1. unplugin-auto-import(自動載入套件)

   yarn add unplugin-auto-import -D

  因為我們是用vite + ts，還使用了ESLint， 所以我们需要在vite.config.ts設定一些東西：

   import AutoImport from 'unplugin-auto-import/vite' // 引用
  
   export default defineConfig({
     plugins: [
        AutoImport({
           include: [
              /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
              /\.vue$/, /\.vue\?vue/, // .vue
              /\.md$/, // .md
           ],
           // global imports to register
           imports: [ // presets
              'vue',
              'vue-router',
              'vuex',
              {// custom
                 '@vueuse/core': [
                    // named imports
                    'useMouse', // import { useMouse } from '@vueuse/core',
                    // alias
                    ['useFetch', 'useMyFetch'],
                 ],
                 'axios': [
                    // default imports
                    ['default', 'axios'],
                 ],
              },
           ],
           dirs: [],
           dts: 'src/types/auto-imports.d.ts', // typescript 宣告檔案位置
           vueTemplate: false,
           eslintrc: {
              enabled: false, // Default `false`
              filepath: './.eslintrc-auto-import.json',
              globalsPropValue: true,
           },
        }), // 設定
     ],
   })

  更多設定可以看這邊，可以直接複製範例。 然後把dts的值改成：'src/types/auto-imports.d.ts'。 然後需要修改.eslintrc.js，增加unplugin-auto-import生成的規則文件。

   module.exports = {
     extends: [
        './.eslintrc-auto-import.json', // `unplugin-auto-import` 生成的規則設定
        // ...
     ]
   }

  然後用eslintrc.enabled的值改為true， 可以讓她生成eslintrc-auto-import.json， 生成後改為false除非有改動再重新生，不關掉的話每次都會重新生， 有時候會導致eslint抓不到文件。

  2. 自動引用組件

  這個套件自動按照需求import(載入)組件， 還可以自訂Resolver(解析)来設定import(載入)規則。 並預設了 Ant Design Vue、Element Plus、Naive UI、VueUse Components等 18個常用套件的Resolver(解析)方法。 ※ 不支援Jsx和Tsx語法：

   yarn add unplugin-vue-components -D

  在vite.config.ts裡新增下面的設定：

   import Components from 'unplugin-vue-components/vite'
   import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
  
   export default defineConfig({
     plugins: [
        Components({
           dirs: [ 'src/components' ], // 指定components位置 預設是'src/components'
           dts: 'src/types/components.d.ts', // .d.ts生成位置
           resolvers: [ NaiveUiResolver() ] // 解析規則
        })
     ]
   })

  然後在webadminvite目錄裡新增types資料夾，用來放之後的宣告檔案。

---

• 執行看看

   yarn run dev

  沒問題的話，依然會看到這個：

  

---

小結

今天環境裝太多了設定太多了， 要吐了，先這樣... 我不行了。