react 项目创建1-搭建框架

创建项目

根据官网介绍

npx create-react-app my-app
cd my-app
npm start

配置prettier

yarn add --dev --exact prettier
echo {}> .prettierrc.json

创建.prettierignore文件 用来配置黑名单

手动格式化代码

yarn prettier --write .

自动化prettier

将prettier添加进git 每次提交自动调用yarn prettier --write .

npx mrm lint-staged

package.json下添加修改

"lint-staged": {
    "*.{js,css,md,ts,tsx}": "prettier --write"
  }

由于prettier会与eslink有冲突
安装eslint-config-prettier

yarn add eslint-config-prettier -D

覆盖eslink的一些操作 以prettier为主
package.json下添加修改

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier"
    ]
  },

配置commitlint

yarn add @commitlint/config-conventional @commitlint/cli -D