简介
在 webpack 项目中，我们经?；嵘柚?alias 来引入文件，避免文件路径写的过长过深。
使用 alias 的时候会发现路径和函数的智能提示不见了，如果路径名称很复杂的话很容易写错而且也不方便。
可以通过配置来支持智能提示。
步骤
比如：某个项目，配置了 alias 如下
const path = require('path')
const {
override,
addWebpackAlias,
} = require('customize-cra')
const resolve = dir => path.resolve(__dirname, dir)
module.exports = override(
// 路径别名
addWebpackAlias({
'@': resolve('src'),
'utils': resolve('src/utils')
}),
)
在项目根目录下新建一个文件，命名为jsconfig.json，写入对应配置即可
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": [
"./src/*"
],
"utils/*": [
"./src/utils/*"
]
}
},
"include": [
"src"
],
"exclude": [
"node_modules"
]
}
备注
配置完 jsconfig.json 文件后可能会报错。
这一般是因为 vscode 会自动进行 JavaScript 文件的语义检查。自定义的 jsconfig.json 文件无法覆盖 vscode 自带的配置，所以会报错。
解决办法是修改 vscode 的设置，让自定义的 jsconfig.json 文件覆盖 vscode 默认选项
- 文件 → 首选项 → 设置（Ctrl+,），打开设置界面
- 输入 jsconfig，筛选出 jsconfig 相关配置
- 将 Implicit Project Config: Check JS 选项勾选即可
Implicit Project Config: Check JS
