1. 新建项目
npx create-react-app react-test --template typescript
2. 配置eslint、prettier、eslint-plugin-simple-import-sort
npm install -D eslint eslint-config-prettier eslint-plugin-prettier prettier eslint-plugin-simple-import-sort -D
2.1 项目根目录新建 .eslintrc.cjs文件
module.exports = {
root: true,
env: {
es6: true,
node: true,
browser: true
},
parserOptions: {
sourceType: "module",
ecmaFeatures: {
jsx: true,
},
},
extends: [
"react-app",
"react-app/jest",
"eslint:recommended",
"plugin:prettier/recommended"
],
plugins: [
"prettier",
"simple-import-sort"
],
rules: {
"simple-import-sort/imports": "error",
"simple-import-sort/exports": "error"
}
}
2.2 VsCode安装Prettier - Code formatter插件
2.3 VsCode配置保存格式化文件
3. 配置git hooks
npm i -D husky lint-staged @commitlint/config-conventional @commitlint/cli
3.1 安装husky
npx husky install
3.2 配置 pre-commit hooks检查缓存区内的文件
修改package.json
{
"lint-staged": {
"src/**/*.{tsx,ts,jsx,js}": [
"eslint . --ext .tsx,.ts,.jsx,.js --fix"
]
}
}
npx husky add .husky/pre-commit 'npx lint-staged'
3.3 配置 commit-msg hooks检查提交信息
项目根目录新建 commitlint.config.js文件
module.exports = {
extends: ["@commitlint/config-conventional"]
}
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit ${1}'
4. 配置craco
npm i -D @craco/craco @craco/craco
4.1 项目根目录新建 craco.config.ts 文件
import type { CracoConfig } from "@craco/types";
const cracoConfig: CracoConfig = {
devServer: {
open: false
}
}
export default cracoConfig;
4.2 修改 package.json
{
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test"
}
}
