简介

在 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