Click on the link of the vue project in vscode to jump to the corresponding imported module

Background: Now the projects are all modularized development, and they are often used 文件A引入另一文件B的模块. When developing and maintaining, most of them need to see Bwhat the introduction has done, so 文件Bit is very time-saving and labor-saving to quickly find it!
As shown in the following code, press and hold ctrl+鼠标左键, the first one cannot jump to the corresponding directory, but the second one can

import {
    
     longPress } from '@/directives/index'
import {
    
     clickOutside} from '../../directives/index'

Solution:
1. Configure the alias of @ in the project

// vue.config.js文件
const path = require('path')
const resolve = (dir) => {
    
    
  return path.join(__dirname, dir)
}

module.exports = {
    
    
  configureWebpack: {
    
    
    name: 'myAdmin',
    resolve: {
    
    
      alias: {
    
    
        '@': resolve('src'),
      }
    }
  },
}

2. jsconfig.json or tsconfig.json in the project root directory (create manually if not)

// jsconfig.json
{
    
    
  "compilerOptions": {
    
    
    "baseUrl": ".",
    "paths": {
    
    
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Remember to restart after configuration.