React项目流程+配置规范工程：构建高质量代码基地

2023-12-10 09:03:22

使用 Create React App 创建规范化的 React TypeScript 项目

前言

构建一个清晰、无错误的 React 项目至关重要，它有助于维护、提高效率并增强开发者的信心。本文将指导您使用 Create React App 创建 React TypeScript 项目，并通过集成 ESLint、Prettier 和 Commitlint 来规范代码，从而提升代码质量。

利用 Create React App 创建 TypeScript 项目

1. 安装 Create React App

npm install -g create-react-app

2. 创建 TypeScript 项目

npx create-react-app projectName --template typescript

配置代码规范工程

1. 安装并配置 Prettier

a. 安装

yarn add --dev --exact prettier

b. 创建 .prettierrc 文件

{}

c. 编辑 .prettierrc 文件

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "jsxBracketSameLine": true,
  "arrowParens": "always",
  "endOfLine": "lf"
}

d. 安装集成工具

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

e. 编辑 .eslintrc.json 文件

{
  "extends": [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "prettier/@typescript-eslint"
  ],
  "plugins": [
    "react",
    "@typescript-eslint",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "trailingComma": "all",
        "semi": true,
        "printWidth": 80,
        "tabWidth": 2,
        "useTabs": false,
        "bracketSpacing": true,
        "jsxBracketSameLine": true,
        "arrowParens": "always",
        "endOfLine": "lf"
      }
    ]
  }
}

2. 安装并配置 ESLint

a. 安装

yarn add --dev --exact eslint

b. 创建 .eslintignore 文件

node_modules
build
coverage
dist
public

3. 安装并配置 Commitlint

a. 安装

yarn add --dev --exact @commitlint/config-conventional @commitlint/cli

b. 创建 .commitlintrc.json 文件

{
  "extends": ["@commitlint/config-conventional"]
}

c. 安装 Husky 并配置 package.json

yarn add --dev --exact husky

{
  "scripts": {
    "precommit": "husky run commitlint -E HUSKY_GIT_PARAMS"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}