新建项目
1
| create-react-app.cmd react18 --template typescript
|
配置别名
安装 craco
1
| npm install @craco/craco -D
|
新建 craco.config.js
1
2
3
4
5
6
7
8
9
10
| const path = require("path");
const resolve = (dir) => path.resolve(__dirname, dir);
module.exports = {
webpack: {
alias: {
"@": resolve("src"),
},
},
};
|
加入红框中的两段
package.json 修改
1
2
3
| "start": "craco start",
"build": "craco build",
"test": "craco test",
|
便可以使用别名了
1
| import App from "@/App";
|
代码规范设置
editorconfig
新建.editorconfig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
max_line_length = 80
trim_trailing_whitespace = true
[*.md]
max_line_length = 0
trim_trailing_whitespace = false
|
安装插件
prettier
安装
安装 vscode 中的插件
新建.prettierrc
1
2
3
4
5
6
7
8
| {
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,
"singleQuote": true,
"trailingComma": "none",
"semi": false,
}
|
新建.prettierignore，排除不需要检测的文件
1
2
3
4
5
6
7
8
9
| /build/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
|
可以使用 npm run prettier ，直接格式化代码
设置成 vscode 默认的格式化
eslint
安装
配置
之后变会自动生成一个配置文件
添加下面的两行，保证 module.export 不会报错。然后 eslint 和 prettier 的标准保持一致
打开 vsocode 的设置，可以添加这两行
安装插件
1
| npm install eslint-plugin-prettier eslint-config-prettier -D
|
当不满足标准的时候，就会报错
