vscode-snippets:快速初始化一个React函数组件

614 阅读1分钟

snippets入口:首选项->Configure User Snippets

image.png

配置如下:

{
    "React function component": {
            "prefix": "fc",
            "body": [
                    "import React from 'react';",
                    "", // 空白行
                    "interface I${1}Props {", // ${1}变量,相同编号表示同样的数值
                    "",
                    "}",
                    "",
                    "export const ${1}: React.FC<I${1}Props> = (props) => {",
                    "",
                    "    return (",
                    "",
                    "    );",
                    "};"
            ],
            "description": "react function component"
    }
}

保存后,用户只需要输入fc指令,vscode便能自动识别为全局的user snippets,省去重复代码的输入。

image.png