VSCode 拓展程序学习线路,帮助引导学习方向。本文主要内容包括快速起步以及增强能力清单。后续会持续更新更多的学习内容。
快速起步
安装命令行脚手架工具
npm install -g yo generator-code
运行命令创建拓展程序项目
yo code
# ? 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? Yes
# ? Bundle the source code with webpack? No
# ? Which package manager to use? npm
# ? Do you want to open the new folder with Visual Studio Code? Open with `code`
根据提示选择你想创建的项目类型和相关功能选项。
使用 VSCode 编辑器来开发拓展程序
- 下载最新版本的 VSCode
- 开发前确保 VSCode 更新到最新版本
- 打开 VSCode ,并打开项目的文件夹。可以通过在命令行中运行
code [path to your project]来打开项目,如:code ./example-extension - 按下
F5按键即可启动项目 - 更改项目代码之后可以重新运行项目,或者在 VSCode 中 按下
ctrl + shift + p运行编辑器命令 Developer: Reload Window,即可看到新内容。 - Debugger 调试就和平时用 VSCode 调试 Node.js 一样,有需要可以参考 Node.js Debugging Topic
VSCode 拓展程序项目的基本构造
.
├── .vscode
│ ├── launch.json // 用于启动和调试扩展的配置
│ └── tasks.json // 用于编译 TypeScript 的构建任务的配置
├── .gitignore // 忽略构建输出和 node_modules
├── README.md // 扩展功能的描述 markdown
├── src
│ └── extension.ts // 扩展源代码入口文件
├── package.json // 扩展清单
├── tsconfig.json // TypeScript 配置
- Extension Manifest : 每个 VS Code 扩展都必须有一个 package.json 作为其扩展清单。
- Extension Entry File: 入口文件
// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode';
// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {
// Use the console to output diagnostic information (console.log) and errors (console.error)
// This line of code will only be executed once when your extension is activated
console.log('Congratulations, your extension "helloworld-sample" is now active!');
// The command has been defined in the package.json file
// Now provide the implementation of the command with registerCommand
// The commandId parameter must match the command field in package.json
let disposable = vscode.commands.registerCommand('helloworld.helloWorld', () => {
// The code you place here will be executed every time your command is executed
// Display a message box to the user
vscode.window.showInformationMessage('Hello World!');
});
context.subscriptions.push(disposable);
}
// this method is called when your extension is deactivated
export function deactivate() {}
增强能力
Extension Guidelines 编辑器的构造说明
Extension Capabilities 扩展能力
Guides & Samples 指南和相关项目例子
Testing and Publishing 测试和发布
- 如何为您的扩展添加集成测试
- 如何将你的扩展发布到 VS Code Marketplace
- 如何为您的扩展设置持续集成
附录
都看到这里了,还不点个赞吗?
消化官方内容不易,希望对你有所帮助。
后续会持续更新相关的学习内容,并将最新的文档链接附到此处。