vscode学习之命令行扩展

vscode 学习之命令行扩展

命令行是 vscode 最常用的功能，命令行扩展是 vscode 自身扩展性不可或缺的一部分

组件的创建及运行

创建

通过 yeoman 和 vscode extension generator 初始化一个扩展

npm install -g yo generator-code
yo code

TypeScript 是 vscode 实现的特点之一，推荐选择 Typescript 扩展模版体验 ts 编码的别样感受

运行

• vscode 编辑器中打开创建好的项目
• F5 或者点击 debug 面板开始调试进入调试模式。按照官方文档描述，此时会自动打开一个新的 vscode 面板，新开的 vscode 会识别当前调试的插件但是自己在此过程中遇到一个问题：launch.json中配置的前置的npm: watch任务执行阻塞，未能打开新的面板，需手动重启一次watch任务（执行⇧⌘B）,重新进入调试模式（执行⇧⌘F5）
• F1 或者 ⇧⌘P 打开命令输入，执行 Hello World, 界面右下角会弹出 Hello World 信息框。第一个命令行扩展完成
• ln -s currentFolder ~/.vscode/extensions/extensionName ，感受插件安装后的效果

核心文件结构

package.json

描述插件入口信息，包括命令扩展文件入口定义，命令显示注册，命令配置

src/extension.ts

插件的执行逻辑

out/*

ts编译后的目标目录

.vscode

vscode 常规配置，定义调试、任务，编辑器设置等

.vscodeignore

提交至 vscode marketplace 忽略的文件

命令行步骤

• vscode 提供了 deactivate 和 activate 两个切面方法

• 在 activate 通过名称注册命令，定义命令执行的逻辑。如下，定义了展示编辑器选中内容信息的逻辑：

      let editor = vscode.window.activeTextEditor;
      if (!editor) {
          return;
      }
      let section = editor.selection;
      let text = editor.document.getText(section);
  
      // Display a message box to the user
      vscode.window.showInformationMessage(text);

• 编辑器中通过 package.json 中 contributes.commands 列表中定义的命令信息（包含名称属性command和标题属性title的对象）执行命令
• 如果注册命令在 package.json activationEvents 存在，则执行对应的逻辑

个人理解有差错，欢迎指正 😊