[英]Visual Studio Code Intellisense and Autocomplete - Vite, JSconfig and Aliases - can't figure out the right combination
Just started working again with Visual studio code after years on PHPStorm/Webstorm在 PHPStorm/Webstorm 上工作多年后,才重新开始使用 Visual Studio Code
I've decided to take the transition just because of how lightweight VSCode is and because I don't want to rely on a paid service/having it on every computer since VSCode is almost everywhere and free.我决定进行转换只是因为 VSCode 的轻量级,并且因为我不想依赖付费服务/在每台计算机上安装它,因为 VSCode 几乎无处不在且免费。
I started fresh我重新开始
Vite + Vue3 Vite+Vue3
Now I've come across several issues with Imports CTRL+Click - goto reference Autocompletes现在我遇到了 Imports CTRL+Click 的几个问题 - goto reference Autocompletes
my Vite.config is as follows - to enable aliases我的 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";`,
},
},
},
});
Now, with vite config alone I can import using the "@" alias - but no intellisense is taking place, I can't autocomplete imports nor can I ctrl + click现在,单独使用 vite 配置,我可以使用“@”别名导入 - 但没有智能感知发生,我不能自动完成导入,也不能 ctrl + click
After adding a jsconfig.json file添加jsconfig.json文件后
{
"compilerOptions": {
"target": "ESNext",
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}
I am now able to import my components using the "@" and also have full intellisense on them and can CTRL+click them BUT, now I've lost the ability to import node_modules - lost all intellisense on that我现在可以使用“@”导入我的组件,并且对它们也有完整的智能感知,可以 CTRL+单击它们但是,现在我已经失去了导入 node_modules 的能力 - 失去了所有智能感知
So, if I use my vite/jsconfig I can ctrl+click/have auto complete on "@" alias but I lost my node_module import capabilities所以,如果我使用我的 vite/jsconfig,我可以 ctrl+click/在“@”别名上自动完成,但我失去了我的 node_module 导入功能
If I remove those vite.config alias configuration and remove jsconfig I get back node_module intellisense and lost my project's intellisense.如果我删除那些 vite.config 别名配置并删除 jsconfig,我会取回 node_module intellisense 并丢失我的项目的 intellisense。
What am I missing here?我在这里错过了什么? please help me figure this out.
请帮我弄清楚。
I've also removed any / every npm import extension just so that I can understand how this works我还删除了任何/每个 npm 导入扩展,以便我可以理解它是如何工作的
The problem that you have here because of jsconfig.json
file.由于
jsconfig.json
文件,您在这里遇到的问题。
The presence of jsconfig.json
file in a directory indicates that the directory is the root of a JavaScript Project.目录中存在
jsconfig.json
文件表示该目录是 JavaScript 项目的根目录。 The jsconfig.json file specifies the root files and the options for the features provided by the JavaScript language service ( vscode ). jsconfig.json 文件为 JavaScript 语言服务 ( vscode ) 提供的功能指定根文件和选项。
Most of the time you don't need it, but there is some examples where u can use it like IntelliSense customization .大多数时候你不需要它,但有一些例子你可以像IntelliSense 定制一样使用它。 examples
例子
jsconfig.json
is a descendant of tsconfig.json
, which is a configuration file for TypeScript. jsconfig.json
是tsconfig.json
的后代,后者是 TypeScript 的配置文件。 jsconfig.json
is tsconfig.json
with "allowJs"
attribute set to true
and since there is no actual compilation is required for JavaScript . jsconfig.json
是tsconfig.json
, "allowJs"
属性设置为true
,因为JavaScript不需要实际编译。 These attributes exist because jsconfig.json
is a descendant of tsconfig.json
(just)这些属性存在是因为
jsconfig.json
是tsconfig.json
的后代(只是)
So, not all options are the same here like target
:因此,并非所有选项都像
target
一样:
The
target
setting changes which JS features are downleveled and which are left intact.target
设置会更改哪些 JS 功能被降级,哪些保持不变。 For example, an arrow function () => this will be turned into an equivalent function expression if target is ES5 or lower.例如,如果目标是 ES5 或更低版本,箭头函数 () => this 将变成等效的函数表达式。
Changingtarget
also changes the default value of lib .更改
target
也会更改lib的默认值。
With that being said, vscode IntelliSense can be effected by those changes.话虽如此,这些更改会影响 vscode IntelliSense。 so if u remove it, everything will works as expected.
所以如果你删除它,一切都会按预期工作。
In other words target
can effect IntelliSense on jsconfig.json
.换句话说,
target
可以影响jsconfig.json
上的 IntelliSense。
For your case, you just need to add it as following:对于您的情况,您只需按以下方式添加:
jsconfig.json jsconfig.json文件
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}
vite.config.js vite.config.js
alias: {
'@/': path.resolve(__dirname, './src')
}
For more reading about jsconfig.json for vscode: here有关 vscode 的 jsconfig.json 的更多阅读:这里
In your jsconfig.json file, you can try adding the following configuration to enable IntelliSense for node modules:在您的 jsconfig.json 文件中,您可以尝试添加以下配置来为节点模块启用 IntelliSense:
{
"compilerOptions": {
"target": "ESNext",
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"*": ["node_modules/*"]
}
}
}
jsconfig.json jsconfig.json文件
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@/*": ["./*"],
"#c": ["./components/index"]
}
}
}
vite.conifg.js vite.config.js
{
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'#c': path.resolve(__dirname, './src/components'),
},
},
}
import module like this:像这样导入模块:
import { useMouseFollower, useMouse } from '@/hooks' // import hool from hooks/index.js
when type @/
,vscode give some path tips.当输入
@/
时,vscode 会给出一些路径提示。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.