We can use templates to improve our productivity when a piece of code or instruction appears repeatedly

As a lightweight code editor, VSCode is very popular in the industry. Here’s how to make code templates with VSCode Snippet.

Create a Snippets

• Select File on the menu bar
• Select Preferences from the drop-down menu
• Select the User Snippets, as shown below, and select the corresponding language. If the language you need is not available, you need to install the language plug-in.

The Snippets content is defined in JSON format.

For example, IF I want to create a new Vue template, select Vue. Json (Vue).

Then enter the following JSON code:

{
	"vue template": {
		"prefix": "vuem",
		"body": [
			"<template>",
			" <div>",
			" ",
			" </div>",
			"</template>",
			"<script>",
			" export default {",
			"   name:'$1',",
			"   data () {",
			"     return {",
			" ",
			"     }",
			"   },",
			"   computed:{",
			" ",
			"   },",
			"   methods:{",
			" ",
			"   },",
			"   components: {",
			" ",
			"   },",
			" }",
			"</script>",
			"<style scoped>",
			" ",
			"</style>",
			""
		],
		"description": "vue template"
	},
}
Copy the code

Save, and then create a.vue file and typevuem+tab 或 vuem+enterGenerating a template

• vue template: The current snippet name.
• prefix: prefix, code block using shortcut; Type the prefix, press TAB, and the code block will be used.
• body: Code block content; Newline use \r\n.
• description: type the prefix, vscode senses the prefix, and the description is displayed.
• At $1, $2, $0: Specifies the position where the edit cursor appears after the code module is generated. Use the Tab key to switch (edit cursor pressAt $1, $2, $3... $0Sequence jump),$0Is the last position to switch the cursor.

The Snippet grammar

Tabstops

$1, $2 specifies the cursor position after the code block is generated; The cursor appears at the same $1 position at different locations.

Placeholders

Add a default value to the cursor position. For example, ${1:another ${2:placeholder}}; The default value at $1 is another.

Choice

Cursor position setting multiple values to choose from; For example, ${1 | one, two, three |}; $1 can be filled with one,two, or three.

Variables

• Commonly used variables
  • TM_SELECTED_TEXTCurrently selected or an empty string
  • TM_CURRENT_LINECurrent line contents
  • TM_CURRENT_WORDCursor character or empty string
  • TM_LINE_INDEXThe line number starting from 0
  • TM_LINE_NUMBERThe line number starting from 1
  • TM_FILENAMEName of the document being edited
  • TM_FILENAME_BASEThe name of the current edited document without a suffix
  • TM_DIRECTORYDirectory of the current edited document
  • TM_FILEPATHFull path of the current edited document
  • CLIPBOARDCurrent clipboard contents
• Date and time related variables
  • CURRENT_YEARThe current year
  • CURRENT_YEAR_SHORTBoth current and New Year
  • CURRENT_MONTHMonth is a two-digit number, for example, 02
  • CURRENT_MONTH_NAMEFull name of month, e.g. ‘July’
  • CURRENT_MONTH_NAME_SHORTShort for month, e.g. ‘Jul
  • CURRENT_DATEOne day
  • CURRENT_DAY_NAMEThe day of the week, for example ‘Monday’
  • CURRENT_DAY_NAME_SHORTShort for the day of the week, ‘Mon’
  • CURRENT_HOURHourly, 24-hour system
  • CURRENT_MINUTEminutes
  • CURRENT_SECONDNumber of seconds
• Variable formatting

${TM_FILENAME/(.*)\\.. +$/$1/} | | | | | | | |-> no options | | | | | |-> references the contents of the first | | capture group | | | |-> regex to capture everything before | the final `.suffix` | |-> resolves to the filenameCopy the code

A python snippet

"python template": { "prefix": "pyHeader", "body": [ "#!user/bin/python" "# _*_ coding: utf-8 _*_" " " "# @File : $TM_FILENAME" "# @version: 1.0" "# @author: XXXXXXX ""# @email: XXXXXXX" "# @time: $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND" "#Description:" " " "import datetime" "start_time = datetime.datetime.now()" "end_time = datetime.datetime.now()" "print(end_time-start_time)" ], "description": "my vue python template", }Copy the code

In fact, the following syntax is just a casual look, there is nothing else to say, ok, that’s it

^ _ <