vscode配置@路径提示及代码智提示之path-intellisense

在写vue代码的时候,希望输入@,也能加载对应的资源,可以利用 path-intellisense

1. 安装 path-intellisense插件

   
   
   image.png
   
   

   2.添加配置文件

   
   
   image.png

3.点击Extension Settings后添加配置

image.png

image.png

4. 复制添加到path-intellisense的配置里去

    "path-intellisense.mappings": {
        "@": "${workspaceRoot}/src"
    }

5.接下来,在你的vue或react项目里添加一个配置文件
在你的项目根目录下新建: jsconfig.json文件,紧接着,复制,没错,比擅长的复制大法.

{
  "compilerOptions": {
    "experimentalDecorators": true, 
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "components/*": ["src/components/*"],
      "assets/*": ["src/assets/*"],
      "views/*": ["src/views/*"],
      "common/*": ["src/common/*"],
    }
  },
  "exclude": ["node_modules", "dist"]
}

6.最后一步了,马上就成功了! 重启电脑...嗬..是不可能,重启vscode 即可!
块去试一试吧, 当然还有另外一种方式,安装 path-alias插件也可以.
效果图:

image.png