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

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

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

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

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

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

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

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

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

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

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

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

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

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

   コードスニペット範囲の<人気のあるWeb言語範囲には次のものがあります

   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の場合）snippets.csonに設(shè)定されています

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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