vscode之webpack路径别名识别 函数注释悬浮和定义跳转

webpack路径别名识别

• 安装path intellisence 设置图标--扩展设置--setting.json
  ···
  "path-intellisense.mappings": {
  "@": "${workspaceRoot}/src"
  }
  ···

  
  
  image.png

• 重启vscode

• 根目录package.json同级添加jsconfig.js

  {
  "compilerOptions": {
      "target": "ES6",
      "module": "commonjs",
      "allowSyntheticDefaultImports": true,
      "baseUrl": "./",
      "paths": {
        "@/*": ["src/*"]
      }
  },
  "exclude": [
      "node_modules"
  ]
}

• 重启vscode

• webpack配置别名

  config.resolve.alias.set('@', resolve('src/'))

• 重新运行webpack
• 使用时注意需要点时间去加载，大概两三秒，如果还没反应就证明没设置对
  安全起见还是先试下无别名访问时加载提示目录和文件速度，因为有时vscode会卡住

函数注释悬浮和定义跳转

• 基于导入文件的路径能被vscode识别，webpack路径别名识别就成为了关键
• 光标放在函数中，按ctrl+alt或者F12

  import customer from '@/api/customer' //前提是设置了path intellisense
// import customer from '../../../api/customer' //vscode悬浮提示时能往上查找到