在VSCode中配置Deno下一代JavaScript运行时环境

13次阅读

在 VSCode 中配置 Deno 需安装官方 Deno 扩展、禁用 TypeScript 自带功能、运行 Deno: Initialize Workspace Configuration 生成设置,支持类型提示、运行、格式化与 import_map。

在 VSCode 中配置 Deno 下一代 JavaScript 运行时环境

在 VSCode 中配置 Deno 很简单,关键是装对插件、关掉冲突的 TypeScript 插件,并让编辑器信任 Deno 的类型定义。

安装 Deno 和官方扩展

先确保系统已安装 Deno(推荐用 deno install 或官网脚本)。然后打开 VSCode,去扩展市场搜 Deno,安装由 denoland 官方发布的那个(图标是青绿色 D)。别装错成第三方“Deno Support”之类的老插件。

  • Mac/Linux:终端运行 curl -fsSL https://deno.land/install.sh | sh,再把 bin 路径加进 shell 配置
  • Windows:用 PowerShell 运行 iwr https://deno.land/install.ps1 | iex
  • 装完后终端输入 deno --version 确认可用

关闭 TypeScript 自带的语言功能

VSCode 默认用内置 TypeScript 服务,会和 Deno 冲突——比如报错“Cannot find name ‘Deno’”,或类型提示不生效。必须手动禁用它:

  • Cmd+Shift+P(Mac)或 Ctrl+Shift+P(Win/Linux),输入 Preferences: Configure Language Specific Settings…
  • typescript,在打开的 settings.json 片段里加:
    "typescript.preferences.includePackageJsonAutoImports": "off"
  • 再全局设置里搜 typescript.suggest.autoImports,设为 false

启用 Deno 支持并初始化项目

在项目根目录下打开命令面板(Ctrl+Shift+P),运行 Deno: Initialize Workspace Configuration。这会生成一个 .vscode/settings.json,自动开启 "deno.enable": true 并配置好路径。

立即学习 Java 免费学习笔记(深入)”;

  • 如果 Deno 不在系统 PATH,可在设置里指定完整路径,例如:
    "deno.path": "/Users/xxx/.deno/bin/deno"
  • 新建一个 main.ts,写 console.log(Deno.cwd());,保存后应无红色波浪线,悬停 Deno 能看到类型定义
  • 支持直接运行:右键文件 → Run with Deno,或终端执行 deno run main.ts

可选:配合 import_map 和 lint/formatter

大型项目建议用 import_map.json 统一管理远程模块地址。VSCode Deno 插件原生支持它——只要在设置里配好路径,import 行就能跳转、补全、悬停查看。

  • 创建 import_map.json,内容类似:
    {"imports": {"fmt": "https://deno.land/std@0.224.0/fmt/mod.ts"}}
  • .vscode/settings.json 加:
    "deno.importMap": "./import_map.json"
  • 格式化用 deno fmt,Lint 用 deno lint,VSCode 默认绑定到保存时(需开启 "editor.formatOnSave": true

基本上就这些。不用装 typescript-deno-plugin,不用手动下载 @types/deno,也不用改 tsconfig.json——Deno 插件自己管类型、检查、运行,干净又轻量。

星耀云
版权声明:本站原创文章,由 星耀云 2025-12-14发表,共计1532字。
转载说明:转载本网站任何内容,请按照转载方式正确书写本站原文地址。本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。
text=ZqhQzanResources