📜 ⬆️ ⬇️

VS Code Extension - Snippets - I'll tell you how to save time

When working on a project for a long time, you often encounter the need to copy some part of a typical code and paste it into the right place. In such situations, snippets help out as it should be to the article. It is on their example that I will tell you how to build an extension for your own needs in VS Code.

Regarding the creation of extensions, VS Code has documentation , but here I will try to more concisely show the creation process.

I work on a Mac so the commands will be appropriate ...

And so what do we need?
')

The process of installing the necessary tools. Caution! Used Terminal!


  1. Installing Node.js (can be skipped if already there)
    • Install brew (can be skipped if already there)
      /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 

    • Installing Node.js
       brew install node 


  2. Installing VS code generator
     npm install -g yo generator-code 


Creating Extension Template


  1. Working all in the same console we will execute a command
     yo code 

    You will see the following picture:
    image
    JavaScript must be selected
  2. Then the mechanism will prompt you to fill in some more fields, after which the process of creating
    image

Congratulations. Template created. Let's go to the code.

Creating Extension


  1. Open the created folder. Its name coincides with the extension identifier that you specified earlier)
    image
  2. Create a snippets folder with an attached json file (om / s). The point is that for each vs editor language it was possible to apply its own set of snippets, in order to do this, you must register your snippet file for each of the languages ​​you require. For example, I use sql and js, so I will make myself 2 files
    image
  3. Register snippets in the Extension. We will register the Snippet files and link them to the languages ​​to which they will be applied. To do this, in the package.json file, add the following simple construction, which indicates which language corresponds to which snippet

    image

    Code for lazy
      "snippets": [ { "language": "csharp", "path": "./snippets/js_snippets.json" }, { "language": "sql", "path": "./snippets/sql_snippets.json" } ] 


  4. Body description of snippet The body must be in json format as previously indicated. For example, I created two templates for myself (snippet-a). One of them creates the body of the pl sql program, and the second simply contains the output snippet. Each snippet consists of:

    • json object snippet-a - determine its name;
    • prefix - team thanks to which we can find snippet;
    • body - the body that will be inserted into the editor;
    • description - the snippet description.

    image

    And again the code
      { "Default body": { "prefix": "defaultbody", "description" : "Declare dafault body", "body": [ "declare", "", " v_errorCode int;", " v_errorMessage nvarchar2(255);", "", "begin", "", " begin", "", " null;", " --Do something", "", " exception when others then", "", " v_errorCode = 101;", " v_errorMessage = substr(sqlerrm, 1, 200);", " ", " end;", "", " <<cleanup>>", " --dbms_output.put_line('Error code : '||v_errorCode);", " --dbms_output.put_line('Error message : '||v_errorMessage);", "end;" ] }, "Output": { "prefix": "output", "description" : "Dbms output", "body": [ "dbms_output.put_line('');" ] } } 


  5. Run It is done using the same vs code and then a new instance vs code is opened
    image
  6. Check. In the new instance, we need to choose the language of writing the sql code and start writing the prefix of one of the snippets corresponding to the selected language and this is what we will have
    image

    image

  7. Application. To leave the extension on your tarantas and so that it always works, you must move the folder with the project to
     user/.vscode/extensions/ 


It seems to be good? Save time, people ... Time is $

Source: https://habr.com/ru/post/455884/


All Articles