AppCode 2023.1 ヘルプ

Emmet

Emmet(英語) ツールキットは、HTML、CSS、JSX によるコーディングを強化します。AppCode を移動せずに Emmet コードテンプレートを使用できます。テンプレートを正しいマークアップに展開するには、その略語(英語)を入力して Tab を押します。ショートカットの変更については、略語拡張キーを構成するを参照してください。

例: HTML ファイルで table>tr*3>td*2 と入力し、Tab を押して 3x2 テーブルのスタブを取得します。

<table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>

AppCode は、RGBA カラー、暗黙、デフォルト、ブール属性を書き込むための新しい構文、タグの更新アクションなどの機能をサポートしています。

Emmet を有効にして構成する

AppCode を使用すると、ネイティブ Emmet テンプレートに加えて、IDE 設定 Ctrl+Alt+S のエディター | ライブテンプレートページの Zen CSS、Zen HTML、Zen XSL ノードにリストされている 200 を超える追加の HTML、CSS、XSL ライブテンプレートを使用できます。

  1. Ctrl+Alt+S を押して IDE 設定を開き、エディター | Emmet を選択します。

  2. 開いた Emmet ページで、Emmet の省略形を展開するキーを選択します。デフォルトでは、Tab が選択されています。

  3. 特定の言語（HTML、CSS、JSX）で Emmet を有効または無効にするには、エディター | Emmet | <言語> に移動し、<言語> Emmet を有効にするチェックボックスを切り替えます。Emmet ページのコントロールを使用して、さまざまな言語コンテキストで Emmet を構成します。

AppCode を使用すると、Emmet ライブテンプレートを使用およびカスタマイズしたり、カスタムテンプレートを追加したりできます。次のテンプレートテキストを含むテンプレートエントリがあるとします。

<entry type="$TYPES$">$END$ <entry>

エントリのリストを生成するには、 “entry-list<entry[number=$]*5 ″と入力して Tab を押すだけです。デフォルトでは、number 属性は type の前に生成されます。生成される位置をカスタマイズするには、テンプレートに ATTRS 変数を追加する必要があります。たとえば、次のようになります。

<entry type="$TYPES$" $ATTRS$>$END$ <entry>

ATTRS 変数は、デフォルト値として空の文字列を持つ必要があり、スキップする必要があります。

Emmet でライブテンプレートを使用する

  1. Ctrl+Alt+S を押して IDE 設定を開き、エディター | ライブテンプレートを選択します。

  2. Emmet ページで、使用したいテンプレートの横にあるチェックボックスを選択します。

  3. リスト内のテンプレートを選択すると、フォーカスはテンプレートテキスト領域に移動し、そこには選択したテンプレートの設定が表示されます。

  4. テンプレートテキストフィールドで、必要なテキストと変数をテンプレート本体に追加します。

  5. 変数の編集ボタンをクリックします。開いているテンプレート変数の編集ダイアログで、デフォルト値フィールドにデフォルトの変数値を指定し、必要に応じて定義済みはスキップチェックボックスを選択します。

略語拡張キーを構成する

デフォルトでは、Tab を押すと、Emmet ネイティブの略語と追加のライブテンプレートが展開されます。追加のライブテンプレートについては、AppCode を使用してデフォルトの拡張キーを再定義できます。このカスタム設定は、ネイティブ Emmet サポートのデフォルト設定を上書きしないことに注意してください。どちらかのキーを使ってテンプレートを拡張することができます。

ネイティブ Emmet の略語の拡張キーを構成する

  1. Ctrl+Alt+S を押して IDE 設定を開き、エディター | Emmet を選択します。

  2. 開いた Emmet ページで、略語を展開するキーリストからデフォルトの Tab の代わりに新しい拡張キーを選択します。

Emmet ライブテンプレートの拡張キーを構成する

  1. Ctrl+Alt+S を押して IDE 設定を開き、エディター | ライブテンプレートを選択します。

  2. ライブテンプレートページが開いたら、Zen HTML、Zen CSS、Zen XSL テンプレートグループを展開し、目的のテンプレートを選択します。フォーカスはテンプレートテキストエリアに移動します。

  3. 展開リストからテンプレートを展開するキーを選択します。

コードのブロックを Emmet テンプレートで囲む

  1. エディターで、囲むコードブロックを選択して Ctrl+Alt+J を押すか、メインメニューからコード | 囲む | ライブテンプレートを選択します。

  2. テンプレートの選択リストから Emmet を選択します。

    Select Template context menu

  3. 使用する Emmet の略語を入力し、Enter を押します。

    Emmet: type abbreviation

    右側のリストに注意してください。下矢印をクリックして、最近適用された Emmet ライブテンプレートの履歴を表示します。

    History of recently applied Emmet live templates

    また、色の表示に気をつけてください。有効な Emmet 省略形を入力すると、背景は緑色になります。ただし、存在しない省略形を入力すると背景が赤くなります。

    The abbreviation you entered does not exist, the background turns red

編集ポイント間を移動する

HTML と XML では、編集ポイント間、つまり Emmet テンプレートを適用できるコードのポイント間を移動できます。

  • カーソルを前の編集ポイントに移動するには、移動 | 前の Emmet 編集ポイントを選択するか、Alt+Shift+[ を押します。

  • カーソルを次の編集ポイントに移動するには、移動 | 次の Emmet 編集ポイントを選択するか、Alt+Shift+] を押します。

ライブテンプレート変数 ファイル、フォルダー、テキストソースを比較する

関連ページ：

Emmet

略語を展開するキーこのリストから、Emmet セレクターを展開するデフォルトのキーを選択します。このキーはデフォルトで Emmet ライブテンプレートも展開します。Emmet.HTML：XML/HTML Emmet を有効にする XML と HTML の Emmet サポートを有効にするには、このチェックボックスをオンにします。このチェックボックスが選択されていない場合、などの複雑な略語はエディターでは機能しません。略語プレビューを有効化このチェックボックスを選択すると、AppCode は実際に展開...

ライブテンプレート変数

ライブテンプレートには、別の値に置き換えたり、入力フィールドとして使用したりできる変数が含まれている場合があります。例: ライブテンプレートを展開すると、事前定義された値を持つ 2 つのハイライトされたフィールドが表示されます。どちらもライブテンプレートで定義された変数です。は配列要素のデフォルト名であり、はループの直前に宣言された配列です。テンプレート変数を設定する環境設定ダイアログで、に進みます。変数を設定するテンプレートを選択します。次の形式で変数を指定します: テンプレートに変数が含まれてい...

ファイル、フォルダー、テキストソースを比較する

AppCode を使用すると、ファイル、フォルダー、テキストソース、データベースオブジェクト間の違い、ローカルファイルとそれらのリポジトリバージョン間の違いを確認できます。ファイルを比較：AppCode はファイルの差分ビューアーに差分を表示します: グリーン: 追加、ブルー: 変更、グレー: 削除、変更を適用するには、シェブロンボタン (および) を使用します。変更を追加するには、を押します。