The target

Can have vscode recognize @ paths and give path hints

steps

  1. Created in the project root directoryjsconfig.jsonThe configuration file
  2. Add the following configuration to the configuration file

Jsconfig. Json in:

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

summary

VSCode automatically reads the configuration in jsconfig.json to let VSCode know that @ is SRC

Use Craco to configure the path alias

The target

Configure the @ path alias so that the scaffold tool can recognize @

background

Create-react-app (CRA) hides all engineering configurations in the react-scripts package, so no configuration information or configuration files are seen in the project.

If you want to change the default CRA configuration, there are several options:

  1. 【 recommended 】 Use third-party libraries to modify, for example,@craco/craco
  2. By performingyarn ejectCommand, releasereact-scriptsTo the project (note: this operation is irreversible!!)

What is craco

Create React App Configuration Override, an easy and comprehensible configuration layer for create-react-app

Craco is a custom configuration tool for create-React-app.

Making the address

Configuration in ANTD

Procedure for using crACO

  1. The installation package. npm i -D @craco/craco

  2. In the project root directory, create the configuration file: craco.config.js. Custom changes can be made in the configuration file.

    craco.config.js

    Configuring a Path Alias

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

  3. Modify script commands in package.json

    Package. The json:

    // Change the start/build/test command to craco mode "scripts": {"start": "craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject" },Copy the code

  4. In code, the absolute path to the SRC directory can be represented by @

  5. Restart the project for the configuration to take effect