create-react-app整合prettier，实现代码自动格式化

介绍

最近在学习react，通过create-react-app创建项目，发现项目中只整合了eslint，并没有整合prettier，通过一顿摸索及查阅资料，整合成功。特记录下来过程，以备不时之需。

前提条件

• 编辑器vscode，并且已经安装好eslint和prettier插件
• 使用creat-react-app创建项目

过程

安装prettier

yarn add eslint-plugin-prettie -dev
yarn add eslint-config-prettier -dev
yarn add prettier -dev

创建.eslintrc.js 配置如下

module.exports={
  "extends": ["react-app"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
} 

创建.prettierrc文件，配置如下

{
  "singleQuote": false,
  "semi": true
}

这里我只配置了两个队则，使用单引号，结尾加分号，其他规则自行查阅相关资料

提交时校验

安装插件

yarn add lint-staged husky -dev

配置

//package.json增加配置
{
	"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged":{
	"src/*.{js,jsx,mjs,ts,tsx}": [
      "node_modules/.bin/prettier --write",
      "node_modules/.bin/eslint --fix",
      "git add"
    ],
    "src/*.{css,scss,less,json,html,md,markdown}": [
      "node_modules/.bin/prettier --write",
      "git add"
    ]
}
}

vscode保存自动格式化

配置setting.json如下

{
"editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}