VSCode 插件开发:一键开启完整智能提示 终极配置

你现在遇到的问题:vscode.window.xxx 没有自动提示、没有类型检查 ,这是 TypeScript 类型没配置对 导致的。

我给你 最简、最稳、直接能用 的配置,复制粘贴就搞定。


一、3 步立刻开启智能提示(1 分钟搞定)

1. 安装官方类型库(必须)

在插件项目里打开终端运行:

复制代码
npm install --save-dev @types/vscode

这个包就是 VSCode 所有 API 的智能提示文件,装了就有提示。

2. 确保 tsconfig.json 正确(复制下面这个)

你的项目根目录必须有 tsconfig.json,内容如下:json

javascript 复制代码
{
    "compilerOptions": {
        "module": "commonjs",
        "target": "ES2020",
        "outDir": "out",
        "rootDir": "src",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "typeRoots": ["node_modules/@types"]  // 关键:让TS找到类型
    },
    "exclude": ["node_modules"]
}

3. 确保 package.json 引擎正确

json

复制代码
{
    "engines": {
        "vscode": "^1.80.0"  // 随便一个新版本就行
    }
}

二、你的代码 马上就能智能提示

复制代码
import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    // 下面这行,现在会有:
    // 自动补全、类型提示、参数提示、错误检查
    const disposable = vscode.window.onDidChangeActiveTextEditor(async (editor) => {
        if (editor) {
            console.log(editor.document.uri.fsPath);
        }
    });

    context.subscriptions.push(disposable);
}

现在你会获得:

vscode. → 自动弹出所有 API✅ onDidChangeActiveTextEditor → 自动补全✅ editor → 自动提示 .document / .selection 等✅ 写错名字 → 直接红线报错


三、如果还是没提示?99% 是这 2 个原因

1. VSCode 没有选用项目的 TypeScript 版本(最常见)

解决方法:

  1. Ctrl + Shift + P
  2. 输入 Select TypeScript Version
  3. 选择 Use Workspace Version

2. 重启 VSCode

plaintext

复制代码
Ctrl + Shift + P → Reload Window

四、一句话总结

VSCode 插件智能提示 = 安装 @types/vscode + 正确 tsconfig + 使用工作区 TS 版本

你按我上面 3 步配置,立刻拥有完整智能提示,和写 C# 一样舒服!

相关推荐
VidDown5 天前
VidDown 工具站:免费、本地优先的开发者工具箱
javascript·编辑器·音视频·视频编解码·视频
摇滚侠5 天前
IDEA 创建 Java 项目 手动整合 SSM 框架
java·ide·intellij-idea
霸道流氓气质5 天前
Trae IDE 新手入门指南
ide
VidDown5 天前
显卡处理视频技术详解:从硬解码到 NVENC,GPU 如何让视频处理起飞?
javascript·编辑器·音视频·视频编解码·视频
夜猫逐梦5 天前
【UE基础】03.蓝图与编辑器工作流
编辑器·ue·蓝图·ue编辑器
VidDown5 天前
视频帧率技术详解:从 24fps 到 120fps,帧率如何影响你的观看体验?
网络·网络协议·编辑器·音视频·视频编解码·视频
爱就是恒久忍耐5 天前
VSCode里如何比较2个branch
ide·vscode·编辑器
意法半导体STM325 天前
【官方原创】如何为STM32CubeMX2配置Visual Studio Code配置方案
vscode·stm32·单片机·嵌入式硬件·策略模式·stm32cubemx·嵌入式开发
bloglin999995 天前
vscode中可视化的合并分支,在“合并编辑器中解析”中“与基线进行比较”是什么意思
ide·vscode·编辑器
终将老去的穷苦程序员5 天前
IntelliJ IDEA 的安装教程
java·ide·intellij-idea