react脚手架配置别名并自动提示[VSCode]

1. 安装三方库@craco/craco

yarn add craco --dev
npm install @craco/craco --save-dev

2. 配置craco.config.js

const path = require("path");

module.exports = {
    webpack: {
        alias: {
            "@": path.resolve(__dirname, "src")
        }
    }
}

3. 修改package.json的scripts命令

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

4. 配置jsconfig.js使vscode自动提示

vscode会自动读取jsconfig.js中的配置
输入@之后提示对应路径下的文件夹的名称

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