VSCode中jsconfig路径别名智能提示在JS/Vue中失效，TS正常

针对你Vite项目中JS、Vue文件无法使用路径别名智能提示（TS文件正常）的情况，可以按以下步骤修复：

1. 完善jsconfig.json配置 #

调整你的jsconfig.json，确保覆盖所有需要识别的文件类型，并对齐别名解析规则：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "module": "ESNext",
    "moduleResolution": "Node",
    "target": "ES2020",
    "jsx": "preserve",
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*.js", "src/**/*.vue", "src/**/*.json"],
  "exclude": ["node_modules", "dist"]
}

关键调整点：

• include数组必须包含*.vue和*.js文件，确保VSCode能扫描到这些文件
• compilerOptions中moduleResolution设为Node，让别名解析逻辑与Node运行时一致
• 保证baseUrl和paths的映射关系准确，@/*对应项目根目录下的src/*

2. 确保VSCode的Vue文件支持插件正常工作 #

如果你使用Volar（Vue官方推荐的IDE插件），需完成以下设置：

• 打开VSCode设置，搜索Volar: Enable Take Over Mode并勾选启用——该模式会让Volar接管所有JS/TS/Vue文件的语言服务，替代默认TypeScript服务，更适配Vue文件的别名提示需求
• 若仍使用旧版Vetur，建议升级到Volar，或在Vetur设置中开启jsconfig支持开关

3. 重启VSCode语言服务 #

完成配置后，按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入Reload Window并执行，让VSCode重新加载配置和语言服务。

额外验证 #

确认Vite配置文件（vite.config.js/ts）中也配置了相同的别名规则，保证运行时与编辑器解析逻辑一致：

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

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

内容的提问来源于stack exchange，提问作者powerfulH