Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to customize code snippets in vscode". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to customize code snippets in vscode.

Basic guide

First find the file menu-> find preferences-> user snippet-> Select the snippet file for the new xx folder-> enter the snippet name-> start customizing.

This xx folder is your current directory, of course, you can also create a global or a certain file type, you can. It's just that the fragment files are stored in a different directory.

And then you see this in the current directory.

Just put it under the root of the folder currently opened by vscode, as long as vscode can read the file .vscode.

Another way is to put it in vscode's user global directory. Vscode will look there first, and then go to the current directory.

As for how to find vscode's user global catalog, you can create a new global code snippet and see it in vscode's breadcrumb navigation.

Start customizing your own code snippets

At present, I only make a general-purpose one, which can be used in js, ts, scss and lesss.

{"single line comment: start": {"scope": "javascript,typescript,javascriptreact,typescriptreact,scss,less", "prefix": "ts", "body": ["/ / PROJECT a custom description start", "$0"] "description": "single line comment: start"}, "single line comment: end": {"scope": "javascript,typescript,javascriptreact,typescriptreact,scss,less", "prefix": "te", "body": ["/ / PROJECT a custom description end" "$0"], "description": "single line comment: end"}, "single line comment: start&end": {"scope": "javascript,typescript,javascriptreact,typescriptreact,scss,less", "prefix": "tse" "body": ["/ / PROJECT a custom description start", "," ${1: what you are about to fill in} ","," / / PROJECT a custom description end ",] "description": "single line comment: start&end"}, "multiline comment: start": {"scope": "javascript,typescript,javascriptreact,typescriptreact", "prefix": "ms", "body": ["/ * *\ r\ n * PROJECT a custom description start" "* $0", "* * /", ""], "description": "Multiline comment: start"}, "Multiline comment: end": {"scope": "javascript,typescript,javascriptreact,typescriptreact" "prefix": "me", "body": ["/ * PROJECT a custom description end * /", "]," description ":" Multiline comments: end "}}

The above customization is js, ts, jsx comment code block, different people have different styles, you simply changed to your own.

Instructions for use: code snippets need to be called through keywords. For example, the ordinary single-line comments above are called by ts, and then press the completion key to perform regular completion operations, just like the tab key of the windows system.

The keyword of the code snippet is the string in the prefix attribute in the above configuration file, and scope is the file type for which the code snippet acts.

The body is the code snippet, and each item in the array has a unique line in the generated code, and $0 represents the location of the cursor after the code snippet is generated.

There will also be $123456 and so on, indicating the location of the next cursor, that is, where you continuously press the tab key and the time mark appears.

You can also use a string as a placeholder, such as ${1:xxx} in an one-line comment:: start&end, which uses a string as a placeholder to give you a clear hint.

Keyword description:

Ts: single-line comment: star

Te: single-line comment: end

Tse: single-line comment: start&end

Ms: multiline comments: start

Me: multiline comments: end

Continue to customize code snippets for jsx and tsx

This time, do something that can be used in jsx and tsx. The annotation judgment of jsx and tsx is different from that of js and ts, so do it alone.

{"jsx&tsx comment: start": {"scope": "javascriptreact,typescriptreact", "prefix": "js", "body": ["{/ * PROJECT a custom description start * /}", "$0"] "description": "jsx&tsx comment: start"}, "jsx&tsx comment: end": {"scope": "javascriptreact,typescriptreact", "prefix": "je", "body": ["{/ * PROJECT a custom description end * /}" "$0"], "description": "jsx&tsx comment: end"}, "jsx&tsx comment: start&end": {"scope": "javascriptreact,typescriptreact", "prefix": "jse" "body": ["{/ * PROJECT a custom description start * /}", "", "${1: what you are about to fill in}", "" {/ * PROJECT a custom description end * /} ",] "description": "jsx&tsx comment: start&end"}}

Keyword description:

Js:jsx&tsx comments: start

Je:jsx&tsx comments: end

Jse:jsx&tsx comments: start&end

Another one for css.

In fact, at this point, you are already very familiar with the custom code snippet of vscode. If the snippet I wrote above does not meet your requirements, you can change it yourself, without any complicated operation.

{"css comment: start": {"scope": "css", "prefix": "cs", "body": ["/ * PROJECT a custom description start * /", "$0"] "description": "css comment: start"}, "css comment: end": {"scope": "css", "prefix": "ce", "body": ["/ * PROJECT a custom description end * /" "$0"], "description": "css comment: end"}, "css comment: start&end": {"scope": "css", "prefix": "cse" "body": ["/ * PROJECT a custom description start * /", "," ${1: what you are about to fill in} ","," / * PROJECT a custom description end * / ",] "description": "css comment: start&end"}}

Keyword description:

Cs:css comments: start

Ce:css comments: end

Cse:css comments: start&end

Finally, make a todo {"TODO Note: common": {"scope": "javascript,typescript,javascriptreact,typescriptreact,scss,less", "prefix": "tt", "body": ["/ / PRJECT-TODO:$0"] "description": "TODO comment: common"}, "TODO comment: jsx": {"scope": "javascriptreact,typescriptreact", "prefix": "jt", "body": ["{/ * PRJECT-TODO:$0 * /}"] "description": "TODO comment: jsx"}, "TODO comment: css": {"scope": "css", "prefix": "ct", "body": ["/ * PRJECT-TODO:$0 * /"] "description": "TODO comment: css"},}

Keyword description:

Tt:TODO comments: common

Jt:TODO comments: jsx

Ct:TODO comments: css

Thank you for reading, the above is the content of "how to customize code snippets in vscode". After the study of this article, I believe you have a deeper understanding of how to customize code snippets in vscode. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.