基于create-react-app的团队代码规范化

1. 创建项目

首先安装vscode插件prettier, stylelint, eslint, EditorConfig for VS Code

1.1 使用create-react-app创建项目

npx create-react-app demo --template typescript

1.2 添加eslint

yarn add eslint --dev
yarn run eslint --init

1.3 添加prettier格式化代码

yarn add prettier --dev --exact

echo {}> .prettierrc.json

创建.prettierignore 
# Ignore artifacts:
build
coverage

手动修复

npx prettier --write .

安装vscode插件
Prettier - Code formatter.
vscode-status-bar-format-toggle(状态点击开关prettier自动格式化,打开状态保存会自动格式化代码)

1.4 整合eslint和prettier

yarn add --dev eslint-plugin-prettier // 用eslint调用prettier检查

yarn add --dev eslint-config-prettier
// 关闭eslint和prettier冲突的规则

修改eslint的配置

 "extends": [
      "react-app",
      "react-app/jest",
      "prettier"
    ],
    "rules": {
      "prettier/prettier": "error"
    },
    "plugins": [
      "prettier"
    ],

添加husky和lint-staged以在git commit之前进行prettier格式化

npm install husky lint-staged --save-dev
在package.json scripts中添加
"postinstall": "husky install"
再执行npm install，husky会自动安装(手动安装的话用npx husky install)
添加precommit钩子
npx husky add .husky/pre-commit "yarn lint-staged"

再进行git commit操作时候就会执行package.json中的lint-staged逻辑了

 "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ]
  }

1.5 添加stylelint进行css代码格式控制

npm install --save-dev stylelint stylelint-config-standard

创建
.stylelintrc.json

{
  "extends": "stylelint-config-standard"
}

手动修复

npx stylelint "**/*.css"

将stylelint处理添加的lint-staged配置中

 "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "eslint --fix"
    ],
    "src/**/*.{css,less,scss}": [
      "stylelint --fix"
    ],
    "src/**/*.{json,md}": [
      "prettier --write"
    ]
  }

1.6 vscode自动格式化代码配置

.vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
    "source.fixAll.stylelint": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "stylelint.enable": true,
  "prettier.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

1.7 添加commitlint规范提交信息

安装依赖

npm install --save-dev @commitlint/config-conventional @commitlint/cli

新建commitlint.config.js

module.exports = {
  extends: ['@commitlint/config-conventional'],
}

添加husky commit-msg钩子以在git commit时候调用commitlint

npx husky add .husky/commit-msg "yarn commitlint -e $HUSKY_GIT_PARAMS"

再执行git commit时候就会限制必须安装下面的格式填入提交信息了

<type>: <subject>

subject是 commit 目的的简短描述，可以做一些配置，如最大长度限制。
常用type类别

* upd：更新某功能（不是 feat, 不是 fix）
* feat：新功能（feature）
* fix：修补bug
* docs：文档（documentation）
* style： 格式（不影响代码运行的变动）
* refactor：重构（即不是新增功能，也不是修改bug的代码变动）
* test：增加测试
* chore：构建过程或辅助工具的变动

1.8 添加standard-version自动生成changelog

npm i --save-dev standard-version

在package.json中添加脚本

"release": "standard-version",

执行npm run release就可以生成changelog.md了