阅读 163

VS code 设置代码快捷拓展段

背景

从臃肿的 Webstorm 转向更加轻便的微软爸爸的 VS code 也有一段时间了
总的来说,VS code 更加轻巧,可拓展性更强,同时它又是 Typescript 写的,根正苗红,又背靠微软这颗大树,插件生态又很不错,用得还是很舒服的
但是,有一个我用得很不习惯的就是生成代码快捷 VS code 一开始是不支持的,而 Webstorm 是内置很多代码快捷拓展段的,例如:

  • JS 文件中:输入 c + Tab 键会快速生成 console.log()
  • CSS 文件中:输入 bd+ + Tab 键会快速生成 border:1px soild #000;
    ...

VS code 中设置代码快捷拓展段

VS code 轻巧一大原因就是舍弃了很多配置,丢给开发者的就是如同一张白纸的编译器:“想让我给你配置花里胡哨的功能?你配吗?”
所以 VS code 内部有大量的 JSON 配置文件让开发者自己配置,自己动手,丰衣足食! 那么,不多 BB ,设置代码快捷拓展段:

  1. 点击 VS code 左下角的小齿轮,再选择 "User Snippets" (用户代码段) 选项
  2. 这时候会出现大量的可设置文件:javascript.jsoncss.jsonhtml.json...这些都是可以配置的 JSON 文件
  3. 这里以 javascript.json 为例,点开 javascript.json
{
	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"Print to console": {
		"prefix": "c",
		"body": [
            "console.log($0);",
		],
		"description": "Console 快捷键"
  }
}
复制代码

其实 VS code 已经将配置的详解在注释中解释了:

把你的javascript代码片段放在这里 每个代码段都以代码段名称定义,并具有前缀、正文和描述。前缀是用来触发代码段的,主体将被展开和插入 可能的变量为:$1$2制表位,$0用于最后的光标位置

我自己配置了一个快捷选项:

  • "Print to console":快捷选项的名称
  • "prefix":前缀,在 JS 文件中输入前缀 + Tab 键就会自动拓展出"body" 中的内容
  • "body":正文,即拓展内容, body 是一个数组,即可以通过一个小小的前缀拓展出一个很大的代码段
  • "description":描述,当你在 JS 输入前缀的时候,这时候会出现代码提示框,这时候框中就会出现"description"的内容
  • $0,$1,$2:这些符号不会最终出现在拓展代码中,你可以将它们理解为占位符
    $0 是最后光标的位置,默认代码拓展后,光标在语句的尾部,但是在 "body" 中插入 $0 ,会改变光标的位置,在上面的例子中,"console.log($0);",最后光标会直接出现在小括号中,我们就可以直接在其中编辑我们要打印的语句了
    $1,$2用法其实类似 $0 ,你可以理解为 Tab 占位符, 如果是这样的正文:"$2cons$1ole.log($0);"。那么代码拓展后光标会出现在$1 的位置($1 光标占位优先级比 $0,$2 高),然后你按下 Tab 键会跳到 $2 的位置,再按下 Tab 键,会跳到 $0 的位置
    就是这么神奇,其实我觉得一般的拓展会使用 $0 就够了

抛砖引砖

我刚刚上面简述了一下设置 JS 的代码快捷拓展,其实写 CSS 如果可以快速拓展代码,也能省下很多时间: 打开 css.json :

  "Print to border": {
    "prefix": "bd",
    "body": [
      "border:1px solid #000;",
    ],
    "description": "快速设置 border"
  }
复制代码

这样输入:bd + Tab 键就能快速设置 border 了!

关注下面的标签,发现更多相似文章
评论