Vscode configures JSX templates

First open vscode and choose File>Preferences>User Snippets>javascritreact.json

The content of the file should be changed to:

{
	"JSX": { // Functional components
		"prefix": "jsx"."body": [
			"import React, { useEffect, useState } from \"react\"".""."function DemoPage$1 (props){"."\tuseEffect(() => {"."\t\tdocument.title =\"\""."\t\tdocument.body.style.background = \"#fff\""."\t}, [])"."\treturn("."\t\t<div></div>"."\t)"."}".""."export default DemoPage",]."description": "jsx components"
	},
      "JSXClass": { / / class components
        "prefix": "jsx-class"."body": [
            "import React, { useEffect, useState } from \"react\""."import styled from \"styled-components\""."import { rem } from \"@utils/UtilsFunc\"".""."class Demo extends React.Component{"."\trender(){"."\t\treturn("."\t\t\t$1"."\t\t)"."\t}"."}".""."export default Demo",]."description": "jsx components"}}Copy the code

Enter the keyword JSX in the newly created JSX file, and the associated initial configuration will appear. Press Enter to automatically initialize the file.

You can modify the prefix to change the triggered keyword, or you can modify the body to change the initialized template.