关于前端:打造一款属于自己的VScode插件完整版本

简介

打造一款专属你的 vscode 的插件，这一期将分享 VScode 插件的创立，上面我会联合我集体开发的 JS TO TS 来解说。VScode 插件自身并不难，难在你想实现插件的想法。在你日常开发遇到的繁冗的操作都应该尝试去思考是否应用插件来帮你缩小工作量

用法

第一步:（装置 yo  generator-code 工具）

npm install -g yo generator-code

第二步:  (创立 Vscode 我的项目, 设置一个 TS 我的项目)

yo code

第三步: 目录介绍 (目录清晰在我的项目中也是很重要的)

第四步:（定义命令、激活命令）

// package.json 文件在 contributes 命令申明
  "contributes": {
    "commands": [
      {
        "category": "Swagger To Typescript",
        "command": "swagger.to.typescript.object.convert",
        "title": "%js.to.ts.object.to.typescript%"
      },
      ...
    ]
   }
// 以及申明激活命令
  "activationEvents": [
     // onCommand 在 vscode 高于 1.75 能够不显示，vscode 会主动注入
    "onCommand:swagger.to.typescript.convert",
    "onCommand:swagger.to.typescript.object.convert",
    "onStartupFinished"
  ],

package.json 文件申明了命令之后，在 extension.ts 文件中咱们就能够注册这些命令，并且每个命令都有对应解决的事件

export function activate(context: vscode.ExtensionContext) {
  try {
    // *********************
    // Command Register
    // *********************

    const mainInstant = new Main();
    const defaultDisposable = commands.registerCommand(
      COMMANDS.SWAGGER_TO_TYPESCRIPT_CONVERT,
      mainInstant.executeConverts,
      mainInstant
    );
    
    // *********************
    // Destroy
    // *********************

    context.subscriptions.push(defaultDisposable,);
  } catch (error) {console.log("error:", error);
  }

第五步:（vscode 配置面板）

// package.json 类型申明
"configuration": [
  {
    "type": "object",
    "title": "JS To TS",
    "properties": {
      "openTemporaryFile": {
        "type": "boolean",
        "default": true,
        "description": "%js.to.ts.configuration.openTemporaryFile.description%"
      },
      ...
    }
  }
],

// 获取配置的值
getConfig(config: CustomConfig): boolean | string {return workspace.getConfiguration().get(config) || false;
}

成果如下：

第六步: (配置 explorer 右键菜单)

"explorer/context": [
  {
    "command": "file.teleport.openFile",
    "group": "3_compare",
    "when": "!explorerResourceIsFolder"
  }
],

第七步: (配置 context 右键菜单以及子菜单)

"menus": {
  "editor/context": [
    {
      "submenu": "swagger.to.typescript.context",
      "group": "1_modification"
    }
  ],
  "swagger.to.typescript.context": [
    {
      "command": "swagger.to.typescript.object.convert",
      "group": "1_modification"
    },
    {
      "command": "swagger.to.typescript.convert",
      "group": "1_modification",
      "when": "editorHasSelection"
    }
  ]
},
"submenus": [
  {
    "id": "swagger.to.typescript.context",
    "label": "%js.to.ts%"
  }
],

第八步:（快捷键设置）

 "keybindings": [
      {
        "command": "swagger.to.typescript.object.convert",
        "key": "ctrl+shift+j",
        "mac": "ctrl+shift+j"
      },
      {
        "command": "swagger.to.typescript.convert",
        "key": "ctrl+shift+k",
        "mac": "ctrl+shift+k",
        "when": "editorHasSelection"
      },
      {
        "command": "swagger.to.typescript.add.comments",
        "key": "ctrl+oem_7",
        "mac": "ctrl+oem_7",
        "when": "editorTextFocus && !editorReadonly"
}

第九步:（左侧面板配置，反对树形或者 webview 的模式）

// package.json 申明
"viewsContainers": {
  "activitybar": [
    {
      "id": "package-explorer",
      "title": "%js.to.ts%",
      "icon": "images/outline-recovery-convert.svg"
    }
  ]
},
"views": {
  "package-explorer": [
    {
      "id": "api.to.ts",
      "name": "","type":"webview"
    }
  ]
}

// extension.ts 中 webview 注册
const provider = new ApiToTsViewProvider(context.extensionUri, mainInstant);
const apiToTsDisposable = window.registerWebviewViewProvider(
  ApiToTsViewProvider.viewType,
  provider
);

// sidebar.ts 侧边栏(性能不在此形容，详情看 github 仓库)
export class ApiToTsViewProvider implements vscode.WebviewViewProvider {...}

第十步: 语言国际化

1. 申明 package.nls[.~].json 文件。定义键值对
{"js.to.ts.object.to.typescript": "Object To Typescript",}

2. package.json 间接通过 %key 值 % 申明须要转换的文本

3. 其余中央，编写 localize.ts 文件编写（此办法专用，须要的小伙伴间接复制即可）export class Localize {...}
// 应用
localize('...')

第十一步: 日志零碎

// 报错时，右侧弹出小窗口。增加一个 OpenIssue，用户就能够间接跳到你的 github issue 给你提对应谬误
export class Logger implements ILog {...}

PS: 简化发问流程也是很重要的用户体验考量

第十二步: 调试

在以后我的项目按 F5 即可进入调试界面。想关上 vscode 的控制台Terminal -> Toggle Developer Tools

第十三步: 公布

将 vscode 代码打包成.vsix 文件，上传到 vscode 插件市场即可

形式一: vsce publish（须要验证）形式二: 
    1. vsce package 打包插件为.vsix 文件
    1. 登录 vscode 插件市场
    2. publish extensions
    3. 在插件 tab 右击 抉择 update 即可

第十四步: 数据报表查看

小技巧: 能够通过查看 network 中的 stat 来判断插件的欢送水平、数据表报只显示 install 数据，然而没有 uninstall。用户应用中遇到问题很多时候间接卸载了 ( 正视 uninstall 数量，能力发现插件的有余，从而自驱优化)

总结:

下面就是 Vsocde 插件开发的残缺流程，涵盖了 装置 | 创立我的项目 | 目录剖析 | 定义命令、激活命令 |vscode 配置面板| 配置 explorer 右键菜单 | 配置 context 右键菜单以及子菜单 | 快捷键设置 | 左侧面板配置，反对树形或者 webview 的模式 | 语言国际化 | 日志零碎 | 调试 | 公布 | 数据报表查看 还是最后那句话，开发插件自身并不难，难的是你的想法以及如何去联合你的工作内容。能够 VScode 搜寻到 JS TO TS 装置试用一下

补充阐明:

1. VScode 官网也提供了一些 examples 案例，遇到某些写法不会的同学能够参考它提供的案例 ( 任何时候官网是最好的导师)
2. 上文只是介绍了 vscode 的开发，具体 JS TO TS 如何实现的不会在这篇文章解说，有趣味的同学能够 fork 源码查看。插件也会继续更新，对于插件有任何改良的想法都能够给我提 issue 哦
3. 如果有闲暇工夫或者有读者须要。我会在后续解说一下如何通过 @babel 性能实现 JS TO TS 插件
4. 剖析了比拟有名的 JSON to TS 和json2ts的痛点 (其在 vscode 中下载量都在几十万的数量)。优化了其不满足的中央例如 不反对本人援用本人 、 拓展性不够强 (复制还是关上临时文件展现类型、不提供前缀自定、反对正文...)、 仅反对 json 数据或者 get 申请