VSCode 添加代码模板

VSCode Snippets

程序编写时,一段代码或说明会重复出现,使用模板有利于提高我们的工作效率。

VSCode 作为一种轻量级的代码编辑器,业界内颇受欢迎;下面就介绍一下如何利用VSCode snippet 制作代码模板。


# 创建一个snippets

  • 菜单栏选择File
  • 下拉菜单中选择 Preferences
  • 再选择User snippets,出现下图情况,选择对应的语言即可;如果没有你需要的语言,你需要安装对应的语言插件。
Language selection

Snippets内容使用JSON格式进行定义。
一个JavaScript例子

{
    "For_Loop": {
        "prefix": "for",
        "body": [
          "for (const ${2:element} of ${1:array}) {",
          "\t$0",
          "}"
        ],
        "description": "For Loop"
    }
}
  • For_Loop: 当前snippet名字。
  • prefix: 前缀,代码块使用快捷方式;键入前缀,按tab键,代码块就会被使用。
  • body: 代码块内容;换行使用\r\n
  • description: 键入前缀,vscode 感知到前缀,显示的说明内容。
  • $1,$2,$0: 指定代码模块生成后,编辑光标出现位置; 使用Tab键进行切换(编辑光标按$1,$2,$3...$0的顺序跳转),$0是光标最后可切换位置。

# Snippet语法

## Tabstops

$1$2指定代码块生成后,光标出现的位置;不同位置的相同$1位置同时出现光标。

## Placeholders

给光标出现位置加上默认值;例如,${1:another ${2:placeholder}}$1处位置默认值是another。

## Choice

光标位置设置多个值可供选择; 例如,${1|one,two,three|}$1位置处可以选择one,two,three中一个词填充在此处。

## Variables

  • 常用变量

    • TM_SELECTED_TEXT 当前选中内容或空字符串
    • TM_CURRENT_LINE 当前行内容
    • TM_CURRENT_WORD 光标处字符或空字符串
    • TM_LINE_INDEX 从0开始的行号
    • TM_LINE_NUMBER 从1开始的行号
    • TM_FILENAME 当前被编辑文档名
    • TM_FILENAME_BASE 当前被编辑文档名,没有后缀
    • TM_DIRECTORY 当前被编辑文档目录
    • TM_FILEPATH 当前被编辑文档全路径
    • CLIPBOARD 当前剪切板内容
  • 日期和时间相关变量

    • CURRENT_YEAR 当前年
    • CURRENT_YEAR_SHORT 当前年后两位
    • CURRENT_MONTH 月份,两位数字表示,例如02
    • CURRENT_MONTH_NAME 月份全称,例如 'July'
    • CURRENT_MONTH_NAME_SHORT 月份简写 ,例如'Jul
    • CURRENT_DATE 某天
    • CURRENT_DAY_NAME 星期几, 例如'Monday')
    • CURRENT_DAY_NAME_SHORT 星期几的简写, 'Mon'
    • CURRENT_HOUR 小时,24小时制
    • CURRENT_MINUTE 分钟
    • CURRENT_SECOND 秒数
  • 变量格式化

${TM_FILENAME/(.*)\\..+$/$1/}
  |           |         |  |
  |           |         |  |-> no options
  |           |         |
  |           |         |-> references the contents of the first
  |           |             capture group
  |           |
  |           |-> regex to capture everything before
  |               the final `.suffix`
  |
  |-> resolves to the filename

# 一个python snippet

"python template": {
        "prefix": "pyHeader",
        "body": [
            "#!user/bin/python"
            "# _*_ coding: utf-8 _*_"
            " "
            "# @File    :   $TM_FILENAME"
            "# @Version :   1.0"
            "# @Author  :   xxxxxxx"
            "# @Email   :   xxxxxxx"
            "# @Time    :   $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND"
            "#Description:"
            " " 

            "import datetime"
            "start_time = datetime.datetime.now()"

            "end_time = datetime.datetime.now()"
            "print(end_time-start_time)"
        ],
        "description": "my vue python template",
    }

# 参考:

Visual Studio Code Creating Snippets

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、Python简介和环境搭建以及pip的安装 4课时实验课主要内容 【Python简介】: Python 是一个...
    _小老虎_阅读 5,801评论 0 10
  • rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi阅读 7,418评论 0 10
  • NAME dnsmasq - A lightweight DHCP and caching DNS server....
    ximitc阅读 2,906评论 0 0
  • 《清晨的柠檬》 透着淡淡的清香 穿着诱人的明黄 清晨,被唤醒在厨房 你游荡在透明碗儿里 轻盈娇小的身躯随波飘荡 忽...
    芸知道阅读 205评论 2 1
  • 又是一个失眠的夜 辗转反侧 不知何故 有种似曾相识的感觉 不知何故 闻到似曾熟悉的味道 不知何故 听到似曾动人的声...
    三章半阅读 161评论 0 2