Atom Editorコードスニペット：効率的なコード再利用ツール

コードスニペットは、プログラムファイルをすばやく挿入できる再利用可能なコードブロックであり、Atom Text Editorのコア関數(shù)です。事前定義されたフラグメントには、通常、原子パッケージと言語(yǔ)構(gòu)文が付いています。

カスタムスニペットを作成して、~/.atomフォルダーにあるsnippets.csonファイルで定義できます。言語(yǔ)識(shí)別子、名前、トリガーテキスト、およびフラグメントボディコード（オプションのタブ）が必要です。

スニペットは、Atomでサポートされているプログラミング言語(yǔ)で使用できます。フラグメントを定義するときに、言語(yǔ)の正しい範(fàn)囲を指定するだけです。変數(shù)を含めることができ、一般的なコードブロックを挿入し、時(shí)間を節(jié)約し、コードの一貫性を確保するために使用できます。

コードスニペットは、プログラムファイルをすばやく挿入できる一般的なコードブロックです。それらは非常に便利であり、Atom Text Editorのコア機(jī)能でもあります。つまり、コードスニペットの存在を認(rèn)識(shí)したり、その力を経験したりすることなく、編集者を數(shù)ヶ月使用できます！ Atomパッケージと言語(yǔ)構(gòu)文には通常、事前定義されたコードスニペットが付屬しています。たとえば、新しいHTMLファイルを開(kāi)始または開(kāi)き、[IMGと[押し]タブを入力します。次のコードが表示されます：

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

カーソルは、src屬性の引用符の間に配置されます。タブキーをもう一度押すと、カーソルがaltプロパティに移動(dòng)します。最後にタブキーを押すと、カーソルがラベルの最後に移動(dòng)します。入力を開(kāi)始すると、コードスニペットトリガーテキストは緑色の矢印で示されます。カーソルをどこにでも置き、Alt-Shift-Sを押すことにより、現(xiàn)在のファイル言語(yǔ)タイプのすべての定義されたコードスニペットを表示できます。リストをスクロールまたは検索して、特定のコードスニペットを見(jiàn)つけて使用します。または、設(shè)定でパッケージリストを開(kāi)き、言語(yǔ)を入力してすべての構(gòu)文タイプのリストを表示します。 1つを選択し、コードスニペットセクションにスクロールして、事前に定義されたトリガーとコードを表示します。

獨(dú)自のコードスニペットを作成する方法

コードスニペットとして定義できる獨(dú)自の一般的に使用されるコードブロックがあります。 node.jsアプリケーションをデバッグするときに使用する便利なコマンドは、JSON文字列としてオブジェクトをコンソールにログに記録することです。

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

の事前定義されたトリガーがあります。カスタムコードスニペットは、フォルダーにあるlogファイルで定義されています。 [ファイル]メニューからコードスニペットを開(kāi)くには、編集します。コードスニペットには、次の情報(bào)が必要です console.log() ~/.atom言語(yǔ)識(shí)別子またはsnippets.cson範(fàn)囲

1. コードの名前を簡(jiǎn)単に説明します タブキーが押されたら、コードスニペットのトリガーテキストがトリガーされ、
オプションのタブを備えたコードスニペットボディコード。
3. 、タイプ
、[[??]を押して、タブを押します - はい、コードスニペットの定義に役立つコードスニペットもあります。 …

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

   CSONはコーヒースクリプトオブジェクト表記であることに注意してください。これは、JSONに直接マッピングできる簡(jiǎn)潔な構(gòu)文です。{}ブラケットの代わりにインデントを使用します。まず、コードのスニペットを適用できる言語(yǔ)を識(shí)別する範(fàn)囲文字列が必要です。スコープを決定する最も簡(jiǎn)単な方法は、設(shè)定でパッケージリストを開(kāi)き、「言語(yǔ)」を入力することです。必要な構(gòu)文パッケージを開(kāi)き、上部近くの「スコープ」定義を探します。

   コードスニペット範(fàn)囲の<人気のあるWeb言語(yǔ)範(fàn)囲には次のものがあります

   snippets.csonhtml：

   • css：.text.html.basic
   • sass：.source.css
   • javascript：.source.sass
   • json：.source.js
   • php：.source.json
   • java：.text.html.php
   • ルビー：.source.java
   • python：.text.html.erb
   • プレーンテキスト（マークダウンを含む）：.source.python
   • したがって、次の方法を使用して、JSONロギングコードスニペットを定義できます。 .text.plain
   ファイルが保存されると、コードスニペットが有効になります。この例では、

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

   スコープは

   （javascriptの場(chǎng)合）snippets.csonに設(shè)定されています

   コードスニペットの名前は「log json」
   です
   1. タブトリガー（プレフィックス）は.source.js
   に設(shè)定されています
   2. コードスニペットの本文は
   に設(shè)定されています（ただし、以下に示すように追加の制御コードを追加しました）。
   3. lj
   體內(nèi)の単一の引用は、backslash（）で逃げる必要があります。タブの停止は、1ドルの標(biāo)識(shí)に続いて番號(hào)、つまり1ドル、2ドル、3ドルなどを使用して定義されます。 $ 1は、カーソルが表示される最初のタブポジションです。タブキーが押されると、カーソルは2ドルなどに移動(dòng)します。上記のタブSTOP $ 1は、デフォルトのテキストを使用して定義されており、ユーザーにリマインドまたはプロンプトが表示されます。コードスニペットを使用する場(chǎng)合、
   4. でconsole.log('%j', Object);で選択されているため、適切なオブジェクト名に変更できます。
   他のコードスニペットを

   ファイルの下部に追加できます。同じ言語(yǔ)の2つ以上のコードスニペットが必要な場(chǎng)合は、対応するスコープセクションに追加します。たとえば、アレイの長(zhǎng)さを記録するために、${1:Object}の範(fàn)囲で別のJavaScriptコードスニペットを作成できます。 Object console.log('%j', Object); 2つのタグがあることに注意してください。

   が表示されると、2つのカーソルが表示され、両方のインスタンスが強(qiáng)調(diào)表示されます - 配列名を1回だけ入力すると、両方が変更されます！

   snippets.csonマルチラインコードスニペット.source.js

   より冒険心がある場(chǎng)合は、3つの二重引用符 "" "を使用して、ボディコードの最初と終了時(shí)に長(zhǎng)いマルチラインコードスニペットを定義できます。このコードスニペットは、単一のヘッダーラインで2×2を生成します。テーブル：<

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

   コードスニペットの本體內(nèi)のコードインデンテーションは、CSON定義には影響しませんが、読みやすくするためにボディの定義の外側(cè)にインデントすることをお?jiǎng)幛幛筏蓼?。コードスニペットの幸せな文章をお祈りします！ Atomが初めての場(chǎng)合は、推奨されるパッケージの10個(gè)のEssential Atomアドオンも參照する必要があります。
   Atom

   でコードスニペットを使用する際のFAQ

   Atomで新しいコードスニペットを作成する方法は？
   Atomで新しいコードスニペットの作成は簡(jiǎn)単なプロセスです。まず、ファイルメニューに移動(dòng)してからコードスニペットに移動(dòng)して、コードスニペットファイルを開(kāi)く必要があります。これにより、コードスニペットを定義できる.csonファイルが開(kāi)きます。各コードスニペットは、適用される言語(yǔ)を指定し、引用符でコードスニペット名を指定する行

   で始まります。次に、コードスニペットとコードスニペット自體をトリガーするプレフィックスを定義します。ボディは複數(shù)の線であり、.source構(gòu)文を使用してタブを指定できます。 ${1:default_text}

   原子でコードスニペットを使用する方法は？
   Atomでコードスニペットを使用するには、コードスニペットで定義されたプレフィックスを入力し、「タブ」キーを押します。これにより、カーソルにコードスニペットの本文が挿入されます。コードスニペットにタブがある場(chǎng)合、「タブ」キーを使用してそれらの間を移動(dòng)し、必要なテキストを入力できます。
   Atomのプログラミング言語(yǔ)でコードスニペットを使用できますか？
   はい、Atomでサポートされているプログラミング言語(yǔ)にコードスニペットを使用できます。コードスニペットを定義するときに、言語(yǔ)の正しい範(fàn)囲を指定するだけです。たとえば、JavaScriptの場(chǎng)合は

   を使用し、Pythonには.source.jsを使用します。 .source.python

   コードスニペットを他の人と共有する方法は？
   コードスニペットを他の人と共有したい場(chǎng)合は、

   ファイルを共有するだけです。このファイルには、すべてのコードスニペット定義が含まれており、Atom Configuration Directoryにあります。または、コードスニペットを使用してパッケージを作成して、Atomパッケージリポジトリに公開(kāi)することもできます。 snippets.cson

   コードスニペットを使用して、一般的に使用されるコードブロックを挿入できますか？

   絶対に！コードスニペットは、一般的なコードブロックを挿入するのに最適な方法です。頻繁に入力するスニペットのスニペットを定義してから、ほんの數(shù)キーで挿入できます。これにより、多くの時(shí)間を節(jié)約し、コードの一貫性を確保するのに役立ちます。

   既存のコードスニペットをAtomで編集する方法は？

   既存のコードスニペットをATOMで編集するには、

   コードスニペットで変數(shù)を使用できますか？

   はい、コードスニペットで変數(shù)を使用できます。変數(shù)は${1:default_text}で表され、ここで「1」はタブで、「default_text」は挿入されるデフォルトのテキストです。変數(shù)を使用して、コードスニペットにプレースホルダーを作成して、コードスニペットを挿入するときにこれらのプレースホルダーをすばやく入力できるようにすることができます。

   原子でコードスニペットを削除する方法は？

   atomでコードスニペットを削除するには、snippets.csonファイルを開(kāi)き、削除するコードスニペットを見(jiàn)つける必要があります。次に、コードスニペットを定義するコード行を削除し、ファイルを保存するだけです。コードスニペットはすぐに削除されます。

   他の編集者からコードスニペットをAtomにインポートできますか？

   Atomには、他のエディターからコードスニペットをインポートするための組み込み機(jī)能はありませんが、他のエディターからスニペット定義を手動(dòng)でコピーして、それらをATOMのファイルに貼り付けることができます。 Atomのコードスニペット構(gòu)文に合わせて、構(gòu)文を少し調(diào)整する必要がある場(chǎng)合があります。 snippets.cson

   Atomの発見(jiàn)と交換関數(shù)でコードスニペットを使用できますか？

   はい、Atomの発見(jiàn)と交換機(jī)能でコードスニペットを使用できます。検索と交換パネルを開(kāi)くと、交換フィールドにコードスニペットを入力できます。交換操作を?qū)g行すると、コードスニペットが見(jiàn)つかったテキストの場(chǎng)所に挿入されます。

   以上が原子でコードスニペットを使用する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。