Hello everyone, I am a bowl week, a front end that does not want to be drunk (inrolled). If I am lucky enough to write an article that you like, I am very lucky

Writing in the front

The code snippet can be understood as a template, and when we type the specified template, press TAB or Enter to display the corresponding template.

As long as you write good code snippets, you will get promotions and raises

The pros and cons of snippets

Coder has mixed reviews of snippets, and this chart illustrates the pros and cons of snippets:

When to use snippets

My advice on when to use snippets is:

  • When you’re skilled enough at something, for exampleconsole.log()At this point you can set code snippets for it.
  • Some things are particularly tedious and need to be written every time, such as the contents of a preliminary definition in a Vue single file.

Of course, the above content is only my suggestion.

How do I set up code snippets

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

  • Windows system: [File] → [Preferences] → [User fragments]
  • Mac System: [Code] → [Preferences] → [User Segments]

Then you can see the following

You can then modify the existing snippet or create a new snippet, in this case a global snippet called test-snippets, to demonstrate.

Snippet syntax

After we have created it, a JSON-like syntax appears, which looks like this:

{
  // 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"
  // }
}
Copy the code

Let’s look at the snippet syntax in VSCode.

Each property in the object represents a code snippet. The property name is the name of the code snippet. When the code snippet is triggered, the matched code snippet name is displayed.

Next we learn what each attribute does in the snippet.

  • scope: indicates which language the snippet works on. Between different languages.Separated. Commonly used withjavascript, typescript,html,css,vueAnd so on. If set to""It means everywhere.
  • prefix: Corresponds to the character that triggers the snippet.
  • description: Description of code snippets.
  • body: The contents of an object snippet, usually an array with one line in the array corresponding to the line after the generated snippet.

Recommend a site for generating code snippets with the following link:

snippet-generator.app/

$placeholder

In the example above, we enter log and press TAB to display the following code:

console.log();


Copy the code

After the text appears, the cursor is in (), then press TAB to move the cursor to the next line, which is $2. Similarly, we can set $3, $4, etc

Note that $0 is used to set the final cursor position.

Default and optional

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

If line provide some options, you can through the ${1 | one, two, three |} in the form of a written, such as:

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

The tests are as follows:

Then press TAB to see the picture below

constant

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

TM_SELECTED_TEXT Currently selected text or empty string TM_CURRENT_LINE Content of the current line TM_CURRENT_WORD Content of the word under the cursor or empty string TM_LINE_INDEX Line number based on zero index TM_LINE_NUMBER Line number based on one index TM_FILENAME File name of the current document TM_FILENAME_BASE File name of the current document (without the suffix) TM_DIRECTORY Directory of the current document TM_FILEPATH The full file path for the current document CLIPBOARD Contents in the CLIPBOARD WORKSPACE_NAME Name of an open workspace or folder CURRENT_YEAR Current year (four digits) CURRENT_MONTH Current month CURRENT_DATE Current day CURRENT_DAY_NAME_SHORT Short name of the day (' Mon ') CURRENT_HOUR Current hour CURRENT_MINUTE Current minute CURRENT_SECOND Current second BLOCK_COMMENT_START Block comments start identifiers, such as PHP /* or HTML <! -- BLOCK_COMMENT_END Block comment end identifier, such as PHP */ or HTML --> LINE_COMMENT line comment, such as PHP // or HTML <! -- -->Copy the code

Create code snippets for your project

Sometimes we need to create code snippets for a specific project, but it’s really easy, just create a.vscode folder in the root directory of the current project and create a file that ends with.code-snippets.

Write in the last

Here I create a GitHub repository and put some code snippets in VSCode. The repository address is as follows:

Github.com/ywanzhou/vs…

See this, also don’t like support ~