如何给项目配置prettier

1 安装

yarn add --dev --exact prettier

2 配置文件

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

.prettierignore

# Ignore artifacts:
build
coverage

3 执行一次

一般用于第一次“清理”

yarn prettier . --write

4 文件变更时自动格式化

这个方案和下面的5、6任选一种就行

“文件变更时自动格式化”这个方案,主要用于编辑器不支持 或者 你懒得配置时,每次都要执行,

npx onchange "**/*" -- npx prettier --write --ignore-unknown {{changed}}

5 编辑器保存时自动格式化(推荐方案)

比上面3初始配置麻烦,但是好用

安装插件:prettier-vscode

配置文件(vscode):

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true

或者分不同文件配置

"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
},
"[typescript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
},
"[css]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
},
"[markdown]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
},
"[json]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
},
"[html]": { 
  "editor.defaultFormatter": "esbenp.prettier-vscode", 
  "editor.formatOnSave": true 
}

6 git提交commit时检查

参考官方文档吧

https://prettier.io/docs/en/install#git-hooks

但是有个坑,对于.git和代码不在同一个目录,弄起来很麻烦

Leave a Reply

Your email address will not be published. Required fields are marked *