[VS Code Extension] Write a code snippet management plugin (I): introduction and interface building

@

• [VS Code Extension] Write a code snippet management plugin (I): introduction and interface building
• [VS Code extension] write a code snippet management plug-in (II): functionality implementation

When writing code, you often have to enter duplicates, although VS Code provides acode segmentfunctionality, but when creating custom code snippets, you need to write JSON-formatted configurations, these JSON files are in the user folder, there is no unified interface to manage them, and advanced functionality such as tab-completion is not necessary for me.

Variable mappings can be generated automatically when inserting snippets by using built-in mapping rules.VS Code comes with a single function, I need a custom variable mapping function, I can customize Key-Value as a flexible configurable variable mapping.

VS Code provides a set ofAPIThe VS Code plug-ins (or extensions) are used to customize or enhance the functionality of the software and are called VS Code plug-ins (or extensions).

I am writing a code snippet management VS Code extension with variable mapping based on the above considerations:SnippetCraft。

VS Code Extension Mechanism

First of all, you need to have a general understanding of the extension mechanism of VS Code, VS Code can be viewed as a framework that can be imagined as the dashboard of your car, such as the speedometer dashboard, the center control screen, lights, air conditioning controls, and other independent panels are located in the placeholder.

VS Code these parts of the framework, officially known as the "container", the entire VS Code consists of six containers, respectively: activity bar, the main sidebar, editor, auxiliary sidebar, panel, status bar.

Each container contains buttons provided by the extension, or areas for views. Similar to control panels on dashboard controls, such as light panels with light switches, some are reserved slots. Use these reserved slots by adding modifications.

These areas are officially called "items". Commonly used items are sidebars, editors, status bars, and toolbar areas on panels. Extensions can add items to various containers.

In addition, the VS Code extension provides commonly used features such as data persistence, file selector, input boxes, notification pop-ups, web views, and more.

VS Code extension is a basic feature, through the extension can meet all the functionality of the software enhancement, including the built-in core functions, such as file management, search, Git, debugger, which are realized through the extension.

VS Code disables custom styling of UI elements in extensions for consistency of experience.

Project Build

Make sure you have . Use Yeoman and the VS Code Extension Builder to quickly create extension projects. First install Yeoman and the Builder:

npm install -g yo generator-code
yo code

The project automatically creates a HelloWorld extension.

If you create the project manually, you can refer to the following directory structure

my-VS Code-extension/
├── .VS Code/
│   └── 
├── src/
│   └── 
├── .gitignore
├── 
├── 
├── 

To prepare the icon, the extension needs a product presentation icon. The icon is a 128x128 pixel PNG format file
Prepare activity bar button icon with 24x24 pixels icon centered in a 50x40 pixels block with fill color 'rgb(215, 218, 224)' or '#d7dae0'. SVG format icons are recommended.

The VS Code extension is available in theContribution points" are used to describe what the extension can add to VS Code.official account

existdocumentationcontributesnode, we add all the commands used by the extension:

Command	manipulate
	Code Snippet Search
	Insert code snippet
	Remove all code snippets
	Creating Code Snippets
	Refresh code snippet list
	Add code snippet
	Editing code snippets
	Edit code snippet title
	Deleting code snippets
	Insert code snippet
	Add Mapping
	Refresh Mapping List
	Delete Mapping
	edit mapping

Creating UI elements

Activity bar button

Clicking this button will open the main sidebar view of the VS Code extension. The icon and name are generally the product's logo and name

existdocumentationcontributesnode, add the following:

"viewsContainers": {
      "activitybar": [
        {
          "id": "snippsView",
          "title": "Snippet Craft",
          "icon": "./"
        }
      ]
    }

Finish adding the Activity Bar button

Main Sidebar View

List and mapping table for visualizing code snippets in the main sidebar

existdocumentationcontributesnode, add the following:

"views": {
    "snippsView": [
    {
        "id": "",
        "name": "Snippets List"
    },
    {
        "id": "", "name".
        "name": "Mapping Table"
    }
    ]
},

Finish adding the main sidebar view

Main Sidebar Toolbar Buttons

existdocumentationcontributesnode, add the following:

"view/title": [
    {
        "command": "",
        "group": "navigation",
        "when": "view == "
    },
    {
        "command": "",
        "group": "navigation",
        "when": "view == "
    },
    {
        "command": "",
        "group": "navigation",
        "when": "view == "
    },
    {
        "command": "",
        "when": "view == ",
        "group": "navigation"
    },
    {
        "command": "",
        "when": "view == ",
        "group": "navigation"
    }
    
    ]
},

Finish adding toolbar buttons to the main sidebar

Sidebar context menu

existdocumentationcontributesnode, add the following:

"view/item/context": [
    {
        "command": "",
        "group": "snippet",
        "when": "view == "
    },
    {
        "command": "",
        "group": "snippet",
        "when": "view == "
    },
    {
        "command": "",
        "group": "snippet",
        "when": "view == "
    },
    {
        "command": "",
        "group": "snippet",
        "when": "view == "
    },
    {
        "command": "",
        "when": "view == ",
        "group": "kveditor"
    },
    {
        "command": "",
        "when": "view == ",
        "group": "kveditor"
    }
    ],

Finish adding the sidebar context menu

Editor context menu

Select "Insert Snippet" from the context menu that pops up when you right-click in the editor area to select an existing snippet to insert at the current cursor location.

When there is text selected in the editor, the context menu's "Create Snippet" will be displayed, and when clicked, the selected text will be stored as a code snippet.

"menus": {
    "editor/context": [
    {
        "command": "",
        "when": "editorHasSelection",
        "group": "snippet"
    },
    {
        "command": "",
        "group": "snippet"
    }
    ],

Finish adding the editor context menu

Project Address

Github:snippet-craft