README.md · ZQY233/vscode-path-alias

# support path alias for vscode

## [中文文档](https://gitee.com/zqylzcwcxy/vscode-path-alias/blob/master/README-CN.md)

## 🚨 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 and CSS 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

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

ZQY233/vscode-path-alias

简介

发行版

贡献者

近期动态

ZQY233/vscode-path-alias .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

ZQY233/vscode-path-alias