This is the fifth day of my participation in Gwen Challenge

Today we will write an extension to Visual Studio Code, but this time it will be relatively simple. Although simple, you can still understand the basic process of writing a Visual Studio Code extension through this sharing

Setting up the development environment

Before you can start coding, you need to do some preparatory work to download and install Yeoman

npm i -g yo
Copy the code

You can install Yeoman globally through the NPM package management tool, use Yeoman to create a project, and there are plenty of good preset templates available for you to use, so you don’t have to spend too much time setting up projects. Then install generator-code to produce visual Studio code.

npm i -g generator-code
Copy the code

Create a directory

Use Yo to create a Visual Studio extension project

yo code
Copy the code

Then, as prompted, we chose the simple extension this time, which simply creates code snippets, similar to typing names to produce code.

? What type of extension do you want to create? New Code Snippets
Copy the code

So choose New Code Snippets

? Folder name for import or none for new: 
? What's the name of your extension? zisnippets
? What's the identifier of your extension? zisnippets
? What's the description of your extension? simple zi sinippets generator
Copy the code

According to the prompts we answer them one by one according to the actual project

? Language id: html
Copy the code

The language we choose is HTML, and we can append support for other languages to show that we define Snippets for that language.

{ "name": "zisnippets", "displayName": "zisnippets", "description": "simple zi sinippets generator", "version": "0.0.1", "engines" : {" vscode ":" ^ 1.35.0 "}, "categories" : [" Snippets "], "contributes" : {" Snippets ": [{" language" : "html", "path": "./snippets/snippets.json" } ] } }Copy the code

We can write ourselves in snippets/sinppets.json files

{
    "Zi Started Template": {
        "prefix": "zinav",
        "body": [
            "<div>",
            "\t<nav>",
            "\t\t${1:Title}",
            "\t<\/nav>",
            "<div>"
        ],
        "description": "Creates zi nav"
    }
}
Copy the code
  • Prefix means that we type zinav in the code editor to output the following code
  • ${1:Title} represents a placeholder for the user to enter, and 1 represents its ID, which can be defined in order. There are some global variables that let us use the file name, the time and so forth that you can see in the help documentation.

Well, almost less, so simple we how good intentions to release, but release is not difficult, and then you can release your own extension as needed. We can use some of the authoring components ourselves.

Copy the project folder into the Extension folder under Visual Studio Code.VS Code, and then restart the project to extend the directory and then you’ll see that we define the extension.

Test it, change prefix.