React如何配置@（src）别名路径和VS Code联想路径

首先说一下配置@（src）别名路径有什么用？配置@（src）别名路径后，在项目中引入文件的时候可以使用@符号代替src目录，当目录结构嵌套比较深的时候，就不需要使用../的方式逐一往上寻找文件，不仅麻烦，还很容易出错，因此配置@（src）别名路径就能够很好的解决这个问题。

在react中想要配置@（src）别名路径需要借助craco插件。因此配置别名路径的第一步就是安装craco插件。

npm i craco

安装结束后，在项目根目录下面创建craco.config.js文件，必须是项目“根目录”，然后在该文件中配置如下代码。

const path = require('path')

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

接下来打开根目录下面的package.json文件，修改scripts下面的运行命令，交给craco插件去管理。

然后就可以使用@符号去代替src作为路径书写了。 

然后说一下配置VS Code联想路径能够帮助在使用@作为src路径的时候，提供友好的提示功能，当输入@的时候能够自动提示src路径下面的路径。

在根目录下面创建文件jsconfig.json，然后在文件中进行如下配置即可。

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