Skip to content
| Marketplace
Sign in
Visual Studio Code>Extension Packs>vscode-path-aliasNew to Visual Studio Code? Get it now.
vscode-path-alias

vscode-path-alias

zhuzhuzhuzhuxia

|
2,717 installs
| (0) | Free
support path alias for vscode
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

support path alias for vscode

📝中文文档

🚨 Notice

Your project must have a src folder so that this extension automatically find the root path

⚡ Usage

Use Ctrl + Left-Click to jump to the corresponding file

Special case: when ~@ path alias is used for img path in webpack,, Ctrl + Left-Click does not work. Therefore, use vscode-path-alias.toSecondDefinition command of this extension to jump. It is recommended to define your own shortcut keys.

✨ Feature

  1. when in package.json, Ctrl + Left-Click devDependencie or dependencie,will jump to corresponding package.json in node_modules
  2. path alias @ corresponds to src
  3. path alias ~@ in webpack corresponds to src , however, i think it is because of the vscode mechanism, if use ~@ in img url, only right-click and select jump to definition works, rather than Ctrl + Left-Click directly. so you can use the vscode-path-alias.toSecondDefinition command of this extensiton rather than Ctrl + Left-Click
  4. support shorthand syntax such as omit index.js、index.vue、.js、.vue,if omit .vue, you need use vscode-path-alias.toSecondDefinition rather than Ctrl + Left-Click
  5. read alias in vue.config. js automatically if you have, you need to configure the alias in this way,format like .set ("@", resolve("src")) is important
const path = require("path")
function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
    ......
  chainWebpack: config => {
    config.resolve.alias
      .set("@", resolve("src"))
      .set("@assets", resolve("src/assets"))
      .set("@components", resolve("src/components"))
      .set("@views", resolve("src/views"))
      .set("@api", resolve("src/api"))
      .set("@utils", resolve("src/utils"))
      .set("@common", resolve("src/common"))
      .set("@mixins", resolve("src/mixins"))
      .set("@map", resolve("src/map"))
      .set("@layout", resolve("src/views/layout"))
    }
  }
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft