用create-react-app脚手架创建react项目

创建项目

npx create-react-app name --template typescript

1、删掉src下多余的文件

2、可去掉index.tsx中的严格模式

root.render( // - <React.StrictMode> <App /> // - </React.StrictMode> );

3、配置别名（dilanx/craco需安装这个插件）
"react-scripts": "5.*"以上版本执行以下命令：

npm install @craco/craco@alpha -D

"react-scripts": "5.*"以下版本：

npm install @craco/craco -D

然后在项目根目录创建一个craco.config.js用于修改默认配置。

//craco.config.js module.exports = { plugins: [ { plugin: CracoLessPlugin, options: { lessLoaderOptions: { lessOptions: { modifyVars: { '@primary-color': '#1DA57A' }, javascriptEnabled: true, }, }, }, }, ], };

修改tsconfig.json文件

{ "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx" // + "baseUrl": ".", // + "paths": { // + "@/*": ["src/*"] // + } }, "include": ["src"] }

修改package.json

"scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject" },

代码规范相关配置

1.集成editorconfig配置
EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。

在根目录下创建.editorconfig文件

# .editorconfig # http://editorconfig.org root = true [*] # 表示所有文件适用 charset = utf-8 # 设置文件字符集为 utf-8 indent_style = space # 缩进风格（tab | space） indent_size = 2 # 缩进大小 end_of_line = lf # 控制换行类型(lf | cr | crlf) trim_trailing_whitespace = true # 去除行尾的任意空白字符 insert_final_newline = true # 始终在文件末尾插入一个新行 [*.md] # 表示仅 md 文件适用以下规则 max_line_length = off trim_trailing_whitespace = false

2. 使用prettier工具
安装prettier

npm install prettier -D

创建并配置.prettierrc文件

* useTabs：使用tab缩进还是空格缩进，选择false；

* tabWidth：tab是空格的情况下，是几个空格，选择2个；

* printWidth：当行字符的长度，推荐80，也有人喜欢100或者120；

* singleQuote：使用单引号还是双引号，选择true，使用单引号；

* trailingComma：在多行输入的尾逗号是否添加，设置为 `none`，比如对象类型的最后一个属性后面是否加一个，；

* semi：语句末尾是否要加分号，默认值true，选择false表示不加；

{ "useTabs": false, "tabWidth": 2, "printWidth": 80, "singleQuote": false, "trailingComma": "none", "semi": false }

3.创建.prettierignore忽略文件（指定哪些不见不要格式化）

/build/* .local .output.js /node_modules/** **/*.svg **/*.sh /public/*

在package.json中配置一个scripts：

"scripts": { + "prettier": "prettier --write ." },

运行npm run prettier