[分享]配置路径别名后的快捷定位

在开发前端项目时,通常会配置路径别名,通过创建的项目中默认会将 @/指向src,避免了使用一层层的相对路径及相关的不便。

但是又增加了一个新的问题,如果是使用相对路径,通过 ctrl 加鼠标左键点击是能够快速定位到对应文件/代码的,而使用别名后的绝对路径却是无法做到。

解决方法:
  • 安装以下 VSCode 插件,做相关配置

path-intellisense

  • 配置1:针对VSCode扩展,setting.json中编辑:
{
  "path-intellisense.mappings": {
      "@": "${workspaceRoot}/src"
   }
}
  • 配置2:项目根目录,package.json同级,新建jsconfig.json文件,内容如下:
{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./",
        "paths": {
          "@/*": ["src/*"]
        }
    },
    "exclude": [
        "node_modules"
    ]
}

效果:(按着 ctrl 键)




其它:

基本功能就是补全路径和文件名,编写代码时的提示也是有的


码路工人公众号

作者:码路工人

公众号:码路工人有力量(Code-Power)

欢迎关注个人微信公众号 Coder-Power

一起学习提高吧~

原文地址:https://www.cnblogs.com/CoderMonkie/p/fe-path-tool.html