初始化项目
npx create-react-app myApp --template typescript安装 prettier
yarn add prettier --dev --exact prettier切换为 18 或以上版本的 node
nvm use 18
在tsconfig.json中的compilerOptions加上
"baseUrl": "./src"初始化 git
git init安装 lint-staged
npx mrm lint-staged安装prettier与eslint兼容插件
旧版本需要在package.json中的eslintConfig字段的extends数组中加上prettier
yarn add eslint-config-prettier -D
yarn add eslint-plugin-prettier -D创建 eslint 配置文件
echo '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", "prettier", "react-hooks"],
rules: {},
};' > .eslintrc.js
安装commitlint，使得commit的message必须符合标准格式
yarn add @commitlint/{config-conventional,cli} -D符合commitlint的格式包括
build、
chore、
ci、
docs、
feat、
fix、
perf、
refactor、
revert、
style、
test
创建commitlint配置文件
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js安装husky
yarn add husky@^8 -D为husky添加钩子
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'在 package.json 加入对ts、tsx格式化的支持
"lint-staged": {
"*.{js,css,md,ts,tsx}": "prettier --write"
}添加配置文件.prettierrc.js
echo "module.exports = {
tabWidth:4
}" > .prettierrc.js安装craco
yarn add -D @craco/craco创建配置文件craco.config.js
echo 'module.exports = {
devServer: {
proxy: {
"/api": {
target: "http://localhost:3000",
changeOrigin: true,
},
},
},
};' > craco.config.js将package.json中的react-scripts替换成craco
"scripts": {
- "start": "react-scripts start"
+ "start": "craco start"
- "build": "react-scripts build"
+ "build": "craco build"
- "test": "react-scripts test"
+ "test": "craco test"
}安装react-router-dom、axios、antd、sass
yarn add react-router-dom
yarn add axios
yarn add antd
yarn add sassssh blb
rm -rf /usr/share/nginx/html/lianlianbushe.comscp -r ./dist blb:/usr/share/nginx/html/lianlianbushe.comssh blb
scp ./nginx.conf blb:/etc/nginx/nginx.conf
systemctl restart nginx