React、ts、Ant Design、node、koa 团队项目开发记录（开发环境：windows10、vscode）

2021-10-21 18:47:17

文章目录

prettier 格式化 jsx 代码中引号为单引号

// .prettierrc
"jsxSingleQuote": true

项目报错: “…/react-dom/index.d.ts”不是模块

很神奇，查看 node_module/@type/react-dom/index.d.ts 文件后报错消失。

Definition for rule ‘additional-typescript-only-rule’ was not found. eslint(additional-typescript-only-rule) 等

报错解决方法：

    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest",
            "prettier"
        ],
        "rules": {
            "additional-rule": "warn" // warn 改为 off
        },
        "overrides": [
            {
                "files": [
                    "**/*.ts?(x)"
                ],
                "rules": {
                    "additional-typescript-only-rule": "warn" // warn 改为 off
                }
            }
        ]
    },

react-scripts@^5.0.0 下载 @craco/craco@6.4.3 失败

报错信息：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: tiger-zoo@0.1.0
npm ERR! Found: react-scripts@5.0.0
npm ERR! node_modules/react-scripts
npm ERR!   react-scripts@"^5.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-scripts@"^4.0.0" from @craco/craco@6.4.3
npm ERR! node_modules/@craco/craco
npm ERR!   @craco/craco@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

原因：craco 6.4.3 与 react-scripts@^5.0.0 不兼容
解决办法：下载craco@^7.0.0-alpha.0
参考资料

无法找到模块“react-router-config”的声明文件

[{
	"resource": "/e:/01-front-end-learning/01-面试准备/00-tigerZoo/tiger-zoo/src/App.tsx",
	"owner": "typescript",
	"code": "7016",
	"severity": 8,
	"message": "无法找到模块“react-router-config”的声明文件。“E:/01-front-end-learning/01-面试准备/00-tigerZoo/tiger-zoo/node_modules/react-router-config/index.js”隐式拥有 \"any\" 类型。\n  尝试使用 `npm i --save-dev @types/react-router-config` (如果存在)，或者添加一个包含 `declare module 'react-router-config';` 的新声明(.d.ts)文件",
	"source": "ts",
	"startLineNumber": 3,
	"startColumn": 30,
	"endLineNumber": 3,
	"endColumn": 51
}]

解决办法：npm i --save-dev @types/react-router-config

通过 CRA（create-react-app）和 craco + craco-alias 创建的 typescript 模板项目如何设置 alias path

方法2 亲测有效：稀土掘金-可乐米店

问题背景：
使用cra创建的项目每一次重启都会重置tsconfig.json, 导致在tsconfig.json设置的别名失效。

解决方法：

方法1：
启动项目之后，手动修改tsconfig.json 文件，重新编译 alias生效

craco start

方法2：

根目录创建 tsconfig.path.json 文件

  {
      "compilerOptions": {
        "baseUrl": ".",
        "paths": {
          "@/*": ["src/*"],
          "@svg/*": ["src/assets/svg/*"],
          "@img/*": ["src/assets/images/*"],
          "@icons/*": ["src/assets/icons/*"],
          "@shared/*": ["src/shared/*"],
          "@components/*": ["src/components/*"],
          "@hooks/*": ["src/hooks/*"],
          "@constants/*": ["src/constants/*"],
          "@layout/*": ["src/layout/*"],
          "@services/*": ["src/services/*"]
        }
      }
    }

craco.config.js 文件 CracoAlias 配置为

const CracoAlias = require('craco-alias');
...
    {
        plugin: CracoAlias,
        options: {
            source: 'tsconfig',
            baseUrl: '.',
            tsConfigPath: "./tsconfig.path.json"
        }
    }
...

tsconfig.json 文件插入代码

  "extends": "./tsconfig.path.json",

码农公寓