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
- when in package.json,
Ctrl + Left-Click
devDependencie or dependencie,will jump to corresponding package.json in node_modules
- path alias
@
corresponds to src
- 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
- 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
- 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"))
}
}