起步

通过脚手架搭建项目，并选择模板开始 typescript 支持 , 如果发现安装包后没有生成 tsconfig 相关配置的同学，可以将 nodejs 升级到最新版本重新下包即可。

1
npx create-react-app <projectname> --template typescript

暴露项目配置

1
npm run eject

配置别名

config/webpack.config.js 在 alias 添加下面配置：

1
2
3
alias: {
  "@": paths.appSrc,
},

启动项目关闭打开新页面

scripts/start.js 注释 143 行代码：

1
// openBrowser(urls.localUrlForBrowser);

配置 prettier 实现 git 提交自动格式化代码

由于我们在具体的项目开发中，会涉及到多人协作（多个团队成员在一个项目中开发代码），书写代码风格还有编辑器的一些格式化插件的不同风格，导致整个项目代码乱七八糟。

安装

由于脚手架初始化开启了 eslint 相关配置，所以只需要安装对应的插件即可

1
2
npm install --save-dev --save-exact prettier
 yarn add prettier -D

项目根目录添加配置文件

  • .prettierrc.json
  • .prettierignore

配置 git hook

1
npx mrm lint-staged

安装结束后会多了个 husky（哈士奇）的配置，以及 package.json 新增配置如下：

1
2
3
4
"lint-staged": {
   "*.js": "eslint --cache --fix",
   "*.{js,css,md,ts,tsx}": "prettier --write"
 }

由于本项目是支持 typescript 所以需要添加 ts、tsx 配置

配置合并

由于 eslint 与 prettier 会有一些冲突，需要安装下面插件配置

1
yarn add  eslint-config-prettier -D

同时在 .eslintrc 或者 package.json/eslintConfig 对象中中添加 perttier 配置

1
2
3
4
5
6
7
{
    "extends": [
        "react-app",
        "react-app/jest",
        "prettier"
    ]
}