创建项目(带ts的react项目):
npx create-react-app xxx --template typescript
看下创建好的目录文件吧:
目录.png
安装prettier:
yarn add prettier --dev --exact
(官网是yarn add --dev --exact prettier
,这样安装package.json里没出现prettier,奇了怪)
创建prettier配置文件:
echo {}> .prettierrc.json
再创建个.prettierignore文件
接着:
yarn global add mrm mrm-task-lint-staged
npx mrm lint-staged
执行完后查看package.json,如下代码如果没有自动生成请手动加上:
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
处理与eslint共同使用的问题yarn add eslint-config-prettier -D
在package.json eslint配置处加上prettier:
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest",
"prettier"
]
},
安装json-server:
yarn add json-server -D
根目录创建文件夹json_server_mock,文件夹里新建db.json
package.json配置:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"prepare": "husky install",
"json-server":"json-server --watch __json_server_mock__/db.json"
},
启动:
yarn json-server