WebStormは、React.jsに特定のJSXコードオートコンプリートを持っています。WebStormのコードオートコンプリートを変更する
div. + Tab => <div className=""></div>
しかし、私はSCSSを使用していますので、私はclassNameからstyleNameにオートコンプリートを変更する必要があります：それはこのように書き
div. + Tab => <div styleName=""></div>
あなたはジェットブレーンズは呼ん作成することで、このデフォルトの動作をオーバーライドすることができます」 Live Template "（この機能は他のJetbrains製品にもあります）。
まずWebstormの環境設定にナビゲートします。左側に、カテゴリ別に表示された環境設定を示すツリー構造が表示されます。 「エディタ」を展開して「ライブテンプレート」を見つけます。
ライブテンプレートを選択すると、右側にツリー構造が表示され、現在有効になっているライブテンプレートが表示されます。 この表の右端には、自分のライブテンプレートを作成できる小さな+ボタンがあります。
+ - >ライブテンプレートを選択した後、下の略語、説明、テンプレートのテキストを入力する必要があります。
略称は、このテンプレートをアクティブにするために入力する文字です。この場合、と入力します。 説明フィールドは、このテンプレートを説明したいものであれば何でも構いませんが、機能的な影響はありません。
テンプレートテキストセクションが置換テキストです。この場合、私は$ END $が生きたテンプレートがアクティブになった後、その場所にカーソルを置く変数であることを
< DIVは、styleName =「$のEND $」> </div>の
注意を使用します。
最後に、ライブテンプレートが動作するファイルの種類を指定する必要があります。ページの下部に「アプリケーションコンテキストがまだありません。定義」というフレーズがあることに注目してください。 を定義するポップアップメニューが表示されたら、Javascriptを展開してJSX HTMLのオプションを探して確認します。ライブテンプレートを他の場合に使用したい場合は、追加のファイルタイプを自由に選択してください。