JavaScript 後置テンプレート
後置コード補完では、入力したばかりの式の周囲にテンプレートコードを追加できます。 ドットの後に略語（後置）を入力して展開キー（デフォルトでは Tab ）を押すか、コード補完ポップアップで略語を選択すると、テンプレートが展開されます。
WebStorm には、定義済みの後置テンプレートのセットが付属しており、JavaScript と TypeScript 用に独自のカスタムテンプレートも定義できます。 カスタムテンプレートの作成を参照してください。 JavaScript の定義済みテンプレートは TypeScript ファイルでも動作します。
カスタムテンプレートはコピー、更新、削除できます。 事前定義されたテンプレートでは、たとえば長いキーを短いキーに置き換えるなど、接尾辞のみ変更できます。
Ctrl+Alt+S を押して設定を開き、 を選択します。
開いた 後置補完 ページで、 後置テンプレートを有効にする チェックボックスを選択します。
このページには、利用可能な後置のリストと、対応するテンプレートが横に表示されます。 後置を選択すると、 説明 ペインは、テンプレートが展開される前後のコードスニペットを示す対応する変換を示します。
後置を有効にするには、その横にあるチェックボックスを選択します。
後置テンプレートを適用する
式の後にドットを入力します。
接尾辞を入力して展開キー（デフォルトでは Tab ）を押すか、候補リストから接尾辞を選択します。 必要に応じて、囲むか置換する表現を選択してください。
すべての後置テンプレートのデフォルトの拡張キーは Tab です。 別の方法を選択する方法については、 デフォルトの拡張キーの変更を参照してください。
カスタムテンプレートを作成する
設定 ダイアログ（Ctrl+Alt+S ）で に移動します。
開いた 後置補完 ページで
をクリックし、テンプレートが機能する言語を選択します。 JavaScript と TypeScript または TypeScript を選択できます。
開いている 新規テンプレートの作成 ダイアログで:
キー フィールドにテンプレートの接尾辞を指定します。
最低言語レベル リストから言語レベルを選択します。
テンプレートコードを入力し、最初の式を挿入する場所に
$EXPR$を追加します。 最後にキャレットを挿入する場所に$END$を追加します。
デフォルトでは、呼び出されたテンプレートが技術的に複数の式に適用できる場合、WebStorm は必要な式を選択するよう促します。
テンプレートが呼び出されたときに WebStorm が最上位の適用可能な式を自動的に変換するようにするには、 一番上の式に適用 チェックボックスを選択します。
新しく作成したカスタムテンプレートは、定義済みテンプレートと同じ手順で適用できます。テンプレート式を入力し、ドットに続けて後置を入力します。たとえば、
sum.write、その後、展開キー（Tab ）を押します。
以下の React コンポーネントテンプレートを作成するカスタムテンプレートの別の例を参照してください。
言語コンテキストやキャレットの最終位置など、既存のテンプレートとはわずかに異なる新しいテンプレートを作成することもできます。 WebStorm を使用すると、元のテンプレートをコピーし、そのコピーに必要な変更を加えることができます。
既存のテンプレートから新しいカスタムテンプレートを作成する
設定 ダイアログ（Ctrl+Alt+S ）で に移動します。
開いている 後置補完 ページで、新しいテンプレートを作成するカスタムテンプレートを選択し、ツールバーの
をクリックします。開いている テンプレートの編集 ダイアログで、必要に応じてテンプレートを編集し、新しい接尾辞を入力します。
デフォルトの拡張キーを変更する
設定 ダイアログ（Ctrl+Alt+S ）で、 に移動し、 次でテンプレートを展開 リストから新しいキーを選択します。
後置補完を無効にする
設定されたすべての接尾辞テンプレートの展開を抑止するには、 後置テンプレートを有効にする チェックボックスをオフにします。
特定のテンプレートを展開しないようにするには、その接尾辞の横にあるチェックボックスをオフにします。
サンプル: React コンポーネントテンプレートを作成する
以下は、新しい React コンポーネントのクラスに展開されるテンプレートの例です。
新しい React コンポーネントテンプレートを作成する
設定 ダイアログ（Ctrl+Alt+S ）で に移動します。
開いた 後置補完 ページで、
をクリックして JavaScript を選択します。 新規テンプレートの作成 ダイアログが開きます。キー フィールドに
rcompの略語を入力します。最低言語レベル リストから ECMAScript 6 以降 を選択します。 つまり、テンプレートは言語レベルが ECMAScript 6 以降または Flow の JavaScript ファイルでのみ使用されます。
JavaScript 言語バージョンの選択の詳細を参照してください。
テンプレートテキストを
$EXPR$で入力すると、最初の式 (.rcompで続行) が表示されます。 テンプレートを展開した後、キャレットを配置する場所に$END$を忘れずに配置してください。class $EXPR$ extends Component { render() { return ( <div> $END$ </div> ); } } export default $EXPR$;
新しい React コンポーネントテンプレートを適用する
エディターで、新しいコンポーネント
Buttonの名前に続けてドットを入力します。候補リストから rcomp を選択します。 WebStorm はクラス
Buttonを生成し、$END$変数があった場所にキャレットを配置します。