自定义snippet（代码段）就可以极大的提高你的开发效率 VScode快速一键生成html、vue、jsx、ajax、sass、docker等代码片段

￡神魔★判官ぃ 2022-05-19 09:35 173阅读 0赞

学会添加自定义snippet（代码段）就可以极大的提高你的开发效率

![70][]

1.文件 => 首选项 => 用户代码片段

![70 1][]

2.选择你需要新建的代码片段的语言

![70 2][]

3.进入代码片段编辑界面

1. 所有的代码片段需要用""或''包裹
    2. \\t表示制表符
    3. 空的一行必须用''或""包裹
    4. $1代表光标第一次出现的位置，$2代表按下tab后光标第二次出现的位置

4.一个简单地.jsx demo

{
        "JSX": {
            "prefix": "jsx", // 触发的关键字 输入jsx按下tab键
            "body": [
                "import React from 'react'",
                "",// 空的一行
                "class Demo extends React.Component {",
                "\trender() {", // 有制表符的一行
                "\t\treturn (",
                "\t\t\t$1",    // 光标首次出现的位置            
                "\t\t)",
                "\t}",
                "}",
                "",
                "export default Demo",
            ],
            "description": "jsx components"
        }
    }

5.demo

![70 3][]

[70]: /images/20220519/3931cfd76c3443c389e7001ae1bce1c4.png
[70 1]: /images/20220519/ffd36586db744d72b6adc5013cff0976.png
[70 2]: /images/20220519/48a20ea18c4e4ba0b3db8e7a9c628894.png
[70 3]: /images/20220519/013ea8f0dece459cb46d7a5b452664f2.png