Why snippets

This afternoon, when I was making small programs with VSCode, I found it very inconvenient, because the code snippets provided in the store are extremely limited, and we need to use code snippets almost every day, so I was thinking about how they can provide code to others, can I customize the code snippets? I looked it up, and sure enough, it was built-in in vscode (it was hidden a little bit), it was customizable, and after I finished my task, I got to know the syntax for snippets, and suddenly I felt like I was opening the door to a new world. Make a note. Here we go

How do I open snippet configuration

Vscode is used as an example here, and other editors are probably similar. Open the command window with the shortcut Ctrl + Shift + P in vscode, then type snippet, select **[configure user snippets]**, click, and you can happily write snippets

How to use the Snippet

Let’s do a Demo

"html template": {
    "prefix": "ht"."body": [
      "
      "."<html lang=\"en\">"."<head>"." 
      "."  <title>${1:$CURRENT_DATE}</title>"."</head>"."<body>"." <div class=\"${2|container,wrapper|}\ ">"."   The ${3}"." </div>"."</body>"."</html>",]."description": "create a html frame"
  }
Copy the code

The effect is this

infrastructure

  • Fragment name
  • Prefix (the trigger condition I typed in, for example, when I typed ht in the example above, I tabled the fragment)
  • The body, where you define the code snippets you need according to the syntax
  • Description (description, specific description of the fragment)

Basic grammar

  • Each comma represents the end of a whole line, and double quotes need to be escaped with the \ character
  • $number indicates the order in which the cursor moves. For example, $1 indicates where the cursor first moves, and $0 indicates the final position of the cursor
  • Variables that provide a default value if no value is assigned. Some variables are provided here
TM_SELECTED_TEXT: Currently selected text or an empty string; TM_CURRENT_LINE: Contents of the current line; TM_CURRENT_WORD: cursor word or empty string TM_LINE_INDEX: line number (starting from zero); TM_LINE_NUMBER: line number (from the beginning); TM_FILENAME: File name of the current document; TM_FILENAME_BASE: file name of the current document (without extension). TM_DIRECTORY: directory where the current document resides; TM_FILEPATH: Full file path for the current document; CLIPBOARD: indicates the contents of the current CLIPBOARD. Time related CURRENT_YEAR: Current year; CURRENT_YEAR_SHORT: the last two digits of the current year; CURRENT_MONTH: Specifies the current month with two digits, for example, 02. CURRENT_MONTH_NAME: The full name of the current month, such as July; CURRENT_MONTH_NAME_SHORT: short of the current month, for example, Jul. CURRENT_DATE: the date of the current month; CURRENT_DAY_NAME: indicates the day of the current day, such as Monday. CURRENT_DAY_NAME_SHORT: short of the day, for example, Mon. CURRENT_HOUR: indicates the current hour (in the 24-hour system). CURRENT_MINUTE: indicates the current minute. CURRENT_SECOND: indicates the current number of seconds.Copy the code
  • Options, when the cursor to it pop up some optional items, use | | is followed by its options I’m here is to provide the two values, use commas between values

  • The advanced syntax for body, which you can see here, is written in great detail

The last

The effect

Here,