free 性欧美1819hd,99无码人妻一区二区三区免费

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

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

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

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

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

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

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

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

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

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

首頁

科技週邊

IT業(yè)界

如何在原子中使用代碼片段

Christopher Nolan

Feb 19, 2025 am 08:34 AM

How to Use Code Snippets in Atom

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

snippets.cson中的代碼片段範(fà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文件，代碼片段就會生效。在此示例中：

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

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

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

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

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

多行代碼片段

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

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

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

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

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

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