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

程式碼最重要的就是整整齊齊
當然，我希望他可以自動自發
──────────────── By Opshell

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

ESLint裝完之後，
再來就是Prettier了，
這兩個也是很會打架，
壞掉絕對有這傢伙的鍋。

過程：新裝備給他加載上去

• Prettier安裝：

  prettier裝起來：

   yarn add prettier -D
  

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

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

• Prettier設定：

  在根目錄下新增檔案.prettierrc
  對，不用副檔名，檔案內容我們用json格式：

   {
     "printWidth": 100,
     "tabWidth": 4,
     "useTabs": false,
     "semi": true,
     "singleQuote": true,
     "quoteProps": "as-needed",
     "jsxSingleQuote": false,
     "trailingComma": "all",
     "bracketSpacing": true,
     "bracketSameLine": false,
     "arrowParens": "always",
     "requirePragma": false,
     "insertPragma": false,
     "proseWrap": "preserve",
     "htmlWhitespaceSensitivity": "css",
     "vueIndentScriptAndStyle": true,
     "endOfLine": "lf"
   }
  

  當然，可以改成你習慣的格式。

• 設定.eslintrc.cjs：

  設定一下繼承順序：

   module.exports = {
     // ...以上省略
     extends: [
       'eslint:recommended',
       'plugin:vue/vue3-essential',
       'plugin:@typescript-eslint/recommended',
       'plugin:prettier/recommended',
       'prettier',
     ],
     // ...以下省略
   }
  

• 設定package.json 格式化指令：

  打開package.json，在script區設定：

   "scripts": {
     "format": "prettier --ignore-path .gitignore --write \"**/*.+(html|vue|ts|js|json|cjs)\""
   },
  

  這樣只要在終端輸入指令：

   yarn run format
  

  就會調整你文件的格式，看起來舒服多了。

• 設定 VS Code setting：

  相信大家都會打開setting.json這個檔案，
  打開之後，補上設定：

   "editor.formatOnSave": true, //存檔時自動格式化
   "editor.defaultFormatter": "rvest.vs-code-prettier-eslint", // 解析規則
   "editor.formatOnSaveMode": "file", // 格式化範圍
  

  這樣子只要你按ctrl + S就可以自動格式化該檔案，
  在不用一直執行指令了。
  但是指令還是有用的，當你拉一大堆檔案進來，
  直接執行指令可以一次刷一排，舒服。

※ 補充：

Day 31 和 Day 32 的 ESLint和Prettier的忽略文件沒啥改，
直接參考[Day23]：Vite 環境最麻煩了 part 2即可。

小結：

一直都沒辦法好好用Prettierr，
經過這一攤之後，終於可以正常的用，
會按照我想要的方式格式化真是太好了，
再來要再補很多有的沒的設定，
明天繼續...