react项目中接入（集成）prettier

目的

让我们的代码不管经过多少人的改动，始终都会保持同样的编写格式，保证多人开发时，大家使用的按键格式都是一样的 prettier官网

安装

固定版本安装 --save-exact 记录该软件包的精确版本号(官方推荐的安装方式)

npm i -D --save-exact prettier

使用

1. 新增配置文件，可以通过以下脚本，或者直接手动创建即可，如果团队还没有指定使用什么格式，那就都按照默认的配置，有特殊的格式要求，再针对配置即可

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

2. 新增忽略文件，可以通过以下脚本，或者直接手动创建即可

node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"

默认会按照.gitignore文件过滤，当我们加入了.prettierignore文件，也会过滤，两个是同时配置规则

3. 如果项目中有eslint，需要配合eslint使用，使用eslint-config-prettier

eslint最新9.x版本，扁平化配置，eslint.config.(js|mjs|cjs)，添加以下配置

import eslintConfigPrettier from "eslint-config-prettier";

export default {
	...
	eslintConfigPrettier,
	...
}

eslint使用老配置的.eslintrc的, 添加以下配置

{
  "extends": [
  	...
    "prettier",
    ...
  ]
}

4. 接入pre-commit, 确保我们提交的代码都是满足格式要求的（后续专门出一节pre-commit的使用配置）

命令行配置

package.json

"scripts": {
    "format:check": "prettier --check \"./**/*.{js,ts,tsx,json}\"",
    "format:fix": "prettier --write \"./**/*.{js,ts,tsx,json}\""
  },

# prettier的检测和修复
npm run format:check
npm run format:fix

集成我们的vscode编辑器

安装vscode插件：Prettier - Code formatter.

配置我们的插件，最好配置工作区(经验之谈), 配置如下

.vscode/settings.json 根目录的这个地方，没有创建就可以了

{

  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": true
  }
}

配置以后，我们保存的时候，就会按照我们设置的格式进行格式化了。

我的.prettierrc文件配置

{
    // 单个参数不用括号包裹， 这个注释，你们用的时候删除，json文件不能注释哦
    "arrowParens": "avoid"
}

之前默认配置如下图左边，经过fix之后是下图右边

写在最后

以上这些，应该是够大家正常工作使用了，如果有帮助到大家，记得给博主点个赞，你们的支持是我更文的最大动力（没有之一）！