Shulou(Shulou.com)06/01 Report--

The editor today takes you to understand how to use snippets to improve development efficiency in VSCode. The knowledge points in this article are introduced in great detail. Friends who feel helpful can browse the content of the article with the editor, hoping to help more friends who want to solve this problem to find the answer to the problem. Let's follow the editor to learn more about "how to use snippets to improve development efficiency in VSCode".

Snippets means snippet, and VSCode supports custom snippets, which allows you to quickly write a piece of code based on it.

Not only VSCode, but almost all major editors support snipeets.

It must be useful that a feature is supported by so many editors, but most people don't use it.

In my previous snippets article, I talked about the various syntax and configuration methods supported by snippets, but did not use them to make a real case.

So, this article is about a real snippets, basically using all the snippets syntax. If you can write it out independently, you can say that snippets has mastered it.

Let's review VSCode's snippets syntax first.

Snippets Foundation

Snippets is in this json format:

{"alpha": {"prefix": ["a", "z"], "body": ["abcdefghijklmnopqrstuvwxyz"], "description": "letter", "scope": "javascript"}}

Prefix is the prefix that triggers, and you can specify multiple

Body is the content inserted into the editor and supports a lot of syntax

Description is the description

Scope is the effective language, if not specified, all languages are valid.

The body section is the code to be inserted, supports a lot of syntax, and is also a DSL (domain specific language).

It is supported to specify the cursor location through $1 and $2:

"$1 xxxx", "yyyy $2"

You can edit multiple cursors at the same time:

"$1 xxxx $1"

You can add placeholader, or you can make default values:

"${1:aaa} xxxx", "yyyy ${2:bbb}"

You can provide multiple values to choose from:

"${1 | Kasong, Shenguang, yck |} the most handsome"

There are also some variables that can be taken:

"current file: $TM_FILENAME", "current date: $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE"

You can also do regular replacements for variables:

"${TM_FILENAME/ (. *)\\. [amurz] + / ${1:/upcase} / I}"

After going through the basic grammar, we just need to know what to support. Later, let's make a real case and use it again.

Through command + shift + p, enter snippets and select a range:

There are three effective ranges of snippets: project, global and language. I personally write more global level, project and language level is also possible.

The basics are over, so let's write a snippets.

Actual combat case

I have been working on a vue project recently, and I write a lot of router-link, so I encapsulate a snippets of router-link code.

Let's start with the simplest version:

{"routerLink": {"prefix": "link", "body": ["link"], "description": "router-link Jump"}}

There is nothing to say about this, but to complete the content according to the prefix:

Then add three cursors at name, id, and link text, that is, $1, $2, and $3:

{"routerLink": {"prefix": "link", "body": ["$3"], "description": "router-link Jump"}}

You can press tab to quickly edit the changed parts:

Then add placeholder:

{"routerLink": {"prefix": "link", "body": ["${3:link}"], "description": "router-link Jump"}}

In fact, the target part is also optional, here we use multiple selections to do:

There are two options, namely target= "_ blank" or spaces.

${3 |, target=\ "_ blank\" |}

So snippets becomes like this:

{"routerLink": {"prefix": "link", "body": ["${4:link}"], "description": "router-link Jump"}}

Most of the jump addresses are related to the current file name, such as more XxxYyyZzzList jump XxxYyyZzzDetail.

So we take the current file name as the default value and use the TM_FILENAME variable (all available variables can be found on the vscode website):

${1:$TM_FILENAME}

Today's snippets:

{"routerLink": {"prefix": "link", "body": ["${4:link}"], "description": "router-link Jump"}}

It is true that the file name has been filled in, but it has to be changed manually. Can it be filled in after the change?

Yes, variables can do transform, that is, regular substitution:

XxxList.vue needs to take out the Xxx and spell it with Detail. Such a rule is not difficult to write:

Writing in js goes like this:

'XxxList.vue'.replace (/ (.*) List\ .vue /,'$1Detail')

It's pretty much the same in snippets, except with / separate:

${TM_FILENAME/ (.*) List\\ .vue / $1Detail/i

So snippets becomes like this:

{"routerLink": {"prefix": "link", "body": ["${4:link}"], "description": "router-link Jump"}}

The codes filled in are all replaced.

The content of the link we want to use the selected content, this also has a variable, which is TM_SELECTED_TEXT.

Finally, we hope that the router-link tag can also be changed, and the opening and closing tags can be changed together.

This needs to be edited with multiple cursors, specifying multiple $x as the same number.

The final snippets is that all the snippets syntax is used once.

The complete snippets is as follows, which you can use in VSCode. It is still very enjoyable to use:

{"routerLink": {"prefix": "link", "body": ["${4:$TM_SELECTED_TEXT}"], "description": "router-link Jump"}}

Almost all major editors support snippets, that is, configuring code snippets to improve development efficiency, and VSCode is no exception, which is a useful feature.

VSCode snippets supports three effective ranges: global, project and language. Personally, I use the overall situation more often.

It is also a kind of DSL, supporting a lot of syntax, such as specifying cursor position, multi-cursor editing, placeholder, multiple values, variables, variable conversion and other syntax.

Specify cursor location: $x

Multi-cursor editing: $x $x

Specify placeholder text: ${x:placeholder}

Specify multiple selection values: ${x | aaa,bbb |}

Take the variable: $VariableName

Convert variables: ${VariableName/ regular / replaced text /}

We wrote a snippets of router-link, which combines these grammars, and will do it again.

Being able to define your own snippets is very helpful to improve the efficiency of development.

What is the use of vscode Visual Studio Code is a cross-platform editor for writing modern web and cloud applications, which runs on OS X web Windows and Linux. It provides developers with built-in support for a variety of programming languages, and as Microsoft pointed out in keynote at the Build conference, this editor also provides rich code completion and navigation features for these languages.

Thank you for your reading, the above is the whole content of "how to use snippets to improve development efficiency in VSCode", learn friends to hurry up to operate it. I believe that the editor will certainly bring you better quality articles. Thank you for your support to the website!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.