VSCode should be the mainstream front-end development IDE, master some VSCode plug-in development methods, for their own projects tailored to some plug-ins, can greatly improve the efficiency of daily development.

Demand background

Our project needs enumerations of constants, which are stored in the back end. For example, an order has multiple states: Pending: 1, Done: 2, and the page needs to rely on these states for logical judgment. Our project uses Typescript. In order for our code to have hints and to be more semantic, we need to maintain a global Typescript enumeration (Enums) value that updates incrementally, so to save the manual work, Develop a VSCode plug-in to do incremental updates. So let’s look at the effect

Introduction to VSCode plug-in

VSCode is a lightweight code editor from Microsoft, free and powerful, JavaScript and NodeJS support is very good, VSCode itself is implemented by the browser, so its plug-in needless to say is also based on HTML+JS and other front-end technology implementation. In form, it is a VSIX file similar to an NPM package, but with special functions implemented according to special specifications.

Concrete implementation scheme

Next, there is not too much API use method, this article directly introduces the specific implementation method and the API used, specific API documents can be interested to see the tutorial.

1 Execution Entry

The default plug-in entry file is extension.js, which writes the following code

module.exports = context= > {
  context.subscriptions.push(
    registerCommand(operation.generateEnums.cmd, uri= > {
      updateEnums({ context })
    })
  )
}
Copy the code

We register a command called generateEnums and then execute the updateEnums method.

2 Right-click to trigger the command

We want to realize the function of launching commands with the right mouse button, we need to do the following configuration in the package.json file

"contributes": {
  "commands": [{"command": "extension.generateEnums"."title": "Generate Enums"}}],Copy the code

3 updateEnums function implementation

This function is the heart of the tool logic

module.exports = async ({ editor }) => {

  // Keep the original TS code
  let preTsCode = ' '
 
  // Get the code for the file with the right mouse button
  let currentEditor = getEditor(editor)
  ...
  // Iterate through each line of code, using regular expressions to find the key value of the enumerated value from the code, and convert the page code into an object to compare with the data returned by the interface in the next step
  for (let i = 0; i < lineCount; i++) {
    const enumsKeyRegExp = new RegExp(/ (? <=enum).*? (? = {) /)
    const enumsValueRegExp = new RegExp(/. *? (? =) /)
    const matchResult = lineText.match(enumsKeyRegExp)
    keyValue[tempEnumsKey][key] = value && value[0].trim()
  }
  // Get the remote data and compare the local and remote data
  try {
    // Get data from plug-in configuration here
    const request = axios.create({
      headers: { ...vscode.workspace.getConfiguration().get('extension.headers')}})const enumApi = vscode.workspace.getConfiguration().get('extension.enumApiUrl')
    Object.keys(res).forEach(item= > {
      // The backend returns data to compare with the current file code data. }})// Merge the current page code with the added code
    const result = preTsCode + tsCode
    fs.writeFile(currentEditor.document.uri.fsPath, result, err= > {
      // Write the converted code to a file. }}})Copy the code

The overall logic is as follows:

  1. Get the code of the file operated by right mouse click
  2. The code uses regular expressions to convert enumerated values into key-values that can be later compared with the data returned by the interface
  3. The data returned by the backend is obtained from the API address configured by the plug-in
  4. Compare the data returned by the back end to the data generated in Step 2, and if not, perform incremental updates. (This step only compares the existence of Key values, not values.)
  5. Convert the updated data into TS code and write it back to the file

3.1 Plug-in Installation Method

The plug-in has been published to the VSCode store

3.2 Setting The Configuration Information

If you want your plug-in to receive configuration information, add it to the package.json file

  "configuration": {
    "type": "object"."title": "WMS-ENUMS-GENERATION"."properties": {
      "extension.enumApiUrl": {
      "type": "string"."default": ""."description": "Please input your project's enums api(example: http://xxx.com/api/apps/xxx/enums)"
      },
      "extension.headers": {
         "type": "object"."default": ""."description": "{csrftoken: xxx, token: xxx}"}}}Copy the code

You can then see where the information was entered on the plug-in configuration page

3.3 Acceptable data structure returned by the back end

response: {
  data: {
    ABCClassification: {
      A: 1.B: 2.C: 3.EXCLUDED: 5.SA: 4.UNDEFINED: 0
    },
    AdjustTaskStatus: [{key: "Created".value: 1},
     {key: "Pending".value: 2},
     {key: "Locked".value: 21}},message: "success".retcode: 0
}
Copy the code

Considering our own business characteristics, the plug-in currently supports the return of key-value or a data, but the data is an object represented by Key and Value respectively.

4 summarizes

Developing a custom VSCode plug-in helps us to be more efficient. The tool does have some problems with generality in some areas, but it was originally intended to be a custom tool within the project. In terms of data reception, if there is a better way of interaction, I hope you can also guide in the comments section below. Hopefully, this article gave you some ideas and some steps and ideas for developing a plug-in.

reference

VSCode plug-in overview