Atom 代碼段

2018-10-31 15:15 更新

代碼段

代碼段是一個非常有效的工具,可以從一個快捷方式中快速生成常用的代碼語法。

這就是說,你可以輸入一些類似于habtm的東西,然后按下回車鍵,他就會擴展為has_and_belongs_to_many。

許多包自帶他們自己的,具有特定模式的代碼段。比如,提供了html語法高亮和語法的language-html包提供了許多代碼段,來創(chuàng)建一些你想使用的不同HTML標簽。如果你在Atom中創(chuàng)建一個新的HTML文件,你可以輸入html然后按下tab,它會擴展為:

<html>
  <head>
    <title></title>
  </head>
  <body>

  </body>
</html>

同時它會把光標放在title標簽的中間,以便你立即開始填充這個標簽。許多代碼段具有多個焦點位置,你可以按下tab在他們之間切換 —— 比如,在這個HTML代碼段之中,你填充完標題標簽之后,可以按下tab鍵,然后光標就會移動到body標簽之間。

要查看當前打開文件擁有的所有代碼段,你可以按下alt-shift-S。

你也可以在選擇輸入框中輸入內(nèi)容,來使用模糊搜索過濾這個列表。選擇其中一個之后會執(zhí)行光標所在的代碼段(或者多個光標所在的代碼段)。

創(chuàng)建你自己的代碼段

所以說這樣太爽了。但是,如果語言包中沒有包含一些東西,或者你的代碼中要編寫一些自定義的東西,那會怎么樣呢?很幸運的是,你可以非常便利地添加自己的代碼段。

在你~/.atom目錄下的snippets.cson文件,存放了你的所有自定義的代碼段,他們會在Atom運行時加載。但是,你也可以通過Atom > Open Your Snippets菜單,輕易打開這個文件。

代碼段的格式

現(xiàn)在讓我們看一看如何編寫代碼段,基本的代碼段格式像這個樣子:

'.source.js':
  'console.log':
    'prefix': 'log'
    'body': 'console.log(${1:"crash"});$2'

最外面的鍵是選擇器,即在哪里會加載代碼段。決定它應(yīng)該是什么的最簡單的方法,是訪問你想要添加代碼段的語言的語言包,并找到“Scope”字符串。

例如,你想要添加在Java文件中工作的代碼段,我們應(yīng)該先在我們的設(shè)置視圖中尋找language-java包,然后我們看到了Scope是“source.java”,代碼段最頂層的鍵就應(yīng)該是它前面加上一個點(就像CSS選擇器那樣)。

下一層的鍵是代碼段的名字,用于在代碼段菜單中,以一個更具可讀性的方式來描述代碼段。通常來說,這里最好使用對人來說具有可讀性的字符串。

在每個代碼段的名字下面是prefix,用于觸發(fā)代碼段,以及body,當代碼段被觸發(fā)后用于插入。

每個后面帶有數(shù)字的$是tab的停止位置。在代碼段被觸發(fā)之后,通過按下tab鍵來遍歷它們。

上面的例子向Javascript文件添加了log代碼段,它會被擴展為:

console.log("crash");

其中的"crash"字符串會在開始時被選中,再次按下tab鍵之后,光標會移動到分號之后。

并不像CSS選擇器,代碼段的鍵每層只能重復(fù)一次。如果某一層有重復(fù)的鍵,只有最后的那個會被讀到,詳見配置CSON。

多行代碼段主體

對于長一些的模板,你可以使用"""來使用多行語法。

'.source.js':
  'if, else if, else':
    'prefix': 'ieie'
    'body': """
      if (${1:true}) {
        $2
      } else if (${3:false}) {
        $4
      } else {
        $5
      }
    """

像你可能期待的那樣,這是一個創(chuàng)建代碼段的代碼段。如果你打開一個代碼段文件,輸入snip之后按下tab,會將以下內(nèi)容插入到文件中:

'.source.js':
  'Snippet Name':
    'prefix': 'hello'
    'body': 'Hello World!'

砰的一下,就把那個東西填充了,然后得到了一個代碼段。只要你保存了文件,Atom就會重新加載它,你也就能立即使用它了。

代碼段功能在atom/snippets包中實現(xiàn)。

更多例子請見language-html中的代碼段,和language-javascript包。

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號