筆記, TypeScript 配置 Prettier

目標:

• 文件保存時執行一次格式化
• 遷移已有代碼的格式
• 代碼提交前進行一次格式化

首先確認了 Prettier 對 TypeScript 有良好的支持.

https://github.com/prettier/p...

保存時格式化

固然這個依賴 VS Code 的插件, https://github.com/prettier/p...
在 VS Code 中安裝以後, 經過 .prettierrc 文件配置, 臨時的配置好比(雖然我不喜歡 Tab 但公司用啊):

{
  "tabWidth": 4,
  "useTabs": true
}

配置文件也能夠是下面幾種:

• package.json - prettier key
• .prettierrc
• .prettier.config.js

不過這樣還不夠, 須要在 VS Code 打開 editor.formatOnSave 選項.
這個選項在 User Settings 當中能夠找到, 把值設置爲 true.

關閉 JSON 文件

默認狀況下, Prettier 會將 JSON 文件也作格式化,
找到的一個方案是在 User Settings 裏改爲這樣的設置:

{
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.formatOnPaste": false
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true,
    "editor.formatOnPaste": false
  },
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.formatOnPaste": false
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true,
    "editor.formatOnPaste": false
  }
}

參考 https://code.visualstudio.com...

其中 [typescriptreact] 對應的是 tsx 文件, 須要單獨聲明.

格式化已有文件

爲了方便遷移已有的代碼, 也就是直接用 prettier 命令行進行格式化, 好比:

prettier --write --config .prettierrc src/*.ts

precommit 格式化

大體上是經過 npm script 結合模塊來完成的,
參考 https://prettier.io/docs/en/u...