VSCode for Deno: 下一代JavaScript运行时

需依次完成五步配置：一、安装Deno CLI并验证版本；二、启用Deno官方扩展并初始化工作区；三、创建deno.json声明权限与检查规则；四、配置launch.json支持调试；五、禁用VSCode默认TS服务器以避免冲突。

如果您希望在 visual studio code 中高效开发 deno 应用程序，但尚未配置合适的扩展与工作区环境，则可能面临语法高亮缺失、类型提示失效或调试无法启动等问题。以下是完成 vscode for deno 集成的必要步骤：

本文运行环境：MacBook Pro，macOS Sequoia。

一、安装 Deno CLI 并验证版本

VSCode 的 Deno 支持依赖本地 Deno 运行时提供语言服务，必须先确保 Deno 已正确安装并加入系统 PATH。否则编辑器将无法启动 Deno 语言服务器。

1、打开终端，执行 curl -fsSL https://deno.land/install.sh | sh 安装 Deno。

2、将 Deno 二进制路径添加至 shell 配置文件（如 ~/.zshrc），添加行：export DENO_INSTALL="$HOME/.deno" 和 export PATH="$DENO_INSTALL/bin:$PATH"。

立即学习“Java免费学习笔记（深入）”；

3、重启终端后运行 deno --version，确认输出包含有效版本号（如 deno 1.45.0）。

二、启用 VSCode Deno 扩展

官方 Deno 扩展为 VSCode 提供 TypeScript 类型检查、自动导入、代码跳转等核心功能，必须启用且禁用冲突的 TypeScript 内置语言特性。

1、在 VSCode 扩展市场中搜索 denoland.vscode-deno，点击安装。

2、安装完成后，在任意 Deno 项目根目录下打开命令面板（Cmd+Shift+P），输入并执行 Deno: Initialize Workspace Configuration。

3、在生成的 .vscode/settings.json 中确认存在 "deno.enable": true 且无 "typescript.preferences.importModuleSpecifier": "auto" 类覆盖项。

三、配置 deno.json 以启用权限与检查

Deno 默认拒绝文件系统、网络等敏感操作，需通过 deno.json 显式声明权限策略，同时启用类型检查与 lint 规则，确保开发阶段即捕获潜在错误。

1、在项目根目录创建 deno.json 文件。

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

380

查看详情

2、写入基础配置：{"tasks": {"start": "deno run --allow-env --allow-read --allow-net mod.ts"}}。

3、添加检查规则段："lint": {"rules": {"tags": ["recommended"]}}, "fmt": {"options": {"semiColons": true}}。

四、设置调试配置 launch.json

VSCode 调试器需通过专用配置连接 Deno 运行时调试端口，否则断点无法命中、变量无法查看。该配置必须指定 --inspect-brk 标志并匹配正确的脚本路径。

1、在项目中创建 .vscode/launch.json，内容起始为 {"version": "0.2.0", "configurations": [。

2、添加调试条目：{"name": "Deno Run", "type": "pwa-node", "request": "launch", "cwd": "${workspaceFolder}", "runtimeExecutable": "deno", "runtimeArgs": ["run", "--inspect-brk", "--allow-all", "mod.ts"], "attachSimplePort": 9229}。

3、保存后，在 mod.ts 文件中设断点，按 Cmd+F5 启动调试会话，确认控制台输出含 Debugger listening on ws://127.0.0.1:9229/...。

五、禁用默认 TypeScript 服务器

VSCode 内置 TypeScript 语言服务器会与 Deno 语言服务器争夺对 .ts 文件的控制权，导致类型提示错乱或 import 提示失效，必须显式关闭。

1、打开 VSCode 设置（Cmd+,），搜索 typescript.preferences.disableSuggestions，勾选启用。

2、在用户设置 JSON 中添加："typescript.preferences.includePackageJsonAutoImports": "off"。

3、执行命令 TypeScript: Restart TS Server，随后重新打开 .ts 文件，确认状态栏显示 Deno 而非 TypeScript。

以上就是VSCode for Deno: 下一代JavaScript运行时的详细内容，更多请关注php中文网其它相关文章！