Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements. (Visual Studio Code)
For example, in JavaScript, instead of inserting console.log(’Hello World…’)
you can use VSCode built-in snippet log
by inserting it, then press the tab button to show that entirely on the editor. There are many other built-in snippets on the VSCode that you can use:
Press
shift+cmd+p
in Mac orshift+ctrl+p
in Windows to open the Command Palette.Insert
Insert Snippet
command in the Command Palette to get a list of the snippets for the language of the current file, then press the enter button to see them.
Many extensions on the VS Code Marketplace include snippets. You can search for extensions that contain snippets in the Extensions view (
shift+cmd+x
in Mac orshift+ctrl+x
in Windows) using the@category:"snippets"
filter. (Visual Studio Code)
How to create your own snippets?
I’m working with React, and there is a popular snippet extension for React on the VS Code Marketplace, but most of its snippets are useless for me. So I prefer to create my own snippets instead.
I want to create a React TypeScript component snippet which takes its name from the file name:
Open the Command Palette by pressing
shift+cmd+p
in Mac orshift+ctrl+p
in Windows.Insert
configure user snippets
Select the language for which the snippets
should appear.For example, to create a snippet for a React
TypeScript file, choosetypescriptreact
then press the enter button.VSCode will open a
***.json
(typescriptreact.json
for the previous selection).Insert the below attribute on the
***.json
(typescriptreact.json
) object:
"React Arrow Function Component": {
"prefix": "trafc",
"body": [
"type Props = {};\n",
"const $TM_FILENAME_BASE = ({}: Props) => {",
" return <></>;",
"};\n",
"export default $TM_FILENAME_BASE;\n"
],
"description": "Create TypeScript React arrow function component"
}
- You can use
trafc
snippet for React TypeScript file.
Now I want to describe what the above code says:
“React Arrow Function Component” is the snippet name. It is displayed via IntelliSense if no
description
is provided.prefix
is the snippet that we can use on the VSCode to display thebody
.body
is an array of strings consisting of the code we want to be displayed via theprefix
snippet. Every line of our codes should be placed in a string. If you need to use enter character type\n
.description
as its name shows is the description of our snippet.
Another example is to create a console.log
with a description like console.log("status:", status)
. The snippet configuration is shown in the below section:
"console.log with description": {
"prefix": "lg",
"body": ["console.log('${1:desc}:', ${1:desc})"],
"description": "Insert a console.log() with description as the same as the variable."
}
The new thing is the
${1:desc}
. The1
means after you insert the snippet, the cursor will be placed on that position.desc
means these two parts should be the same in order to VSCode type them simultaneously. For more information check this link.
Top comments (0)