VSCode 中配置代码片段

• VSCode 中也可以配置 React 相关的快捷代码片段,具体如下。

• mac 中我们可以在vscode->code->首选项->配置用户代码片段 或 windows 中可以在vscode->File->Preference->User Snippets 中配置, 弹出面板如下:

  
  
  

  在弹出的面板中我们选择在那种文件类型中使用代码片段, 这里我们使用的 react 技术,使用的是 typescript语言,就需要在 typescriptreact.json 文件中设置 jsx 的代码片段,在 typescript.json 文件中设置 TS 的代码片段。

• 设置的每一个代码片段都有一个名字、prefix、body、description; prefix对应的就是我们使用快捷代码片段的字符串, body 就是对应的代码片段, 具体示例如下:

"Print to console": {
    "prefix":"log",
    "body":[
        "console.log('$1');",
        "$2"
    ],
    "description": "Log output to console"
}

• 上面示例中$1 和 $2 是光标的位置,刚开始是在$1 位置,按 tab 键会切换到$2 的位置,需要注意这里的下标是从 1 开始的,而不是 0。
• 我们可以将要设置的代码片段复制到这里, 使用这个代码片段生成器对我们的代码转换后然后复制到我们的代码片段文件中。
  这里给出我常用的代码片段:
• 下面是 typescript 文件中设置的代码片段

{
    "styled.div": {
        "prefix": "stiv",
        "body": [
            "import styled from 'styled-components';",
            "",
            "const $1Cmp = styled.div`",
            "",
            "`;",
            "",
            "export {",
            "    $1Cmp",
            "}"
        ],
        "description": "styled.div"
    },
    "styled.divp": {
        "prefix": "stivp",
        "body": [
            "import styled from 'styled-components';",
            "",
            "const $1Cmp = styled.div`",
            "    $2: ${props=>props.$2};",
            "`;",
            "",
            "export {",
            "    $1Cmp",
            "}"
        ],
        "description": "styled.divp"
    }
}

• 下面是 typescriptreact 文件中设置的代码片段:

"useState": {
    "prefix": "useState",
    "body": [
        "const [$1, set$1] = useState($2);"
    ],
    "description": "useState"
},
"function": {
    "prefix": "func",
    "body": [
        "const $1 = ($2)=>{",
        "",
        "}"
    ],
    "description": "function"
}