vscode插件开发中文文档教程(2)——您的第一个扩展

vscode插件开发中文文档教程(2)------您的第一个扩展

原文链接:Your First Extension

作者:Microsoft

译者:倔强青铜三

前言

大家好,我是倔强青铜三 。是一名热情的软件工程师,我热衷于分享和传播IT技术,致力于通过我的知识和技能推动技术交流与创新,欢迎关注我,微信公众号:倔强青铜三。欢迎点赞、收藏、关注,一键三连!!!

您的第一个扩展

在本主题中,我们将教您构建扩展的基本概念。请确保您已安装 Node.jsGit

首先,使用 YeomanVS Code Extension Generator 来生成一个准备开发的 TypeScript 或 JavaScript 项目。

  • 如果您不想安装 Yeoman 以供后续使用,请运行以下命令:

    css 复制代码
    npx --package yo --package generator-code -- yo code
  • 如果您希望全局安装 Yeoman 以便轻松重复运行,请运行以下命令:

    css 复制代码
    npm install --global yo generator-code
    yo code

对于 TypeScript 项目,请填写以下字段:

bash 复制代码
# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below ###
# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Initialize a git repository? Y
# ? Which bundler to use? unbundled
# ? Which package manager to use? npm
# ? Do you want to open the new folder with Visual Studio Code? Open with `code`

在编辑器中打开 src/extension.ts 并按下 F5 或从命令面板 (Ctrl+Shift+P) 运行命令 Debug: Start Debugging 。这将在新的 Extension Development Host 窗口中编译并运行扩展。

在新窗口中从命令面板 (Ctrl+Shift+P) 运行 Hello World 命令:

您应该看到 Hello World from HelloWorld! 通知弹出。成功!

如果您无法在调试窗口中看到 Hello World 命令,请检查 package.json 文件并确保 engines.vscode 版本与已安装的 VS Code 版本兼容。

开发扩展

让我们更改消息内容:

  1. extension.ts 中将消息从 "Hello World from HelloWorld!" 更改为 "Hello VS Code"。
  2. 在新窗口中运行 Developer: Reload Window
  3. 再次运行 Hello World 命令。

您应该看到更新后的消息。

这里有一些您可以尝试的想法:

  • 在命令面板中为 Hello World 命令设置一个新名称。
  • 贡献 另一个命令,显示当前时间作为信息消息。贡献点是您在 package.json 扩展清单 中进行的静态声明,用于扩展 VS Code,例如添加命令、菜单或键绑定到您的扩展。
  • vscode.window.showInformationMessage 替换为另一个 VS Code API 调用,以显示警告消息。

调试扩展

VS Code 的内置调试功能使调试扩展变得简单。通过点击某一行旁边的空白处设置断点,VS Code 将命中该断点。您可以在编辑器中悬停变量,或在左侧的 Run and Debug 视图中检查变量的值。调试控制台允许您评估表达式。

您可以在 Node.js 调试主题 中了解更多关于在 VS Code 中调试 Node.js 应用程序的信息。

下一步

在下一个主题 扩展剖析 中,我们将更仔细地查看 Hello World 示例的源代码并解释关键概念。

您可以在以下链接找到本教程的源代码:github.com/microsoft/v...扩展指南 主题包含其他示例,每个示例都说明了不同的 VS Code API 或贡献点,并遵循我们在 UX 指南 中的建议。

使用 JavaScript

在本指南中,我们主要描述如何使用 TypeScript 开发 VS Code 扩展,因为我们认为 TypeScript 为开发 VS Code 扩展提供了最佳体验。但是,如果您更喜欢 JavaScript,仍然可以使用 helloworld-minimal-sample 跟随教程。

UX 指南

现在也是回顾我们的 UX 指南 的好时机,这样您可以开始设计扩展用户界面以遵循 VS Code 的最佳实践。

最后感谢阅读!欢迎关注我,微信公众号倔强青铜三。欢迎点赞收藏关注,一键三连!!!

相关推荐
LuciferHuang7 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing7 小时前
前端实习总结——案例与大纲
前端·javascript
天天进步20157 小时前
前端工程化:Webpack从入门到精通
前端·webpack·node.js
姑苏洛言8 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手8 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言8 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
hackchen9 小时前
Go与JS无缝协作:Goja引擎实战之错误处理最佳实践
开发语言·javascript·golang
你的人类朋友10 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手10 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3