vite配置@别名以及让vscode智能提示路经的步骤
作者：相见一月
这篇文章主要给大家介绍了关于vite配置@别名以及让vscode智能提示路经的步骤,文中通过代码示例以及图文介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
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,
}这样就算没有加一个名也可以有自动提示了
总结
到此这篇关于vite配置@别名以及让vscode智能提示路经的文章就介绍到这了,更多相关vite配置@别名内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！