关于前端:高效工具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 里的内容，来批改初始化的模板。