vscode 配置@根路径

配置VSCodePathIntellisense与Vite别名

懒员员

已于 2023-04-24 14:08:28 修改

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vscode ide 编辑器

于 2023-04-20 10:36:37 首次发布

本文链接：https://blog.csdn.net/weixin_44523517/article/details/130260573

vue 专栏收录该内容

41 篇文章

订阅专栏

该文指导如何在项目中安装和配置PathIntellisense插件，包括在settings.json中设置映射，在vite.config.js中定义别名，以及创建jsconfig.json以支持@符号映射到src目录，目标是优化开发环境的路径补全功能。

一、安装依赖

npm install path --save

二、安装插件`Path Intellisense`

三、设置-搜索path-intellisense-在settings.json中编辑

配置：

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

`四、vite.config.js`中的别名配置。确保 `@` 符号已正确映射到 `src` 目录

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  // 其他配置...
});

五、在项目根目录下，创建jsconfig.json文件，内容如下：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "exclude": [
    "node_modules"
  ]
}