在VScode/Sublime中创建自己的代码片段

代码片段就是你只需要按出特定缩写，之后按下tab或回车就能生成一行或一片代码。

当你熟练使用代码片段后，写代码速度会大幅度提升。

文章写的不好的地方欢迎在评论区指出~

目录：

VScode添加代码片段：

html：生成zh-CN的骨架片段

css：快速生成*{margin:0;padding:0;}

 Sublime添加代码片段：

html：生成zh-CN的骨架片段

scope类型列表

---

VScode添加代码片段：

点击左下角设置按钮》用户代码片段（User Snippets），之后选择你想在哪个文件类型中添加定义代码片段。打开后是这样的：

{
    // Place your snippets for html 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": "log",
    // 	"body": [
    // 		"console.log('$1');",
    // 		"$2"
    // 	],
    // 	"description": "Log output to console"
    // }
}

注释里面把使用方法已经写的很详细，不懂英文的看下面我有给你们翻译。
本篇文章将写两个示例html文件和css文件

html：生成zh-CN的骨架片段

为什么要写这个？因为默认生成的骨架是英文的骨架

跟着注释里的Example修修改改，照葫芦画瓢就是。

 "Print to console": {  //双引号里面的是代码片段名字，当多个片段缩写相同时会提示这个名字
  "prefix": "log",  //定义你代码片段的简写
  "body": [    //这个数组里面是你生成的内容，每个字符串元素为一行
   "console.log('$1');",
   "$2"    //$1 $2是按下tab时光标停在的位置，将按从小到大顺序依次停留
  ],       //当有多个相同的$n时光标会同时停留在多个位置  $0是最终光标位置
  "description": "Log output to console"  //这个是代码片段的介绍，会在代码提示中出现
 }                                        //想出现多行提示可以加入\n来换行

 别忘了在 数组的元素之间 以及 对象末尾 添加英文逗号。否者报错

 "中文HTML骨架": {
  "prefix": "!zh",
  "body": [
   "",
   "",
   "",
   "",
   "",
   "",
   "",
   "$0",
   "",
   "",
  ],
  "description": "by HMYang33\n生成中文语言声明的html骨架\n"
 },

缩写不需要全部打出来，提示就能出现了 之后按下tab或者回车，或是鼠标点选
就能生成你定义好的的代码片段

键入缩写，按下tab生成后编辑title标签，再次按下tab光标跳到body标签之间。

css：快速生成*{margin:0;padding:0;}

每次起手写css都要先打一遍*{marign:0;padding:0;}
虽然编辑器有自带的简写m0  p0 但还不如自己定义一个简写更快一点

设置 >> 用户代码片段 >> css.json

 "cssStart":{
		"prefix": "*m0p0",
		"body": [
			"*{",
			" margin: 0px;",
			" padding: 0px;",
			"}",
			"$0"
		],
		"description": "by HMYang33\ncss之旅的开始"
 },

 Sublime添加代码片段：

中文：工具 >> 插件开发 >> 新建代码片段

英文：Tools >> Developer >>New Snippet...

 打开之后就是这样：

注释里有说：tabTrigger是代码片段的缩写
                        scope是作用到文件的类型，多个文件的类型之间用英文逗号隔开，当不写scope类型时作用于所有文件。点击查看scope类型列表。
此外还有一个用作代码提示时的文本description标签。当没有此标签时，这个配置文件的文件名将作为提示

把Hello那一行删掉，写我们的代码片段就好了，如果有多行代码片段可以直接回车换行。
其中的$1,$2是tab后光标的位置，$0是光标最后的位置。如果没有写$0那么这段代码结尾处就是$0

html：生成zh-CN的骨架片段

	






$0


]]>
	
	zhcn
	
	text.html
	生成中文语言声明的html骨架

把这个文件保存为    .sublime-snippet   类型的文件，保存到
C:\Users\用户名\AppData\Roaming\Sublime Text 3\Packages\User\
注意：每一个.sublime-snippet文件只能保存一个代码片段。但你可以在上述的目录下建立文件夹，你的编辑器会向文件夹内搜索你的代码片段的。
测试发现sublime中写html时必须先写出小于号才会开始出现提示。
所以如果想要提示的出现可以把代码片段的第一个小于号删除掉防止多出来一个小于号（如下图）。
或者不要提示，输入代码片段缩写的全拼zhcn然后按tab也可以。
                            如果一次tab没有出现时可以试试连按两次tab

scope类型列表

文件类型	scope
ActionScript	source.actionscript.2
AppleScript	source.applescript
ASP	source.asp
Batch File	source.dosbatch
BibTex	source.bibtex
C#	source.cs
C++	source.c++
Clojure	source.clojure
CSS	source.css
D	source.d
Diff	source.diff
Erlang	source.erlang
Go	source.go
GraphViz	source.dot
Groovy	source.groovy
Haskell	source.haskell
HTML	text.html
HTML(TCL)	text.html.tcl
Java	source.java
Jade	source.jade
Javascript	source.js
Java Properties	source.java-props
Java Doc	text.html.javadoc
JSON	source.json
JSP	text.html.jsp
Latex	text.tex.latex
Latex Log	text.log.latex
Latex Memoir	text.tex.latex.memoir
Less	source.less
Lisp	source.lisp
Lua	source.lua
MakeFile	source.makefile
Markdown	text.html.markdown
Matlab	source.matlab
Multi Markdown	text.html.markdown.multimarkdown
Objective-C	source.objc
Objective-C++	source.objc++
OCaml campl4	source.camlp4.ocaml
Ocaml	souce.ocaml
OCamllex	source.ocamllex
Perl	source.perl
Pug	text.pug
PHP	source.php
Plain text	text.plain
Python	source.python
R	source.r
R Console	source.r-console
Regular Expression(python)	source.express.python
Regular Expression	source.regexp
RestructuredText	text.restructuredtext
Ruby	source.ruby
Ruby on Rails	source.ruby.rails
Ruby HAML	text.haml
Sass	source.sass
Scala	source.scala
Shell Script	source.shell
SQL(Ruby)	source.sql.ruby
SQL	source.sql
TCL	source.tcl
Textile	text.html.textile
Tex	text.tex
XML	text.xml
XSL	text.xml.xsl
YAML	source.yaml