preface

This article provides a quick and efficient way to build your own vscode plug-in. It is not difficult to get started, but the pit is more, in order to avoid more people to step on the pit, so write to avoid the pit. This article is aimed at the novice, the building Lord also spent a long time to start to step on the pit. At the end of the article is the Github repository address, which you can clone to use as a template for your later snippets plug-in.

Environment to prepare

  • node
  • npm
  • yeoman sudo npm i yo -g
  • gernerator-code sudo npm i gernerator-code -g

Developer Account Application

Click On Visual Studio Team Services, click on the top of the register now, register your account, you can directly log in with your GitHub account.

  1. Sign up and log in to Azure DevOps.
  2. Select or create a new organization.
  3. Create a new Project under this organization.
  4. The above three steps are all to obtain the token of the developer, which is shown below:

5. Click on theNew TokenNote that the token must be selected from the drop-down listall accessible organizationsAnd then click on the lower right cornerShow all scopesfindMarketplacechooseManage.6. Register vscode plugin developer (publisher) :Click here to. The registration guarantees that the name and ID are the same, and you only need to fill in these two.

Project structures,

Project initialization

  1. The input terminalyo code.
  2. The options are set as follows: Language Select javascript and the name is the name of your extension.

Project reform

Drag the project folder yc-charts-code-snippets (the folder with your extension name) into vscode to open. Do the following modifications:

  1. Change package.json to look like this:
{
  "name": "yc-charts-code-snippets"."displayName": "yc-charts-code-snippets"."description": ""."version": "0.0.1".// Developer name, very important!!
  "publisher": "yuanchen-ljx"."engines": {
    "vscode": "^ 1.56.0"
  },
  "categories": [
    "Snippets"]."contributes": {
    "snippets": [
      // Smartly prompt code snippets in.js,.jsx,.ts,.tsx files
      {
        "language": "javascript"."path": "./snippets/snippets.code-snippets"
      },
      {
        "language": "javascriptreact"."path": "./snippets/snippets.code-snippets"
      },
      {
        "language": "typescript"."path": "./snippets/snippets.code-snippets"
      },
      {
        "language": "typescriptreact"."path": "./snippets/snippets.code-snippets"}},// Warehouse address. Very important!!
  "repository": {
    "type": "git"."url": "https://github.com/ljx94nb/yc-charts-code-snippets.git"
  },
  // The extension introduces the MD document address, also very important!!
  "homepage": "https://github.com/ljx94nb/yc-charts-code-snippets/blob/master/README.md"
}
Copy the code
  1. Modify the readme. md in your project directory, however you like!! Otherwise generating the Package will fail.

coding

The code here is not to write JS, but to write json configuration, where to write? In the snippets.code-snippets file in the project’s Snippets folder, write:

{
  "FormTable": {
    "prefix": "ycft"."body": [
      "import React from 'react';"."import YcCharts from 'xxx';".""."function App() {"." const ${1:treeConfig} = {"." // config"." ${2:primaryColumn}: {},"." ${3:columnWidth}: 120,"." ${4:indicators}: [],"." ${5:leftDimensions}: [],"." ${6:topDimensions}: [],"." ${7:topDimensionDataSource}: {},"." ${8:leftDimensionDataSource}: {},"." ${9:dataSource}: {},"." ${10:operatorColumn}: {},"." ${11:filters}: {},"." ${12:actions}: [],"." ${13:downloadCfg}: {},"." // ${14:onSort}: (colIndex, sortOrder) => {},"." // ${15:decorateValue}: (indicatorKey, value) => {}"."};.""."  return <YcCharts.FormTable {...${16:treeConfig}} />;"."}".""."export default App;"]."description": "Code snippet for 'yc-charts FormTable'"}}Copy the code

The code snippet above is an example of a component usage that I wrapped myself. ${1:treeConfig} indicates the TAB key will jump to the statement, the number represents the jump order, note: there is no space after the colon.

debugging

Simply developing snippets of code makes testing and debugging very simple:

  • Start by customizing the global code snippet.

  • Select New Global snippet file.

  • After creating the file name, you will get the following code to test it.

  • command + shift + DEnable debug mode.
  • Click on theExtensionNext to the green triangle, open the extension development host.
  • Create an appropriate file type such as test.js in the extension development host.
  • Test your own written prefix. The snippet I’ve generated here is sample code for the component I wrapped myself.

The generated code snippet is as follows:

import React from 'react';
import YcCharts from 'xxx';

function App() {
  const treeConfig = {
    // config
    primaryColumn: {},
    columnWidth: 120.indicators: [].leftDimensions: [].topDimensions: [].topDimensionDataSource: {},
    leftDimensionDataSource: {},
    dataSource: {},
    operatorColumn: {},
    filters: {},
    actions: [].downloadCfg: {},
    // onSort: (colIndex, sortOrder) => {},
    // decorateValue: (indicatorKey, value) => {}
  };

  return <YcCharts.FormTable {. treeConfig} / >;
}

export default App;
Copy the code

packaging

The terminal generates a packed binary after running the command vsce package.

release

Terminal run commandvsce publishAfter the command is executed, you need to wait for a few minutes. After that, you will receive a successful email for publishing your account. Congratulations on successfully publishing a vscode plug-in!Click on the url marked above to see a view of your plugin’s access and download statistics. If it is 404, please wait a few minutes

conclusion

The code snippets plug-in from vscode is the easiest one to implement and is a good example for beginners. You can see there’s really no coding, but there are a lot of holes in it. The purpose of writing this article is to let fewer people to step on the pit, hope to code friends help ~. Github Repository for this article project: click here.