# vscode-path-alias

**Repository Path**: zqylzcwcxy/vscode-path-alias

## Basic Information

- **Project Name**: vscode-path-alias
- **Description**: 🎉使vscode支持各类路径别名
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-03-08
- **Last Updated**: 2022-03-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🎉 提供对各类路径跳转的支持

## 🚨 注意

项目必须拥有一个`src`文件夹，以此自动判断根路径

后续考虑进行自定义该文件夹名的开发

## ⚡ 使用

使用 ctrl+左键跳转相应文件

特殊情况 1：webpack 中对 img 和 css 使用`~@`路径别名，ctrl+左键无效，需要使用本插件的`vscode-path-alias.toSecondDefinition`命令来跳转，建议自行定义快捷键

特殊情况 2：省略.vue 后缀名的这种简化写法，ctrl+左键有时会出现两个路径，可以使用本插件的`vscode-path-alias.toSecondDefinition`命令来跳转，建议自行定义快捷键

## ✨ 功能

1. 在项目的 package.json 中使用 ctrl+左键点击包名，即可跳转 node_modules 中该包位置
2. 默认支持路径别名`@`对应 `src`
3. 默认支持 webpack 图片和 css 别名`~@`对应 `src`，但由于 vscode 机制原因，只能右击选择跳到定义来跳转，而不是直接 ctrl+左键，所以需要使用本插件的"vscode-path-alias.toSecondDefinition"命令来跳转，默认该命令没有快捷键，建议用户为其设置快捷键
4. 默认支持简化写法路径跳转，如省略 index.js,省略 index.vue,省略.vue 等后缀
5. 如果省略.vue，有时 vscode 会认为这是一个目录，从而错误的定义一个路径，加上插件定义的正确路径，此时会出现两个路径定义，需要手动选择第二个才能跳转，略嫌麻烦，这时可以使用"vscode-path-alias.toSecondDefinition"来快速跳转第二个定义
6. 自动读取 vue.config.js 中类型别名设置(如果你有的话)，需按照以下写法配置类型别名，重点是需要`.set("@", resolve("src"))`这样的格式

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