在 Vue 项目开发过程中，VSCode 作为主流的代码编辑器，为我们提供了强大的开发体验。然而，我最近在使用过程中会遇到两个常见问题：

1. 在Vue文件中引用其他JS文件时，VSCode没有智能提示
2. 使用@路径别名导入模块时，无法通过点击跳转到源文件

这些问题看似简单，但实际上涉及到VSCode配置、项目结构、插件选择等多个方面。这里主要是记录一下解决方案

---

问题描述

起因是当我在 .vue 文件的 <script> 标签中编写 JavaScript 代码并尝试引用其他 JS 文件的方法时，我发现VSCode 无法提供智能提示（IntelliSense），这极大地影响了开发效率。

另外一个问题是在使用 import request from '@/utils/request' 这样的路径别名导入时，点击 @/utils/request 无法跳转到对应的文件，这让代码导航变得困难。

这两个问题可能存在一定的相似性，我猜测是 VSCode 无法正确识别项目的模块解析配置和路径映射。

我们这里从以下几个方面进行排查问题：

1. 清理缓存和重启 VSCode，毕竟重启能解决88%的问题
2. 确定自己引入的文件路径是正确的，确保文件在指定的位置
3. 正确配置 jsconfig.json 或 tsconfig.json（有可能是这个问题？）
4. 安装并配置正确的 VSCode 扩展 - 使用 Vue-Official 替代 Vetur

---

✅ 解决方案

一、配置和使用正确的 VSCode 扩展

1、安装 Vue-Official

对于 Vue 3 项目，强烈推荐使用 Vue-Official 扩展：

1. 在 VSCode 扩展市场搜索并安装 Vue-Official
2. 禁用 Vetur 扩展（如果已安装），避免冲突
3. 重启 VSCode

2、安装 Path Intellisense 扩展

为了增强路径提示功能，安装 Path Intellisense 扩展，并在 VSCode 设置中添加：

{
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  },
  "path-intellisense.autoSlashAfterDirectory": true,
  "path-intellisense.extensionOnImport": true,
  "path-intellisense.showHiddenFiles": true
}

---

二、确保正确的导入方式

在 Vue 单文件组件中，确保使用正确的导入语法：

<template>
  <div>{{ message }}</div>
</template>

<script setup>
// ✅ 推荐：使用路径别名
import { formatDate } from '@/utils/dateHelper'
import { apiRequest } from '@/utils/request'
import MyComponent from '@/components/MyComponent.vue'

// ✅ 也可以使用相对路径
import { localHelper } from '../utils/localHelper'

// 使用导入的方法
const message = formatDate(new Date())
</script>

对于 Options API 语法：

<script>
import { formatDate } from '@/utils/dateHelper'
import MyComponent from '@/components/MyComponent.vue'

export default {
  name: 'MyComponent',
  components: {
    MyComponent
  },
  data() {
    return {
      message: formatDate(new Date())
    }
  }
}
</script>

---

三、添加 jsconfig.json 或 tsconfig.json

创建 jsconfig.json（JavaScript 项目）

在项目根目录创建 jsconfig.json 文件，这是解决问题的关键步骤：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "include": ["src/**/*"],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

创建 tsconfig.json（TypeScript 项目）

如果您的项目使用 TypeScript，则创建 tsconfig.json：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ]
}

配置后重启VSCode使更改生效。

这里也有需要注意的地方，这里需要确保构建工具配置一致

确保构建工具配置一致

Vite 项目配置

如果使用 Vite，确保 vite.config.js 中的别名配置与 jsconfig.json 一致：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})

Webpack 项目配置

对于使用 Webpack 的项目，确保别名配置正确：

const path = require('path')

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src/')
    }
  }
}

---

高级配置和优化

配置工作区设置

在项目根目录创建 .vscode/settings.json 文件：

{
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.suggest.autoImports": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "javascript.suggest.autoImports": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "vue.updateImportsOnFileMove.enabled": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  },
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  }
}

"typescript.preferences.importModuleSpecifier": "relative"：控制 TypeScript 自动导入时使用的路径风格。

• "relative"：使用相对路径（如 ../utils/helper）。
• "non-relative"：优先使用别名路径（如 @/utils/helper）。
• "auto"：由 TypeScript 自动决定。

---

"typescript.suggest.autoImports": true：启用 TypeScript 的自动导入建议功能。输入代码时，VSCode 会自动提示可导入的模块并补全 import 语句。

---

"typescript.updateImportsOnFileMove.enabled": "always"：在重命名或移动文件时，自动更新所有引用该文件的 import 路径。

• "always"：总是自动更新。
• "prompt"：询问是否更新。
• "never"：禁用此功能。

---

"javascript.suggest.autoImports": true：与 typescript.suggest.autoImports 类似，但针对 JavaScript 文件。在 JS 文件中输入代码时，自动提示可导入的模块。

"javascript.updateImportsOnFileMove.enabled": "always"：与 TypeScript 的配置类似，但针对 JavaScript 文件。

"vue.updateImportsOnFileMove.enabled": true：在 Vue 项目中移动文件时，自动更新 .vue 文件中的 import 路径。(需配合 Volar 插件使用)

"editor.codeActionsOnSave": {"source.organizeImports": true}：在保存文件时，自动整理（排序、去重）import 语句。删除未使用的导入，按字母顺序排序导入语句。

"path-intellisense.mappings": {"@": "${workspaceRoot}/src"}：配置路径别名 @ 的解析规则，需配合 Path Intellisense 插件使用。输入 @/ 时，插件会提示 src/ 目录下的文件，支持点击跳转到目标文件。（需要和 jsconfig.json/tsconfig.json 中的 paths 配置保持一致）

为 JavaScript 文件添加类型声明

为了获得更好的代码提示，可以在 JavaScript 文件中使用 JSDoc 注释：

/**
 * 格式化日期
 * @param {Date} date - 要格式化的日期
 * @param {string} format - 日期格式
 * @returns {string} 格式化后的日期字符串
 */
export function formatDate(date, format = 'YYYY-MM-DD') {
  // 实现代码
  return formattedDate
}

/**
 * API 请求封装
 * @param {string} url - 请求地址
 * @param {Object} options - 请求选项
 * @returns {Promise<Object>} 请求响应
 */
export async function apiRequest(url, options = {}) {
  // 实现代码
  return response
}

创建类型声明文件

对于复杂的工具函数，可以创建 .d.ts 声明文件：

typescript
// src/types/utils.d.ts
declare module '@/utils/request' {
  export interface RequestOptions {
    method?: 'GET' | 'POST' | 'PUT' | 'DELETE'
    headers?: Record<string, string>
    data?: any
  }
  
  export function request(url: string, options?: RequestOptions): Promise<any>
  export default request
}

declare module '@/utils/dateHelper' {
  export function formatDate(date: Date, format?: string): string
  export function parseDate(dateString: string): Date
}