React、ts、Ant Design、node、koa 团队项目开发记录(开发环境:windows10、vscode)
2022/2/7 7:12:34
本文主要是介绍React、ts、Ant Design、node、koa 团队项目开发记录(开发环境:windows10、vscode),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
文章目录
- prettier 格式化 jsx 代码中引号为单引号
- 项目报错: “../react-dom/index.d.ts”不是模块
- Definition for rule 'additional-typescript-only-rule' was not found. eslint(additional-typescript-only-rule) 等
- react-scripts@^5.0.0 下载 @craco/craco@6.4.3 失败
- 无法找到模块“react-router-config”的声明文件
- 通过 CRA(create-react-app)和 craco + craco-alias 创建的 typescript 模板项目如何设置 alias path
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",
这篇关于React、ts、Ant Design、node、koa 团队项目开发记录(开发环境:windows10、vscode)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-23Vue新手入门教程:从零开始学习Vue框架
- 2024-11-23如何集成Ant Design Vue的图标
- 2024-11-23如何集成Ant Design Vue图标
- 2024-11-23使用vue CLI快速搭建Vue项目教程
- 2024-11-23Vue CLI多环境配置简单教程
- 2024-11-23Vue3入门教程:轻松搭建你的第一个Vue3应用
- 2024-11-23Vue3+Vite快速上手指南
- 2024-11-23Vue3阿里系UI组件入门指南
- 2024-11-23Vue3的阿里系UI组件入门指南
- 2024-11-23Vue3公共组件入门教程