簡介

在 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