Use @ in the project created by CRA, let it recognize the @ path and give path tips

1.vscode distinguish @ Path and give path prompt

1. Create in project root  jsconfig.json  The configuration file
2. Add the following configuration... To the configuration file

jsconfig.json in ：

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

After the above operation ,VSCode Will automatically read  jsconfig.json  Configuration in , Give Way vscode know @ Namely src Catalog

2. To configure @ path alias , Allow scaffolding tools to identify @

CRA(create-react-app) Put all engineering configurations , It's all hidden in  react-scripts  In bag , therefore , No configuration information or configuration files can be seen in the project .

If you want to modify CRA Default configuration , There are several options ：

1. 【 recommend 】 Modify... Through a third-party library , such as ,@craco/craco
2. Through execution  yarn eject  command , Release  react-scripts  All configurations in the are added to the project （ Be careful ： The operation is irreversible ！！！

craco How to use

1. Installation package .npm i -D @craco/craco

2. Under the project root , create profile ：craco.config.js. You can make custom modifications in the configuration file .

          craco.config.js Configure path aliases

const path = require('path')
module.exports = {
  webpack: {
    alias: {
      '@': path.join(__dirname, 'src')
    }
  }
}

3. modify  package.json  Script command in

package.json in ：

//  take  start/build/test  The three commands are changed to  craco  The way 

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

4. In the code , You can go through  @  To express src The absolute path to the directory

5. Restart project , Make the configuration work