react开发-配置开发时候@指向SRC目录

配置开发时候@指向SRC目录VScode编辑器给出提示

总体1.配置react的@ 2.配置Vscode的@

1.配置react的@

1. 我么需要下载一个webpack的插件
这样我们的项目就能识别@指向SRC

npm install @craco/craco -D

 "devDependencies": {
    "@craco/craco": "^7.1.0"
  }

2.使用使用craco
在根部录下创建craco.config.js

写入以下内容

const path = require('path');
//配置@
module.exports= {
    webpack:{
        alias:{
            "@":path.resolve(__dirname,'src')
        }
    }
}

3. 在package.json中修改启动命令

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

2,配置VSCode的@提示支持

在项目的根目录创建jsconfig.json文件夹
写入

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*":[
                "src/*"
            ]
        }
    }
}

以上就实现了react的@路径问题