npx create-react-app jira --template typescript
脚手架初始化项目遇到的问题
说明
: 这里使用脚手架安装项目的时候遇到了一个问题,大致可能说的是 node
版本不匹配,也就是我的版本低了,截图如下。
后来在网上找到了解决问题的办法:解决办法链接
// 解决命令
yarn config set ignore-engines true
cd jira
npm start
打开 tsconfig.json
文件夹,在编译选项中配置 baseUrl
选项,指向当前路径下 src
目录。
{
"compilerOptions": {
"baseUrl": "./src"
}
}
yarn add --dev --exact prettier
echo {}> .prettierrc.json
.prettierignore
文件即在该文件中声明不需要格式化的文件
// .prettierignore
build
coverage
yarn prettier --write
在我们的项目每次提交前,我们可以借助 Pre-commit Hook
工具完成自动格式化。
npx mrm lint-staged
我们可以打开 package.json
看到,该命令添加了以下内容
"lint-staged": {
"*.{js,css,md}": "prettier --write"
}
由于我们是一个 ts
项目,我们在项目中添加扩展名中添加 ts
, tsx
。
"lint-staged": {
"*.{js,css,md,ts,tsx}": "prettier --write"
}
eslint
yarn add eslint-config-prettier
// 修改前
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
// 修改后
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest",
"prettier"
]
},
即用 prettier
的规则替换之前的一部分规则。
commitlint 工具
yarn add @commitlint/{config-conventional,cli} -D
mock 工具
模拟后端接口这里我们综合考虑后,选择 json-server
.
yarn add -D json-server
目录名称为 __json_server_mock__
目录中包含 db.json
文件。
scripts
脚本中添加启动 json-server
脚本"scripts": {
"json-server": "json-server __json_server_mock__/db.json --watch"
},
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。