VScode快速一键生成html、vue、jsx、ajax、sass、docker等代码片段

红壶吃猬队 2019-06-26

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

VScode快速一键生成html、vue、jsx、ajax、sass、docker等代码片段

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

VScode快速一键生成html、vue、jsx、ajax、sass、docker等代码片段

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

VScode快速一键生成html、vue、jsx、ajax、sass、docker等代码片段

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

VScode快速一键生成html、vue、jsx、ajax、sass、docker等代码片段

备注:官方文档 https://code.visualstudio.com...

相关推荐