1.vscode识别@路径并给出路径提示
- 在项目根目录创建
jsconfig.json配置文件 - 在配置文件中添加以下配置
jsconfig.json 中:
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
}
}
经过以上操作,VSCode 会自动读取 jsconfig.json 中的配置,让 vscode 知道 @ 就是 src 目录
2.配置@路径别名,让脚手架工具能识别@
CRA(create-react-app) 将所有工程化配置,都隐藏在了 react-scripts 包中,所以,项目中看不到任何配置信息或者是配置文件。
如果要修改 CRA 的默认配置,有以下几种方案:
- 【推荐】通过第三方库来修改,比如,
@craco/craco - 通过执行
yarn eject命令,释放react-scripts中的所有配置到项目中(注意:该操作不可逆!!!
craco的使用步骤
-
安装包。
npm i -D @craco/craco - 在项目根目录下,创建配置文件:
craco.config.js。在配置文件中就可以做自定义的修改了。

本文介绍了如何在CRA创建的React项目中,通过配置`jsconfig.json`使VSCode识别`@`路径并给出提示,以及如何使用craco配置@路径别名,使得脚手架工具能识别这种路径。详细步骤包括创建`jsconfig.json`,安装和配置craco,修改`package.json`脚本,以及代码中使用`@`代表`src`目录。
最低0.47元/天 解锁文章
522





