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

Today, I will talk to you about how to define code snippets in VSCode, which may not be well understood by many people. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

How do you define code snippets in VSCode? The following article introduces how to define code snippets for VSCode, so that coding can fly fast. I hope it will be helpful to you!

The code snippet can be understood as a template, and when we enter the specified template, press [tab] or [enter] and the corresponding template appears.

As long as the code snippet is well written, there will be a promotion and a raise.

Advantages and disadvantages of code snippets

Coder has mixed reviews of code snippets.

When to use code snippets

My advice on when to use code snippets is:

When you are proficient enough with something, such as console.log (), you can set code snippets for it.

Some things are so tedious that they need to be written every time, such as the preliminary definition in the Vue single file.

Of course, the above is just my suggestion.

How to set up code snippets

First you prepare a VSCode, then determine your operating system, and then start:

Windows system: [file] → [preferences] → [user snippet]

Mac system: [Code] → [preferences] → [user fragments]

Then you can modify the existing code snippet or create a new one, and here we create a global code snippet called test-snippets to demonstrate.

Snippet syntax

After we have created it, a syntax similar to JSON appears, as follows:

{/ / Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and / / description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope / / is left empty or omitted, the snippet gets applied to all languages. The prefix is what is / / used to trigger the snippet and the body will be expanded and inserted. Possible variables are: / / $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. / / Placeholders with the same ids are connected. / / Example: / / "Print to console": {/ / "scope": "javascript,typescript", / / "prefix": "log", / / "body": [/ / "console.log ('$1');", / / "$2" / /], / / "description": "Log output to console" / /}}

Next, let's learn about the code snippet syntax in VSCode.

First of all, the content is wrapped by an object, and each attribute in the object represents a code snippet, and the attribute name is the name of the code snippet. When the code snippet is triggered, the name of the matching code snippet is displayed. In the example, the attribute name is Print to console.

Next, let's learn what each attribute in the code snippet does.

Scope: indicates the language in which the code snippet works. Different languages are separated by each other. Commonly used are javascript, typescript,html,css,vue and so on. If it is set to "", it means that everything is in effect.

Prefix: corresponds to the character that triggers the code snippet.

Description: description of the code snippet.

Body: the contents of an object code snippet, usually an array, with one line in the array corresponding to the one after the generated code snippet.

Recommend a website for generating code snippets with the following link: https://snippet-generator.app/

$placeholder

In the above example, we enter log and press the [tab] key to get the following code:

Console.log ()

After this paragraph appears, the cursor is inside (), and then press the [tab] key, the cursor can be adjusted to the next line, that is, the position of $2, by the same token, we can also set $3, $4, and so on.

It is worth noting that $0 is used to set the position of the final cursor.

Default and optional

If you want a default value in the placeholder, you can write it in the form of ${1:defalt}.

If the line provides some options, you can write it in the form of ${1 | one,two,three |}, for example:

{"import": {"scope": "javascript,typescript", "prefix": "import", "body": ["import {$2} from\" ${1 | axios,lodash,day |}\ "," $3 "]," description ":" Import Module "}}

The tests are as follows:

Then press [tab] as shown below

Constant

In the code snippet, VSCode provides us with some constants that are relatively easy to use, such as $TM_FILENAME.

TM_SELECTED_TEXT the currently selected text or empty string TM_CURRENT_LINE the content of the word under the current line TM_CURRENT_WORD cursor or the empty string TM_LINE_INDEX based on zero index line number TM_LINE_NUMBER based on an index line number TM_FILENAME the file name of the current document TM_FILENAME_BASE is currently The file name of the document (excluding the suffix) TM_DIRECTORY the directory of the current document, the full file path of the current document, the contents of the CLIPBOARD clipboard, the name of the workspace or folder that WORKSPACE_NAME has opened, CURRENT_YEAR current year (four digits) CURRENT_MONTH current month CURRENT_DATE CURRENT_DAY_NAME_SHORT current day short name of the day ('Mon') CURRENT_HOUR current hour CURRENT_MINUTE current minute CURRENT_SECOND current second BLOCK_COMMENT_START block comment start identification Such as PHP / * or HTML LINE_COMMENT line comments For example, PHP / or HTML creates code snippets for the project

Sometimes we need to create some code snippets for a specific project, which is actually quite simple. we just need to create a .vscode folder in the root directory of the current project, and then create a file that ends with .vscode, in the same way as above.

After reading the above, do you have any further understanding of how code snippets are defined in VSCode? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

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.