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"))
}
}