关于前端:打造一款属于自己的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申请