1. 路徑解析配置（webpack），把 @/ 解析為 src/
2. 路徑聯想配置（VsCode），VSCode 在輸入 @/ 時，自動聯想出來對應的 src/下的子級目錄

1. 路徑解析配置

1. 安裝craco npm i -D @craco/craco
2. 項目根目錄下創建配置文件craco.config.js
3. 配置文件中添加路徑解析配置
4. 包文件中配置啟動和打包命令

// craco.config.jsconst path = require('path');module.exports = {webpack: {alias: {'@': path.resolve(__dirname, 'src')}}
}

// package.json"scripts": {"start": "craco start","build": "craco build","test": "react-scripts test","eject": "react-scripts eject"},

craco start & npm run server 可以合并命令，用 npm run start 一起執行。

2. 聯想路徑配置

1. 根目錄下新增配置文件 - jsconfig.json
2. 添加路徑提示配置

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