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

Question

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

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

我重新开始

维特+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 配置，我可以使用“@”别名导入 - 但没有发生智能感知，我无法自动完成导入，也无法 ctrl + 单击

添加 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因为JavaScript不需要实际编译。这些属性存在是因为它是（只是）的后代tsconfig.json"allowJs"truejsconfig.jsontsconfig.json

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

该target设置会更改哪些 JS 功能被降级以及哪些功能保持不变。例如，如果目标是 ES5 或更低版本，箭头函数 () => this 将转换为等效函数表达式。
更改还会更改libtarget的默认值。

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

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

对于您的情况，您只需添加如下：

jsconfig.json

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

vite.config.js

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

有关 vscode 的 jsconfig.json 的更多信息，请阅读：此处