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

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

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

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

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

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

自定义snippet(代码段)就可以极大的提高你的开发效率 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

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

上一篇:create-react-app 创建react ts项目启动报错


下一篇:JSX语法(个人学习笔记)