sublime text 之snippet功能的使用

標籤：

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

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

　　以下進入本文：

• 安裝sass snippet外掛程式 （支援該功能的外掛程式，sublime 2和3都可以使用該功能）

1. windows下 按ctrl+shift+p 開啟sublime的命令列，輸入 ‘pci’（package control：install package的縮寫）
2. 稍等片刻後，待sublime串連網路彈出搜尋方塊。接著搜尋sass snippet 並點擊安裝。

• 查看snippet功能是否可用

1. 建立一個html檔案，按ctrl+shift+p 後輸入snippet，看是否有相應的snippet欄位。如果有，則表示snippet可正常使用。

• 查看對應檔案的scope

1. snippet功能通過鍵入關鍵詞後按tab完成代碼不全，但是很多時候我們針對不同檔案類型，並不需要其他檔案中使用的代碼，所以需要查看某些檔案對應的scope
2. 開啟要編輯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

1. 點擊上方選項來中的 Tools >小片段（漢化後，英文版應該就直接是snippet）
2. 點擊後，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的儲存

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

• snippet的使用

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

 

• 測試

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

<snippet>
    <content><![CDATA[
<?php
/**
*以下代碼用於${1:index}輸出
*
*詳解
* @author      rex<[email protected]>
* @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的尾碼是否正確。總的來　　說，該功能還是比較簡單好用的。能出問題的地方也不多。

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

sublime text 之snippet功能的使用