笔记, 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...