sublime text 小巧而功能強大，有著好看的外觀，被譽為世界上最“性感”的IDE。sublime text也是本小白在最近的學習和做項目當中最常使用的IDE。小巧且功能強大，對于開發前端以及小型項目來說綽綽有余。

　　但對于諸多功能，本白也是通過網上的一些大神筆記以及官網上的一些功能才了解并使用到的。最近習得的功能中，其中一個叫snippet的小功能讓人覺得很有意思。于是乎，本白決定以此文記錄一下使用的過程，以便不時之需。

　　以下進入正文：

安裝sass snippet插件 （支持該功能的插件，sublime 2和3都可以使用該功能）

windows下 按ctrl+shift+p 打開sublime的命令行，輸入 ‘pci’（package control：install package的縮寫）
稍等片刻后，待sublime連接網絡彈出搜索框。接著搜索sass snippet 并點擊安裝。

查看snippet功能是否可用

新建一個html文件，按ctrl+shift+p 后輸入snippet，看是否有相應的snippet字段。如果有，則表示snippet可正常使用。

查看對應文件的scope

snippet功能通過鍵入關鍵詞后按tab完成代碼不全，但是很多時候我們針對不同文件類型，并不需要其他文件中使用的代碼，所以需要查看某些文件對應的scope
打開要編輯snippet代碼塊指定補全的代碼類型或者通過命令行（ctrl+shift+p）鍵入‘ssphp’（set syntax:php 設置文件類型為php）。接著按ctrl+shift+alt+p，在編輯器下方就會顯示對應的scope。比如php文件和html文件對應的scope是‘text.html’，而css和js則是source.css和source.js。

新建snippet并編輯snippet

點擊上方選項來中的 Tools >小片段（漢化后，英文版應該就直接是snippet）
點擊后，sublime會直接新建一個文件，內容如下：

<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> --> <!--使用時注釋去掉，將中間的詞換成按tab觸發補全的關鍵詞-->
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> --> <!--設置在什么文件類型下觸發補全，填寫上文獲得的scope-->
</snippet>　

　　3.補全內容中，$符號表示的是代碼不全后光標出現的位置和順序。比如${1:this}：意為光標在此第一次出現，默認值為this，且該默認值被選中。如果有多個$1，則光標同　　時出現在此處，而默認值只按照第一個設置的值出現。下面定義了${2:snippet}，所以，當修改了$1后，按tab，則直接跳轉到$2的位置。另外，如果需要顯示$符號，則需　　要在符號前面加‘’轉義。

　　4.如果觸發關鍵詞和sublime text中自帶的代碼補全關鍵詞有沖突的話，可能會造成該snippet無效。

snippet的保存

編輯完的snippet需要使用sublime text規定的后綴： .sublime-snippet。
代碼保存到sublime text安裝路徑下的：Data > Packages > User 目錄下即可。
建議在User 目錄下新建一個snippet目錄專門保存snippet的代碼塊。（不影響功能）。

snippet的使用

編輯完后，打開新建一個該snippet對應文件類型的文件后，鍵入關鍵字并按tab即可完成代碼的補全
css的代碼塊補全前，需要在關鍵字前加'.'或者'#'然后再按tab。（此處略坑。所以在編輯snippet的時候，可以在代碼塊前加個$1,補全后可以直接把符號刪除。）

測試

如果所編輯的snippet無效，可以使用下面snippet測試一下，本白親測：

<snippet>
<content><![CDATA[
<?php
/**
*以下代碼用于${1:index}輸出
*
*詳解
* @author rex<rex.sp.li@aliyun.com>
* @version 1.0
* @since 2015
*/
//聲明編碼
header('content-type:text/html;charset=utf-8');
//設置時區
date_default_timezone_set('PRC');

$2

?>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>pb</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>text.html</scope>
</snippet>

　　上述snippet在html和php中都同樣有效。如果該snippet無法正常發揮作用，先ctrl+shift+p 搜索是否安裝了sass snippet。接著查看snippet的后綴是否正確?？偟膩怼　≌f，該功能還是比較簡單好用的。能出問題的地方也不多。

　　然后，就開始你的第一段snippet的編寫吧。

總結

以上是生活随笔為你收集整理的sublime text 之snippet功能的使用 -李盛鹏 -博客园的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。