Atom編輯器代碼片段：高效代碼復(fù)用利器

代碼片段是可重用代碼塊，能快速插入程序文件，是Atom文本編輯器的核心功能。預(yù)定義片段通常與Atom包和語言語法一起提供。

自定義片段可在位於您~/.atom文件夾中的snippets.cson文件中創(chuàng)建和定義。它們需要語言標(biāo)識(shí)符、名稱、觸發(fā)文本和片段主體代碼（可選製表位）。

片段可用於Atom支持的任何編程語言，只需在定義片段時(shí)指定語言的正確範(fàn)圍即可。它們可以包含變量，並可用於插入常用代碼塊，從而節(jié)省時(shí)間並確保代碼的一致性。

代碼片段是您可以快速插入程序文件的常用代碼塊。它們非常有用，也是Atom文本編輯器的核心功能。也就是說，您可以使用該編輯器數(shù)月而沒有意識(shí)到代碼片段的存在或體會(huì)到它們的強(qiáng)大功能！ Atom包和語言語法通常附帶預(yù)定義的代碼片段。例如，啟動(dòng)或打開一個(gè)新的HTML文件，然後鍵入img並按Tab鍵。將出現(xiàn)以下代碼：

<img src="" alt="" />

光標(biāo)將位於src屬性引號(hào)之間。再次按Tab鍵，光標(biāo)將移動(dòng)到alt屬性。最後一次按Tab鍵，光標(biāo)將移動(dòng)到標(biāo)籤的末尾。當(dāng)您開始輸入時(shí)，代碼片段觸發(fā)文本將用綠色箭頭指示。您可以通過將光標(biāo)放在任何位置並按Alt-Shift-S來查看當(dāng)前文件語言類型的所有已定義代碼片段。滾動(dòng)或搜索列表以查找和使用特定代碼片段?；蛘?，在“設(shè)置”中打開“包”列表，然後輸入“l(fā)anguage”以查看所有語法類型的列表。選擇一個(gè)並滾動(dòng)到“代碼片段”部分以查看預(yù)定義的觸發(fā)器和代碼。

如何創(chuàng)建您自己的代碼片段

您將擁有自己常用的代碼塊，可以將其定義為代碼片段。我在調(diào)試Node.js應(yīng)用程序時(shí)使用的有用命令是將對(duì)像作為JSON字符串記錄到控制臺(tái)：

console.log('%j', Object);

Atom已經(jīng)有一個(gè)預(yù)定義的log觸發(fā)器用於console.log()；但是，您可以使用自定義代碼片段來改進(jìn)它。自定義代碼片段在位於您~/.atom文件夾中的snippets.cson文件中定義。從“文件”菜單中選擇“打開您的代碼片段”來編輯它。代碼片段需要以下信息：

1. 語言標(biāo)識(shí)符或範(fàn)圍字符串
2. 簡(jiǎn)潔地描述代碼的名稱
3. 一旦按下Tab鍵就會(huì)觸發(fā)代碼片段的觸發(fā)文本，以及
4. 帶有可選製表位的代碼片段主體代碼。

轉(zhuǎn)到snippets.cson的末尾，鍵入snip然後按Tab鍵——是的，甚至還有一個(gè)代碼片段可以幫助您定義代碼片段！ …

<img src="" alt="" />

請(qǐng)注意，CSON是CoffeeScript對(duì)象表示法。它是一種簡(jiǎn)潔的語法，可以直接映射到JSON；本質(zhì)上，使用縮進(jìn)而不是{}括號(hào)。首先，您需要範(fàn)圍字符串，該字符串標(biāo)識(shí)可以應(yīng)用代碼片段的語言。確定範(fàn)圍的最簡(jiǎn)單方法是在“設(shè)置”中打開“包”列表，然後輸入“l(fā)anguage”。打開所需的語法包，並在頂部附近查找“範(fàn)圍”定義。

snippets.cson中的代碼片段範(fàn)圍也必須在該字符串的開頭添加一個(gè)句點(diǎn)。流行的Web語言範(fàn)圍包括：

• HTML：.text.html.basic
• CSS：.source.css
• SASS：.source.sass
• JavaScript：.source.js
• JSON：.source.json
• PHP：.text.html.php
• Java：.source.java
• Ruby：.text.html.erb
• Python：.source.python
• 純文本（包括Markdown）：.text.plain

因此，您可以使用以下方法定義JSON日誌記錄代碼片段：

console.log('%j', Object);

一旦保存您的snippets.cson文件，代碼片段就會(huì)生效。在此示例中：

1. 範(fàn)圍設(shè)置為.source.js（用於JavaScript）
2. 代碼片段命名為“l(fā)og JSON”
3. Tab觸發(fā)器（前綴）設(shè)置為lj
4. 代碼片段主體設(shè)置為console.log('%j', Object);（但是，我們添加了一些額外的控制代碼，如下所示）。

主體內(nèi)的單引號(hào)必須用反斜杠（）轉(zhuǎn)義。製表位使用美元符號(hào)後跟數(shù)字定義，即$1、$2、$3等。 $1是光標(biāo)出現(xiàn)的第一製表位位置。按下Tab鍵時(shí)，光標(biāo)將移動(dòng)到$2，依此類推。上面的製表位$1已使用默認(rèn)文本定義，以提醒或提示用戶：${1:Object}。使用代碼片段時(shí)，Object在console.log('%j', Object);中被選中，因此可以將其更改為適當(dāng)?shù)膶?duì)象名稱。

可以將其他代碼片段添加到snippets.cson文件的底部。如果需要同一語言的兩個(gè)或多個(gè)代碼片段，請(qǐng)將它們添加到相應(yīng)的範(fàn)圍部分。例如，您可以在.source.js範(fàn)圍內(nèi)創(chuàng)建另一個(gè)JavaScript代碼片段來記錄任何數(shù)組的長(zhǎng)度：

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

請(qǐng)注意，這有兩個(gè)${1:array}製表位。當(dāng)出現(xiàn)console.log('array length', array.length);時(shí)，您將看到兩個(gè)光標(biāo)，並且array的兩個(gè)實(shí)例都將被突出顯示——您只需鍵入一次數(shù)組名稱，兩者都會(huì)更改！

多行代碼片段

如果您感覺更有冒險(xiǎn)精神，可以使用三個(gè)雙引號(hào)"""在主體代碼的開頭和結(jié)尾定義更長(zhǎng)的多行代碼片段。此代碼片段生成一個(gè)帶有單個(gè)標(biāo)題行的2×2表格：

<img src="" alt="" />

代碼片段主體內(nèi)的代碼縮進(jìn)對(duì)CSON定義沒有任何影響，但我建議您將其縮進(jìn)到主體定義之外，以提高可讀性。祝您代碼片段編寫愉快！如果您不熟悉Atom，還應(yīng)參考10個(gè)必備Atom附加組件以獲取推薦的包。

關(guān)於在Atom中使用代碼片段的常見問題解答 (FAQ)

如何在Atom中創(chuàng)建一個(gè)新的代碼片段？

在Atom中創(chuàng)建新的代碼片段是一個(gè)簡(jiǎn)單的過程。首先，您需要通過轉(zhuǎn)到“文件”菜單，然後轉(zhuǎn)到“代碼片段”來打開代碼片段文件。這將打開一個(gè).cson文件，您可以在其中定義代碼片段。每個(gè)代碼片段都以.source行開頭，該行指定它適用的語言，後跟引號(hào)中的代碼片段名稱。然後，您定義將觸發(fā)代碼片段的前綴以及代碼片段本身的主體。主體可以是多行，並使用${1:default_text}語法來指定製表位。

如何在Atom中使用代碼片段？

要在Atom中使用代碼片段，您只需鍵入為代碼片段定義的前綴，然後按“Tab”鍵即可。這將在光標(biāo)所在位置插入代碼片段的主體。如果您的代碼片段有製表位，您可以使用“Tab”鍵在它們之間移動(dòng)並輸入所需的文本。

我可以在Atom中的任何編程語言中使用代碼片段嗎？

是的，您可以將代碼片段用於Atom支持的任何編程語言。您只需要在定義代碼片段時(shí)指定語言的正確範(fàn)圍即可。例如，對(duì)於JavaScript，您將使用.source.js，對(duì)於Python，您將使用.source.python。

如何與他人共享我的代碼片段？

如果您想與他人共享您的代碼片段，您可以簡(jiǎn)單地共享您的snippets.cson文件。此文件包含您所有的代碼片段定義，可以在您的Atom配置目錄中找到?；蛘撸梢詣?chuàng)建一個(gè)包含代碼片段的包，並將其發(fā)佈到Atom包存儲(chǔ)庫。

我可以使用代碼片段來插入常用代碼塊嗎？

絕對(duì)可以！代碼片段是插入常用代碼塊的好方法。您可以為經(jīng)常鍵入的任何代碼片段定義一個(gè)代碼片段，然後只需幾個(gè)按鍵即可插入它。這可以節(jié)省您大量時(shí)間，並有助於確保代碼的一致性。

如何編輯Atom中現(xiàn)有的代碼片段？

要在Atom中編輯現(xiàn)有的代碼片段，您需要打開snippets.cson文件並找到要編輯的代碼片段。然後，您可以根據(jù)需要修改前綴、主體或範(fàn)圍。完成後，請(qǐng)記住保存文件以應(yīng)用更改。

我可以在代碼片段中使用變量嗎？

是的，您可以在代碼片段中使用變量。變量由${1:default_text}表示，其中“1”是製表位，“default_text”是將插入的默認(rèn)文本。您可以使用變量在代碼片段中創(chuàng)建佔(zhàn)位符，以便在插入代碼片段時(shí)可以快速填寫這些佔(zhàn)位符。

如何刪除Atom中的代碼片段？

要?jiǎng)h除Atom中的代碼片段，您需要打開snippets.cson文件並找到要?jiǎng)h除的代碼片段。然後，只需刪除定義代碼片段的代碼行並保存文件即可。代碼片段將立即被刪除。

我可以將其他編輯器的代碼片段導(dǎo)入Atom嗎？

雖然Atom沒有內(nèi)置的功能可以從其他編輯器導(dǎo)入代碼片段，但您可以手動(dòng)複製其他編輯器中的代碼片段定義並將它們粘貼到Atom中的snippets.cson文件中。您可能需要稍微調(diào)整一下語法以匹配Atom的代碼片段語法。

我可以在Atom的查找和替換功能中使用代碼片段嗎？

是的，您可以在Atom的查找和替換功能中使用代碼片段。當(dāng)您打開查找和替換面板時(shí)，您可以在“替換”字段中輸入代碼片段。當(dāng)您執(zhí)行替換操作時(shí)，代碼片段將插入到找到的文本的位置。

以上是如何在原子中使用代碼片段的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！