This is the seventh day of my participation in the August More text Challenge. For details, see: August More Text Challenge

1. The background

In our daily development process, there will be a lot of duplicate code in the project, we need to copy and paste frequently. But is there a way to solve this problem by copying and pasting duplicate code that doesn’t encapsulate an underlying component or a business component or code that doesn’t encapsulate a component? Yes, it’s customizing snippets for a project. Snippets, or snippets, as you know, you type in a simple word and bring out a lot of code at once. You can also create your own snippets directly in vscode. Snippets can customize their own private snippets as well as custom snippet plug-ins. For use by the entire team. Today we are going to release one of our own code plug-ins.

Function of 2.

One-click generation of a set code template fragment.

3. The purpose of

As a Chinese saying goes, “to do a good job, we must sharpen our tools first.” VsCode is used to extract common code fragments in the project to improve research and development efficiency and reduce unnecessary paste and copy.

4. Program implementation

1. Environment preparation

Make sure node.js and Git are installed, then install Yeoman and VS Code Extension Generator using the following command:

npm install -g yo generator-code
Copy the code

2. Environment construction

yo code
Copy the code

You can use Yo Code to create plug-ins, themes, language support, code snippets, language support, keyboard maps, and plug-in packages. In this article, we only discuss code snippets.

Configuration of 3.

// package.json
"contributes": {
        "snippets": [{"language": "".// Can set the code snippet in which files can take effect, do not fill in all effective
                "path": "./snippets/snippets.code-snippets"}}]Copy the code
{
  "React template": {
        "prefix": "template"."body": [ 
            "/* eslint-disable no-unused-expressions */"."/* eslint-disable react-hooks/exhaustive-deps */"."import {"." React,"." useTranslate,"."} from '@/utils/require';"."import './index.less';".""."const ${1:${TM_FILENAME_BASE/(.*).(? :jsx|js)/$1/i}}: React.FC = () => {"." const translate = useTranslate();".""." React.useEffect(() => {"."[]);},".""." return ("." 
      

       "
      
." {translate('1')}"." ".");"."};."export default ${1:${TM_FILENAME_BASE/(.*).(? :jsx|js)/$1/i}};".""]."description": "MyStock React templet"}},Copy the code

In the example above:

  • “React Template” is the code snippet name. If you do notdescriptionIs provided, it is displayed through IntelliSense.
  • prefixDefines one or more trigger words to display summaries in IntelliSense.
  • bodyIs one or more content lines that will be added as multiple lines when inserted. Newline characters and embedded tabs are formatted according to the context in which the snippet was inserted.
  • descriptionIs an optional description of the code snippet displayed by IntelliSense.

In addition, variables can be defined in the body, which makes the code snippet more humanized. See here for more details: code.visualstudio.com/docs/editor…

4. The debugging

VS Code has built-in debugging support for the Node.js runtime and can debug JavaScript, TypeScript, or any other language that converts to JavaScript. See here for more details: code.visualstudio.com/docs/editor…

Example debugging is as follows:

5. Release

Once the plugin is developed, it needs to be released for the rest of the team to use. How can it be released and shared? There are three main methods:

  • Method 1: directly send the configured file to someone else, put the plug-in stored in vscode in the directory, and then restart vscode. Is not recommended
  • Method 2: Package the plug-in as a VSIX and send it to someone else to install.
  • Method 3: Register a developer account and publish to the official app market without review.

Method 1

Method 1 is different from excessive repetitiveness. But to use method 2 or method 3, you need to use the vSIX tool.

npm i vsce -g
Copy the code

Method 2: Installation

Vsce package packages, generating a Vsix file with a version number.

vsce package
Copy the code

Once packaged, you can send it to someone else for installation.

Of course, if you find it difficult to send, use the publishing method to deal with. Look down.

Method 3: Pre-release preparation

Before the release, we need to do some preparation, some account initialization and token application.

Account creation
  1. The first visitlogin.live.com/Log in to yourMicrosoftAccount number, no first register one:

  1. Next access: AKa.ms /SignupAzure… If you have never used Azure, you will see the following:

Clicking Continue will create an organization with an email prefix by default, or you can customize one.

Token creation

The first time you go to Azure, you will be reminded to wear a project, which you can skip by clicking on Personal Access Tokens in the upper right corner:

Click Create new Personal Access Token, especially select All Accessible Organizations for Organization and Full Access for Scopes, otherwise the release will fail.

Once the token is created you need to write it down locally because the site won’t save it for you.

Creating a publisher

You can use Visual Studio Marketplace publishers management page: marketplace.visualstudio.com/manage create new publisher. You need to log in using the Microsoft account used in the previous section to create the personal access token.

Use to test the publisher’s personal access token VSCE, while storing it for later use:

vsce login <publisher name>
Copy the code

Scenario 3: Release

You can publish an extension using vsCE with the following publish command:

vsce publish
Copy the code

This command will ask you for a personal access token if you have not already provided it in the command above VSCE Login.

Or, you can pack the extension (vsce package) and upload it manually to Visual Studio Marketplace publishers management page: marketplace.visualstudio.com/manage.

  • Automatic release

  • Manual import publishing

Either automatically or manually, once the release is complete, you can install the plugin for your snippet in Vs Code.

Here our plug-in is finished, try it out in your own project.

5. To summarize

With the Vs Code snippet plug-in, you can quickly generate Code snippets during development, reducing the usual paste and copy of the Code. Improve r&d efficiency. Is not a very happy thing.

If you think it’s good, give it a like.