subllime text 创建可复用的代码片段

对于前端工程师来讲，写一个html页面的基本结构是体力活，每次去拷贝一个也麻烦，sublime text 2 提供了一个很好的复用代码片段。下面介绍一下创建一个html5的代码片段的过程。

在菜单上点击Tools -> New Snippet，会新建一个xml文件页签：

<snippet>
    <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <!-- <tabTrigger>hello</tabTrigger> -->
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
　　<!-- Optional: Description to show in the menu --> 
　　<!-- <description>My Fancy Snippet</description> -->
</snippet>

content 里面就是代码模版：${序号：默认值} ，序号相同的地方光标会同时停在那可以多处同时编辑。序号大小就是tabindex。在实际使用代码的时候，可以使用tab切换光标位置。

tabTrigger是指输入该字符串后tab就是在光标插入content中的内容。

scope是指在何种文件类型中使用。

 

下面是html5代码片段的定义：

<snippet>
    <content><![CDATA[
<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>${1}</title> 
</head>
<body>
    <h1>${1}</h1>
    Hello, ${2:this} is a ${3:snippet}.
</body>
</html>
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>html5</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

编辑完之后保存为 C:\Users\[用户]\AppData\Roaming\Sublime Text 2\Packages\User\html5.sublime-snippet  (Win7下) 默认的保存路径就行。后缀必须是.sublime-snippet。

保存完重启Sublime text 2，新建文件：输入html5,tab会出现如下效果：

${1}出现了两次，所以光标同时编辑图中两处。
${2:this}，所以在2处出现this默认值。${1}处编辑完按tab就到${2}处，${2}处默认显示snippet

 

scope 设置：

　　进入包所在目录，如果不知道目录位置，可以在编辑器内选“Preferences”-->“Browse Packages”菜单，在弹出的对话框里就能看到包所在路径：

　　

　　进入对应的包内找到扩展名为“tmLanguage”的文件，打开它，从文件内查找“scopeName”这个串，找到后，紧跟其后的“string”节点内的值就是此语言对应的scope名称。

　　

　

语言（语法）

Scope名称

ActionScript

source.actionscript.2

ActionScript 3

source.actionscript.3

Ant

text.xml.ant

AppleScript

source.applescript

ASP

source.asp

Batch File

source.dosbatch

Bibtex

text.bibtex

C

source.c

C#

source.cs

C++

source.c++

camlp4

source.camlp4.ocaml

Clojure

source.clojure

CoffeeScript

source.coffee

CSS

source.css

D

source.d

Diff

source.diff

DOT

source.dot

Emmet

source.zen.5a454e6772616d6d6172

Erlang

source.erlang

Go

source.go

Groovy

source.groovy

Haskell

source.haskell

Hex

source.hex

HTML

text.html.basic

HTML (ASP)

text.html.asp

HTML (Erlang)

text.html.erlang.yaws

HTML (Rails)

text.html.ruby

HTML (Tcl)

text.html.tcl

HTML5

text.html.basic

Java

source.java

Java Server Pages (JSP)

text.html.jsp

JavaDoc

text.html.javadoc

JavaProperties

source.java-props

JavaScript

source.js

JavaScript (Rails)

source.js.rails

jQuery (JavaScript)

source.js.jquery

JSON

source.json

LaTeX

text.tex.latex

LaTeX Beamer

text.tex.latex.beamer

LaTeX Log

text.log.latex

LaTeX Memoir

text.tex.latex.memoir

Lisp

source.lisp

Literate Haskell

text.tex.latex.haskell

Lua

source.lua

Makefile

source.makefile

Markdown

text.html.markdown

Matlab

source.matlab

MultiMarkdown

text.html.markdown.multimarkdown

MXML

text.xml.mxml

NAnt Build File

source.nant-build

Objective-C

source.objc

Objective-C++

source.objc++

OCaml

source.ocaml

OCamllex

source.ocamllex

OCamlyacc

source.ocamlyacc

Perl

source.perl

PHP

source.php

Plain text

text.plain

Python

source.python

R

source.r

R Console

source.r-console

Rd (R Documentation)

text.tex.latex.rd

RegExp

source.regexp

Regular Expressions (Python)

source.regexp.python

reStructuredText

text.restructuredtext

Ruby

source.ruby

Ruby Haml

text.haml

Ruby on Rails

source.ruby.rails

Scala

source.scala

SFTP Output Panel

output.sftp

Shell Script (Bash)

source.shell

SQL

source.sql

SQL (Rails)

source.sql.ruby

Tasks

text.todo

Tcl

source.tcl

TeX

text.tex

TeX Math

text.tex.math

Textile

text.html.textile

XML

text.xml

XSL

text.xml.xsl

YAML

source.yaml
　

 
更多配置请参考 http://docs.sublimetext.info/en/latest/extensibility/snippets.html

 

参考（http://www.blogjava.net/Hafeyang/archive/2012/08/17/how_to_create_code_snippet_in_subline_text_2.html）

posted @ 2015-11-05 17:48  *骑着蜗牛游世界*  阅读(318)  评论(0)    收藏  举报