Vscode creates its own code template

situation

I'll go back to react, Write jsx There's a bit more code , Each time you create a new component, you need to type it by hand or copy A template , It's inconvenient , Plan to match a set of templates , After that, you can use the shortcut key to directly generate .

Creating steps

1. The entrance opens

In one word ：（ top left corner ） file - Preferences - User code snippets
Entrance two ： Here's the picture

2. New code snippet

In order not to affect other code fragments , We choose New global code fragment file

Fill in the file name you want to create , I intend to create jsx Code snippet of , So it was named jsx, Then click save

The default is to take the example

3. Write the configuration

prefix： Shortcut key
body： Code snippet for configuration \t Indent with space \n Refers to line feed
description： Description of code snippets

This is the code. , You can also refer to , Configure a set of vue The template of

{
    
  "jsx_template": {
    
    "prefix": "jsx",
    "body": [
      "import React, { Component } from 'react';\n",
      "export default class xx extends Component {",
      "\trender() {",
      "\t\treturn <div>xx</div>;",
      "\t}",
      "}"
    ],
    "description": "jsx The template of "
  }
}

4. Use

Direct input jsx, enter

Reference material ：vsCode Create your own code template