基于react create app typescript的完整脚手架配置最佳实践

1. 创建一个React项目并安装所需的依赖项：

npx create-react-app my-app --template typescript
cd my-app

2. 安装一些常用的开发依赖项：

npm install --save-dev prettier eslint eslint-config-prettier eslint-plugin-prettier husky lint-staged

3. 创建.prettierrc文件来配置Prettier：

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

4. 创建.eslintrc.json文件来配置ESLint：

{
  "extends": [
    "react-app",
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

5. 增加husky、lint-staged、commitlint配置：

# 安装husky(自动安装)
npx husky-init

# 安装husky(手动安装)
npm install husky --save-dev
npx husky install
npm pkg set scripts.prepare="husky install"

# 安装commitlint-cli，config-conventional可以自定义配置
npm install --save-dev @commitlint/{cli,config-conventional} 

# 对于Windows: 
npm install --save-dev @commitlint/config-conventional @commitlint/cli

# 添加commit-msg hook
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'

在package.json中增加lint-staged配置：

"lint-staged": {
    "*.{ts,tsx}": [
      "prettier --write",
      "eslint --fix"
    ]
}

增加husky pre-commit hook

npx husky add .husky/pre-commit "npx lint-staged"

6. 在项目的根目录创建.env文件，并添加以下内容：

GENERATE_SOURCEMAP=false

这将防止React在生产构建中生成source map文件，以减少构建文件的大小。

7. 其他配置：

eslint fix还可以添加import sort插件来保持import的module的顺序一致，比如:

{
  "plugins": ["simple-import-sort"]
}

或者配置stylelint来使样式保持一致