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

Question

在 PHPStorm/Webstorm 上工作多年后，才重新开始使用 Visual Studio Code

我决定进行转换只是因为 VSCode 的轻量级，并且因为我不想依赖付费服务/在每台计算机上安装它，因为 VSCode 几乎无处不在且免费。

我重新开始

Vite+Vue3

现在我遇到了 Imports CTRL+Click 的几个问题 - goto reference Autocompletes

我的 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 + click

添加jsconfig.json文件后

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

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

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

如果我删除那些 vite.config 别名配置并删除 jsconfig，我会取回 node_module intellisense 并丢失我的项目的 intellisense。

我在这里错过了什么？ 请帮我弄清楚。

我还删除了任何/每个 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一样：

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

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

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

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

jsconfig.json文件

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

vite.config.js

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

有关 vscode 的 jsconfig.json 的更多阅读：这里

Answer 2

在您的 jsconfig.json 文件中，您可以尝试添加以下配置来为节点模块启用 IntelliSense：

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

Answer 3

jsconfig.json文件

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["./*"],
      "#c": ["./components/index"]
    }
  }
}

vite.config.js

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

像这样导入模块：

import { useMouseFollower, useMouse } from '@/hooks' // import hool from hooks/index.js

当输入@/时，vscode 会给出一些路径提示。