笔记, TypeScript 配置 Prettier

3

目标:

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

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


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

苏茂林 · 2017年10月26日

求问怎么设置?换行是用LF 还是CRLF?

回复

0

没看懂?

题叶 作者 · 2017年10月27日
1

是window下默认换行用 CRLF,我编辑器里设置了换行LF,用了prettier 后又转成了CRLF;现在解决了,是git 提交时候自动 autoCrlf 了

苏茂林 · 2017年10月27日
载入中...