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
 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/
 dist/
 docs/
 src/assets/
 package.json
這樣子風格檢查環境就做好了。
在使用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資料夾，用來放之後的宣告檔案。