vite配置@别名，以及如何让vscode智能提示路经

Posted 2023-03-29 相见一月

vite配置@别名

vite.config.ts 

import  defineConfig  from 'vite'
import vue from '@vitejs/plugin-vue'
 // 配置@别名
 import  resolve  from "path"; 


// https://vitejs.dev/config/
export default defineConfig(
  plugins: [vue()],
      // ↓解析配置
    resolve: 
      // ↓路径别名
      alias: 
        "@": resolve(__dirname, "./src")
      
    
)

tsconfig.json

  "compilerOptions": 
    "target": "ESNext",
    ...

    // 配置@别名
    "baseUrl": ".",
    "paths": 
      "@/*": ["src/*"]
    , 
  ,

如果运行不了或报错试下安装下 @types/node ，没有报错可以不用安装，有安装也没事

 npm install @types/node 

vscode智能提示

如果没有提示先下载VScode插件（通用，不至vite，只要配置好@别名就行）

Path-intellisense

安装好后，发现不加一个名字就会以下情况

下面是正确的路径

如果还是没有提示或提示错误（只提示当前路径下的页面），可能是绿色框中要写个名，或给个空对象才可以

但这不是我们想要的，我们想要没有写名字的（名字可能没想好的）情况下，加个@/就有src路径下的提示

按照以下步骤来做就好：

 

 复制以下内容到settings.json

    ....
    //添加以下配置（主要是前两个）
    "path-intellisense.mappings": 
        "@/": "$workspaceFolder/src",
        "/": "$workspaceFolder",
        "lib": "$workspaceFolder/lib",
        "global": "/Users/dummy/globalLibs"
    ,
    "path-intellisense.autoTriggerNextSuggestion": true,

这样就算没有加一个名也可以有自动提示了

Vscode 开启对 webpack alias(文件别名) 引入的智能提示

参考技术A 在vscode中使用alias别名引入文件，jsdoc写的注释看不到。webpack中alias这样设置：

将src目录别名设置为@，为了能够有智能提示，我们可以在项目根目录下新建一个 jsconfig.json文件,内容如下：

之后import导入有别名时就有注解的提示了，详细内容参考 vscode文档