React

web	desc
usefull ahooks，react-user hooks
transtack
hooks
babel 转换 jsx
生命钩子函数
styled_components	类似vue的css模块化写法
react 动画 transition
redux
代替redux的RTK
react框架集成

安装

# vite
npm create vite@latest react-demo-vite --template react-ts

# create-react-app
npx create-react-app react-ts-demo --template typescript

eslint

# 安装eslint
npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

config

module.exports = {
	env: {
		browser: true,
		es6: true,
	},
	extends: [
		'eslint:recommended',
		'plugin:react/recommended',
		'plugin:@typescript-eslint/recommended',
		// 'plugin:prettier/recommended',
	],
	parser: '@typescript-eslint/parser',
	parserOptions: {
		ecmaVersion: 'latest',
		sourceType: 'module',
	},
	plugins: ['react', '@typescript-eslint'],
	rules: {},
}

prettier

npm install -D prettier eslint-config-prettier eslint-plugin-prettier

config

{
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "endOfLine": "auto",
  "jsxBracketSameLine": false,
  "printWidth": 100,
  "proseWrap": "preserve",
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "es5",
  "parser": "typescript"
}

husky

# 1. 安装 husky
npm install husky --save-dev

# 2. 初始化 husky
npx husky init

# 3. 修改 pre-commit 钩子
echo 'npm run lint' >> .husky/pre-commit

# 4. 确保钩子可执行
chmod +x .husky/pre-commit

commitlint

npm install -D @commitlint/cli @commitlint/config-conventional

echo "export default { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js

npx husky init

# pre-commit
npm run lint
npm run format
git add .

echo "npx --no -- commitlint --edit \$1" > .husky/commit-msg