关于前端:高效工具vscode配置jsx模板

首先关上vscode，菜单选项：File>Preferences>User Snippets>javascritreact.json

文件内容改为：

{    "JSX": { // 函数式组件        "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组件        "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"    }}

在新建的jsx文件中输出关键字jsx，就会呈现关联的初始化配置，回车即可主动初始化文件。

能够批改prefix来批改触发的关键字，也能够批改body里的内容，来批改初始化的模板。