コードスタイル
スキーム
この領域で、コードスタイルスキームを選択し、必要に応じて変更します。コードスタイルスキームの設定は、WebStorm がコードを生成、リファクタリング、再フォーマットするたびに自動的に適用されます。
IDE には、プロジェクトスキームとデフォルトスキームの 2 つの定義済みスキームが付属しています。
プロジェクトスキームでは、構成する設定は現在のプロジェクトにのみ適用されます。
これらの設定は、.idea の codeStyles フォルダーに保存され、VCS を介してプロジェクトと共有されます。
プロジェクトのコードスタイル設定を変更すると、IDE によってフォルダーが作成されます。
デフォルトスキーム(IDE レベルのスキーム)では、構成する設定は、デフォルトコードスタイルスキームが選択されている既存のすべてのプロジェクトに適用されます。
これらの設定は、WebStorm コンフィギュレーションディレクトリの下の codestyles フォルダーに保存され、VCS を介して共有されません。
プロジェクトコードスタイルスキームをデフォルトスキームとして使用する場合は、IDE レベルにコピーできます。逆の方法も可能です。現在のプロジェクト設定を IDE レベルのスキームの設定で上書きし、チームの他のメンバーと共有することができます。
項目 | 説明 |
---|---|
スキーム | このリストから、使用するスキームを選択します。定義済みのスキームは太字で示されています。事前定義スキームのコピーとして作成されたカスタムスキームは、プレーンテキストです。スキームが格納される場所は、各スキームの横に記述されます。たとえば、デフォルトスキームは IDE に格納され、プロジェクトスキームはプロジェクトに格納されます。 |
| このボタンをクリックして、スキームを管理するためのコマンドのリストを呼び出します。
|
一般
改行コード
WebStorm を使用すると、さまざまな言語の改行コード文字と字下げオプションを設定できます。ソースコードを再フォーマットするとき、WebStorm は指定されたインデントのふるまいを適用して、特別なフォーマットオフ / オンマーカーで示されたセクションをスキップします。
項目 | 説明 |
---|---|
改行コード | このリストを使用して、WebStorm によって作成されたファイルで使用する改行コード文字を指定します。使用可能なオプションは次のとおりです。
|
次でハードラップ | このフィールドでは、エディターでページを表示するために使用される列数を指定します。 |
入力時に折り返す | 編集されたテキストが常に指定された右マージンに収まるようにするには、このチェックボックスを選択します。 |
ビジュアルガイド | このフィールドには、複数の右マージンを指定します。デフォルト値のままにするか、余白のスペース数を入力することができます。複数のマージンを指定する場合は、コンマで区切って番号を入力します。 |
インデント検出
現在のファイルのインデントスタイルを検出し、特定の言語のコードスタイル設定で指定されたインデントの代わりにこのスタイルを使用するには、編集に既存のファイルインデントを検出して使用するを選択します。
WebStorm は、インデント情報をエディターのステータスバーに表示します。インデント情報をクリックして、このオプションを有効または無効にするなどの使用可能なアクションを確認し、現在のインデントを特定の言語のコードスタイル設定で指定されているインデントに変更できます。

EditorConfig
コードスタイルに EditorConfig を使用するには、EditorConfig のサポートを有効にするチェックボックスを選択します。この場合、IDE 設定をオーバーライドし、プロジェクト内で異なるコードスタイルを持つコードスタイル設定を指定できます。
EditorConfig 設定ファイルの作成後に IDE 設定を使用する場合は、EditorConfig のサポートを有効にするチェックボックスをオフにする必要があります。
フォーマッター
この領域で、再フォーマットから除外するコードフラグメントを制限するためのマーカーを指定します。ソースコードでは、フォーマットマーカーは行コメントの内側に書かれています。
項目 | 説明 |
---|---|
フォーマットしない | フォーマットしないフィールドで、再フォーマット、コード配置、インポート最適化から除外するファイルとディレクトリの名前を含む glob パターン(英語)を指定します (例: セミコロン 再フォーマットを完全に無効にするには、アスタリスク |
コードコメント内のマーカーでフォーマッターのオン / オフを切り替える |
|
オフ: | このフィールドには、再フォーマットから除外したいコードフラグメントの始まりを示す文字文字列を指定してください。 |
オン: | このフィールドには、再フォーマットから除外したいコードフラグメントの終わりを示す文字文字列を指定してください。 |
フォーマッターマーカーで正規表現を使用可能にする | フォーマットマーカーを明示的に指定する代わりに正規表現を使用するには、このチェックボックスをオンにします。WebStorm は、正確な文字列の代わりに指定された正規表現を使用して、フォーマッタのオン / オフマーカーを照合します。 例: 正規表現を使用すると、フォーマッターを有効または無効にするためのいくつかのマーカーを使用できます。その場合、次の正規表現を使用できます: デモについては、フォーマットマーカーの使用例を参照してください。 |
フォーマットマーカーの使用例
この例は、2 つのコードフラグメントを示しています。そのうちの 1 つ line 72
- line 76
は @formatter :off
および @formatter:on
マーカーで囲まれていますが、もう 1 つの line 78
- line 81
は含まれていません。
元のフォーマット:

マーカー内のコードの元のフォーマット (line 72
- line 76
) は保持されますが、マーカーのないコード (line 78
- line 81
) が再フォーマットされます。

元のフォーマットは、どちらのコードフラグメントでも保持されません。

関連ページ:

コードスタイルの構成
特定のコーディングガイドラインが企業内に存在する場合は、ソースコードを作成する際に、このガイドラインに従わなければなりません。WebStorm は、必要なコードスタイルを維持できます。IDE には、プロジェクトスキームとデフォルトスキームの 2 つの定義済みスキームが付属しています。プロジェクトスキームでは、構成する設定は現在のプロジェクトにのみ適用されます。これらの設定は、.idea の codeStyles フォルダーに保存され、VCS を介してプロジェクトと共有されます。プロジェクトのコードスタ...

IDE で使用されるディレクトリ
デフォルトでは、WebStorm は、各 IDE インスタンスのユーザー固有のファイル(構成、キャッシュ、プラグイン、ログなど)をユーザーのホームディレクトリに保存します。ただし、必要に応じて、これらのファイルを保存する場所を変更できます。IDE ディレクトリの場所を変更するたとえば、ユーザープロファイルドライブの容量が不足している場合や低速ディスクにある場合、ホームディレクトリが暗号化されている(IDE の速度が低下している)場合、またはネットワークドライブにある場合は、デフォルトの IDE...

コードの再フォーマットと再配置
WebStorm を使用すると、現在のコードスタイルスキームまたは .editorconfig ファイルで指定した要件に従ってコードを再フォーマットできます。で定義されていないものがあれば、プロジェクト設定から取得されます。コードの一部、ファイル全体、ファイルのグループ、ディレクトリ、モジュールを再フォーマットできます。また、コードの一部または一部のファイルを再フォーマットから除外することもできます。コードフラグメントを再フォーマットするエディターで、再フォーマットしたいコードフラグメントを選択しま...

ソースコードの作成と編集
コードを使用する場合、WebStorm は作業にストレスがないことを保証します。追加、選択、コピー、移動、編集、折りたたみ、出現箇所の検索、コードの保存に役立つさまざまなショートカットと機能を提供します。エディター内のナビゲーションについては、エディターの基本を参照してください。アクションの検索使用したいアクションのショートカットを覚えていない場合は、を押して名前でアクションを見つけてください。同じダイアログを使用してクラス、ファイル、シンボルを見つけることができます。詳しくは、名前でターゲッ...

自動インポート
JavaScript および TypeScript ファイルでは、WebStorm は、モジュール、クラス、コンポーネント、エクスポート可能なその他のシンボルや XML ネームスペースのインポートステートメントを自動的に追加します。JavaScript で自動インポート、TypeScript での自動インポート、XML 名前空間のインポートの詳細を参照してください。ES6 シンボルまたは CommonJS モジュールを完了すると、WebStorm はインポートステートメント自体のスタイルを決定す...

カラースキームの切り替え
このセクションを使用して、WebStorm エディターの配色を選択します。スキームワークスペースで使用する配色を選択してください。このボタンをクリックすると、次のコマンドが呼び出されます(選択したスキームに応じて)。複製: 現在選択されているカラー設定を新しいスキームとして保存します。新しいスキームを保存するにはを押し、操作をキャンセルするにはを押します。デフォルトの復元: 選択したカラースキームを WebStorm に同梱されている初期デフォルトにリセットします。定義済みのカラースキームを...