WebStorm 2024.3 ヘルプ

コードの再フォーマットと再配置

WebStorm を使用すると、現在のコードスタイルスキームまたは .editorconfig ファイルで指定した要件に従ってコードを再フォーマットできます。.editorconfig で定義されていないものがあれば、プロジェクト設定から取得されます。

コードの一部、ファイル全体、ファイルのグループ、ディレクトリ、モジュールを再フォーマットできます。また、コードの一部または一部のファイルを再フォーマットから除外することもできます。

コードフラグメントを再フォーマットする

  1. エディターで、再フォーマットしたいコードフラグメントを選択します。

    再フォーマットする前に、選択したコードに適用されているコードスタイル設定を確認できます。Alt+Enter を押してコードスタイルの設定を調整するをクリックします。

  2. メインメニューで、コード | コードの整形に移動するか、Ctrl+Alt+L を押します。

ファイルを再フォーマットする

  1. ファイルをエディターで開いて Ctrl+Alt+Shift+L を押すか、プロジェクトツールウィンドウでファイルを右クリックしてコードの整形を選択します。

  2. 開いたファイルの整形ダイアログで、必要に応じて、次の再フォーマットオプションを選択します。

    Reformat Files dialog
    • インポートの最適化 : 未使用のインポートを削除する、足りないものを追加する、インポート文を整理するには、このオプションを選択します。

      詳しくは、インポートの最適化のセクションを参照してください。

    • エントリの再配置 : コードスタイル設定で指定された配置規則に基づいてコードを再配置する必要がある場合は、このオプションを選択します。

    • コードのクリーンアップ : コードクリーンアップインスペクションを実行するには、このオプションを選択します。

    • 改行を保持しない : コードスタイルの設定に従って改行を再フォーマットします。このオプションは、整形時の保持 | 改行設定を上書きします。

  3. 再フォーマット中にコードに加えられた正確な変更を確認するには、ローカル履歴機能を使用します。

フォルダー内のコードを再フォーマットする

  1. プロジェクトビューで、フォルダーを右クリックしてコンテキストメニューからコードの整形を選択するか、Ctrl+Alt+L を押します。

  2. 開いたダイアログで、必要なオプションを指定して OK をクリックします。

行のインデントを再フォーマットする

指定した設定に基づいて行のインデントを再フォーマットできます。

  1. エディター内で、必要なコードの一部を選択して Ctrl+Alt+I を押します。

  2. インデント設定を調整する必要がある場合は、設定ダイアログ (Ctrl+Alt+S) でエディター | コードスタイルに進みます。インデントを変更する言語を選択します。

  3. タブとインデントタブで、適切なインデントオプションを指定し、OK をクリックします。

保存時にコードを自動的に再フォーマットする

変更が保存されたときに、変更されたファイルのコードを自動的に再フォーマットするように IDE を構成できます。

  1. Ctrl+Alt+S を押して設定を開き、ツール | 保存時のアクションを選択します。

  2. コードの整形オプションを有効にします。

  3. さらに、IDE がコードを再フォーマットする方法を構成できます。

    • スコープの構成をクリックして、再フォーマットから除外するファイル名とディレクトリのパターンを指定します。

    • すべてのファイルタイプリストから、コードを再フォーマットするファイルのタイプを選択します。

      Reformat on save: specify file type
    • プロジェクトがバージョン管理下にある場合は、ファイル全体または変更された行を選択します。

      変更された行を選択した場合、再フォーマットは、ローカルで変更されたが、リポジトリにまだチェックインされていないコード行にのみ適用されます。

コミット時にコードを再フォーマットする

プロジェクトがバージョン管理されている場合は、リポジトリに変更をコミットするときに、コードを自動的に再フォーマットできます。この場合、追加または変更されたコードのみが再フォーマットされます。

  1. Alt+0 を押してコミットツールウィンドウを開き、コミットオプションを表示 the Settings button をクリックします。

  2. コミットチェックメニューで、コードの整形オプションを有効にします。

オプションを有効にすると、コミットするたびに追加または変更されたコードが再フォーマットされます。

Reformatting code on commit

再フォーマットからファイルを除外する

ファイルとディレクトリのグループを、再フォーマット、コード配置、およびインポートの最適化から除外できます。

  1. 設定ダイアログ(Ctrl+Alt+S)で、エディター | コードスタイルに移動します。

  2. フォーマッタータブに切り替え、フォーマットしないフィールドに、グロブパターン(英語)を使用して除外するファイルとディレクトリを入力します。

    セミコロン ; で区切られた複数のグロブパターンを指定できます。the Expand icon をクリックすると、フィールドが展開され、各パターンが別々の行に表示されます。

  3. 変更を適用し、ダイアログを閉じます。

    Specifying a glob pattern for excluding files from reformatting

エディターでのコードフラグメントの再フォーマットからの除外

  1. 設定ダイアログ(Ctrl+Alt+S)で、エディター | コードスタイルに移動します。

  2. フォーマッタータブに切り替えて、コードコメント内のマーカーでフォーマッターのオン / オフを切り替えるオプションを有効にします。

  3. エディターで、除外する領域の先頭に「 @formatter:off 」と入力します。領域の末尾に「 @formatter :on 」と入力します。

    マーカー間のコードは再フォーマットされません。

この例は、2 つのコードフラグメントを示しています。そのうちの 1 つ line 72 - line 76@formatter :off および @formatter:on マーカーで囲まれていますが、もう 1 つの line 78 - line 81 は含まれていません。

元のフォーマット:

Formatting markers

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

Formatting markers on

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

Formatter markers off

既存のフォーマットを保持

コードを再フォーマットするときに無視されるフォーマット規則を選択できます。例: 単純なメソッドや関数を 1 行に収めるように IDE を調整することができますが、通常はコードの再フォーマット後に複数行に展開されます。

  1. メインメニューで設定 | エディター | コードスタイルに移動し、プログラミング言語を選択して、折り返しと波括弧タブを開きます。

  2. 整形時の保持セクションで、無視したいフォーマット規則を選択し、適用するものを選択解除します。

  3. コードを再フォーマットする (Ctrl+Alt+L).

WebStorm は現在のスタイル設定に従ってあなたのコードを再フォーマットし、選択したルールのための既存のフォーマットを維持します。

コードの再配置

設定ダイアログのコードスタイルページで設定された配置ルールに従ってコードを再配置できます。

コードエントリの並べ替え

  1. 設定ダイアログ(Ctrl+Alt+S)で、エディター | コードスタイルに移動します。

  2. 配置規則を作成する言語を選択します。

  3. 配置タブで、グループ化ルールや一致ルールなどの適切なオプションを指定します。

  4. 変更を保存するには、OK をクリックします。

  5. エディターで、再配置するコードエントリを選択し、メインメニューのコード | コードの再配置に移動します。

保存時にコードを自動的に再配置する

変更が保存されたときに、変更されたファイルのコード要素を自動的に再配置するように IDE を構成できます。

  1. Ctrl+Alt+S を押して設定を開き、ツール | 保存時のアクションを選択します。

  2. コードの再配置オプションを有効にします。

    さらに、配置ルールの構成をクリックして、選択した言語のコード要素を並べ替えるルールを指定できます。

関連ページ:

コードスタイルの構成

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

Prettier

Prettier は、TypeScript、JavaScript、CSS、HTML、JSON などのさまざまな言語でファイルをフォーマットするツールです。WebStorm では、Prettier で整形アクションを使用して、ファイルまたはディレクトリ全体だけでなく、選択したコードフラグメントもフォーマットできます。WebStorm は、プロジェクト内の依存関係として、またはコンピューター上にグローバルに Prettier をインストールするとすぐに、このアクションを追加します。特定のファイルが変...

ESLint

WebStorm は、プラグインで拡張できる幅広い lint ルールをもたらす ESLint と統合します。WebStorm は、入力時に ESLint によって報告された警告とエラーをエディターに表示します。ESLint を使用すると、JavaScript 標準スタイルを使用したり、TypeScript コードをリントしたりすることもできます。JavaScript と TypeScript に加えて、ESLint はプロジェクト全体またはその特定の部分の他のタイプのファイルに適用できます。lint...

ファイルの再フォーマットダイアログ

現在のファイルのエディターでを押すとダイアログが表示されます。メインメニューからを選択するかを押すと、WebStorm は指定されたスコープのソースコードを自動的に再フォーマットしようとします。再フォーマット、またはフォーマットからのファイルの除外の詳細については、「コードの再フォーマットと再配置」を参照してください。VCS にコミットされていない変更のみこのチェックボックスが選択されている場合、再フォーマットは、ローカルで変更されたが、リポジトリにまだチェックインされていないコードにのみ適...

自動インポート

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

ローカル履歴

ローカル履歴は、バージョン管理とは関係なく、プロジェクトに加えられたすべての変更を常に追跡できます。コミット間で行われた違いのみを追跡するバージョン管理システムとは異なり、ローカル履歴にはさらに多くの機能があります。コードの編集、テストの実行、アプリケーションのデプロイなどを行うと、プロジェクトの状態が自動的に記録され、IDE と外部の両方から行われたすべての意味のある変更のリビジョンが維持されます。ローカル履歴を使用すると、個人のバージョン管理システムとして機能し、プロジェクトでバージョン管理...