• 技术文章 >开发工具 >VSCode

    聊聊VSCode中Snippet插件的使用(提高编程效率)

    青灯夜游青灯夜游2023-01-03 20:10:16转载142

    本文介绍的是 VSCode Snippet 插件,一种代码片段配置插件,可以节省你写样板代码的时间。

    你可能之前学习过 VSCode Snippet 插件,知道它的作用也学习了配置的语法,但是你想不到落地使用的场景。本文也将解决你的这个疑惑~

    本文将介绍 VSCode Snippet 的使用介绍、配置语法、引入方式和使用场景。【推荐学习:vscode教程编程教学

    VSCode Snippet 插件使用简介

    image

    (图片来自于 VSCode 官网)

    如 gif 图所示,当你想编写一段 ajax 代码时,只需要在编辑器里输入 ajax,再点击下 Tab 键,就会为你自动生成 ajax 代码的模板。

    Snippet 支持我们配置自己想要的任意代码片段,因此我们可以把项目中常见的代码片段抽出来,提高编程效率。同时可以共享给所在的团队,提高整个团队的编程效率。

    Snippet 配置语法

    我们拿 antd 组件库举例,比如我们想配置 antd 的 Snippet 代码片段:

    Antd Selet 组件代码如下:

    <Select
      defaultValue="lucy"
      style={{ width: 100 }}
      onChange={handleChange}
      options={[
        {
          value: 'jack',
          label: 'Jack',
        },
        {
          value: 'lucy',
          label: 'Lucy',
        }
      ]}
    />

    对应的 Snippet 配置代码如下:

    {
        "antd/Select": {
            "prefix": ["Select"],
            "body": [
                "<Select",
                "    defaultValue={$1}",
                "    style={{ width: ${2|100,200,300,400|} }}",
                "    onChange={${3:handleChange}}",
                "    options={[",
                "        {",
                "            value: $4,",
                "            label: $5,",
                "        }",
                "    ]}",
                "/>"
            ],
            "description": "Antd Select UI 组件"
        }
    }

    字段含义:

    body 部分可以通过 ${} 的方式指定光标位置、顺序、占位字符串、可用的值等

    ${} 语法简介:

    Snippets 引入方式:

    Sinppets 插件使用场景:

    更多关于VSCode的相关知识,请访问:vscode基础教程

    以上就是聊聊VSCode中Snippet插件的使用(提高编程效率)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:VSCode
    上一篇:【整理分享】30个让开发效率倍增的实用VSCode 插件 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 浅析vscode环境中导入python库的三种方法• vscode写vue没有高亮语法怎么办• vscode配置中文插件,带你无需注册体验ChatGPT!• 8 个VSCode中很棒的Laravel开发扩展• 【整理分享】30个让开发效率倍增的实用VSCode 插件
    1/1

    PHP中文网