创建 vscode snippet 笔记

2019-04-15

本篇记录一下如何在vscode中创建spineet。

引言

在写blog的时候,经常会写header的相关信息。因此通过设置一下vscode的snippet来解决一下这个问题。

snippet 代码片段

代码片段就是我们在写代码的时候通过key和tab快速生成相关代码。例如我们经常用的log,rcc,rccp等等。自定义代码片段可以大大提高的我们代码复用,提升开发效率。

vscode document

vscode中打开snippet设置

通过Cmd + Shift + P 或者 F1 打开命令窗口输入snippet选择相关的语言文件进行设置。

vscode snippet 默认示例说明

{
    "Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log output to console"
    }
}
  • pring to console:代码片段名称
  • prefix 触发前缀
  • body 代码主体
  • description 代码片段描述

其中$1、$2、$3代表tab光标顺序

我们还可以通过$+变量来获取我们的文件名、路径、时间等

  • TM_FILENAME:当前文档的文件名
  • TM_FILENAME_BASE:当前文档的文件名(无后缀名)
  • TM_DIRECTORY:当前文件目录
  • TM_FILEPATH:当前文件的完整文件路径
  • CURRENT_YEAR:年份
  • CURRENT_MONTH:月份
  • CURRENT_DATE:天
  • CURRENT_HOUR:小时
  • CURRENT_MINUTE:分钟
  • CURRENT_SECOND:秒

我们可以看一下其它的优秀的snippet扩展vscode-react

需要注意

其中需要注意的是,当我再markdown.json中设置好我的snippet之后,遇到了不生效的问题,经查阅,发现是vscode预设不会检测到markdown的snippet,因此去settings.json

"[markdown]": {
  "editor.quickSuggestions": true 
}

接下来

接下来希望找一个空的时间将自己常用的代码片段自定义一下。事实上感觉到自己安装的一些vscode的扩展中很多并不是自己很常用的。