基于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了

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页