Visual Studio Code Intellisense 和自动完成 - Vite、JSconfig 和别名 - 无法找出正确的组合

Question

在使用 PHPStorm/Webstorm 多年后，刚刚再次开始使用 Visual Studio 代码工作

我决定进行过渡，只是因为 VSCode 非常轻量级，而且我不想依赖付费服务/在每台计算机上都拥有它，因为 VSCode 几乎无处不在并且免费。

我重新开始

Vite+Vue3

现在我遇到了几个问题 进口 CTRL+单击 - 转到参考 自动完成

我的Vite.config如下 - 启用别名

import { defineConfig } from "vite";
import { fileURLToPath, URL } from "url";
import vue from "@vitejs/plugin-vue";
import path from "path";
// https://vitejs.dev/config/
/// <reference types="vitest" />
export default defineConfig({
    resolve: {
        extensions: [".js", ".json", ".vue", ".scss", ".css"],
        fallback: {
            crypto: path.resolve("crypto-browserify"),
            stream: path.resolve("stream-browserify"),
        },
        alias: {
            "@": fileURLToPath(new URL("./src", import.meta.url)),
            img: path.resolve(__dirname, "./public/img"),
        },
    },
    plugins: [vue()],
    test: {},
    server: {
        port: 8080,
    },
    build: {
        sourcemap: false,
        minify: false,
        assetsDir: "chunks",
    },
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@use  "sass:math"; @import "./src/assets/scss/v2/legacy.scss"; @import "./src/assets/scss/common.scss";`,
            },
        },
    },
});

现在，仅通过 vite 配置，我就可以使用“@”别名导入 - 但没有发生智能感知， I can't autocomplete 进口 nor can I ctrl + click

添加 jsconfig.json 文件后

{
    "compilerOptions": {
        "target": "ESNext",
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"]
        }
    }
}

我现在可以使用“@”导入我的组件，并且对它们也有完整的智能感知，并且可以按住 CTRL 键并单击它们 但是，现在我失去了导入 node_modules 的能力 - 失去了所有智能感知

所以，如果我使用我的 vite/jsconfig，我可以 ctrl+click/自动完成“@”别名 但我失去了我的node_module导入功能

如果我删除那些 vite.config 别名配置并删除 jsconfig 我找回了 node_module 智能感知，但丢失了项目的智能感知。

我在这里缺少什么？请帮我解决这个问题。

我还删除了任何/每个 npm 导入扩展，以便我能够理解它是如何工作的

Answer 1

由于 jsconfig.json 文件而出现的问题。

目录中存在 jsconfig.json 文件表明该目录是 JavaScript 项目的根目录。 jsconfig.json 文件指定 JavaScript 语言服务提供的功能的根文件和选项 (vscode）。

大多数时候您不需要它，但有一些示例您可以使用它，例如IntelliSense 自定义。 示例

更多详细信息：

jsconfig.json 是 tsconfig.json 的后代，后者是 TypeScript 的配置文件。 jsconfig.json 是 tsconfig.json，其中 "allowJs" 属性设置为 true 并且因为没有实际编译JavaScript 所必需的。这些属性存在是因为 jsconfig.json 是 tsconfig.json 的后代（只是）

因此，并非所有选项都与 target 相同：

话虽如此，vscode IntelliSense 可能会受到这些更改的影响。所以如果你删除它，一切都会按预期工作。

换句话说，target 可以在 jsconfig.json 上影响 IntelliSense。

对于您的情况，您只需按以下方式添加：

jsconfig.json

{
   "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["src/*"]
      }
   }
}

vite.config.js

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

有关 vscode 的 jsconfig.json 的更多信息：此处