笔记, TypeScript 配置 Prettier

2024年3月17日 304次阅读 来源: 题叶

目标:

  • 文件保存时执行一次格式化
  • 迁移已有代码的格式
  • 代码提交前进行一次格式化

首先确认了 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…

    原文作者：题叶
    原文地址: https://segmentfault.com/a/1190000011122443
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞