IntelliJ IDEA 2020.3 ヘルプ

コードスタイル: JavaScript

このページを使用して、JavaScript ファイルのフォーマットオプションを設定します。これらの設定を変更すると、プレビューペインに、コードへの影響が表示されます。

タブとインデント

タブ文字を使用する
  • このチェックボックスをオンにすると、タブ文字が使用されます。

    • Tab キーを押すと

    • インデント用

    • コードを再フォーマットするため

  • チェックボックスがオフの場合、IntelliJ IDEA はタブではなくスペースを使用します。

スマートタブ

インデントは 2 つの部分で構成されます。1 つの部分はコードブロックのネストに起因し、他の部分はアライメントによって決定されます。

  • このチェックボックスが選択されている場合、ネストの結果生じる部分にはタブとスペースの両方が(必要に応じて)含まれますが、alignment によって定義される部分はスペースのみで構成されます。

  • このチェックボックスをオフにすると、タブのみが使用されます。これは、指定されたタブサイズに合うスペースのグループを再フォーマットした後、自動的にタブに置き換えられることを意味します。

タブサイズ このフィールドで、タブに収まるスペースの数を指定します。
インデント このフィールドでは、各インデントレベルに挿入するスペースの数を指定します。
連続インデントの文字数

このフィールドでは、式、メソッド宣言、メソッド呼び出しで、配列の要素間に挿入するスペースの数を指定します。

空行でインデントを保持する このチェックボックスをオンにすると、IntelliJ IDEA は空行にインデントを保持しているように見えます。チェックボックスをオフにすると、IntelliJ IDEA は空白行のタブ文字とスペースを削除します。
チェーンされたメソッドをインデントする

関数の宣言では、チェーンの 2 番目以降のメソッドが別の行に表示されます。

  • チェックボックスをオンにすると、チェーンの 2 番目以降のメソッドが 1 番目の呼び出しに揃えられます。

  • チェックボックスをオフにすると、チェーンの 2 番目以降のメソッドは、呼び出されたオブジェクトと揃えられます。

グループ内のすべてのチェーン呼び出しをインデントする このチェックボックスは、チェーンされたメソッドをインデントするチェックボックスが選択されている場合にのみ使用できます。

スペース

このタブを使用して、IntelliJ IDEA にスペースを自動的に挿入する場所を指定します。関連する場所の説明の横にあるチェックボックスを選択し、プレビューペインで結果を確認します。

折り返しと括弧

ソースコード プレビュー再フォーマット
次でハードラップ このフィールドでは、要素の右側に必要なスペースの数を指定します。デフォルトオプションを受け入れると、グローバル設定の値が使用されます。
入力時に折り返す

このフィールドで、編集したテキストを指定の次でハードラップフィールドに収める方法を指定します。

  • デフォルト : グローバル設定の 入力時に折り返す値を使用するには、このオプションを選択します。

  • はい: 右マージンフィールドの値を使用するには、このオプションを選択します。

  • いいえ: このオプションを選択すると、行が右マージンで指定された値を超える可能性があります。

ビジュアルガイド このフィールドには、複数の右マージンを指定します。デフォルト値のままにするか、余白のスペース数を入力することができます。複数のマージンを指定する場合は、コンマで区切って番号を入力します。

整形時の保持

チェックボックスを使用して、IntelliJ IDEA がソースコードを再フォーマットするときに行う例外を設定します。例: デフォルトでは、改行チェックボックスが選択されています。

コードに標準の規則よりも短い行が含まれている場合は、再フォーマットする前に改行チェックボックスを無効にすることで行を変換できます。

折り返しオプション

折り返しスタイルは、左側のペインで指定されたさまざまなコード構成体に適用されます(たとえば、メソッド呼び出し引数、代入ステートメントなど)。

  • 折り返さない - このオプションを選択すると、特殊な折り返しスタイルは適用されません。ネストされたアライメントと波括弧の設定は無視されます。

  • 長い場合は折り返す - このオプションを選択すると、右マージンを超える行が適切なインデントで折り返されます。

  • 常に折り返す - このオプションを選択すると、リスト内のすべての要素が折り返され、1 行に 1 つの要素が正しくインデントされます。

  • 長い場合は切り捨てる - 適切なインデントで 1 行に 1 つの要素が存在するように、右マージンを超えたリスト内の要素を折り返すには、このオプションを選択します。

アライメントオプション

  • 複数行のときに再配置する - このチェックボックスをオンにすると、次の各行の同じ列でコード構成が開始されます。それ以外の場合は、コード構造の位置は現在のインデントレベルによって決定されます。

  • <文字> 次の行に - 行が折り返されたときに、指定した文字を次の行に移動するには、このチェックボックスを選択します。

  • 新しい行で ''else'' - このチェックボックスを使用して、対応する文または文字を次の行に移動します。

  • <文字> の後の改行 - 指定した文字の後のコードを改行するには、このチェックボックスを選択します。

  • 特殊な else if の扱い - このチェックボックスを選択すると、else if ステートメントは同じ行に配置されます。

    それ以外の場合、else if ステートメントは対応するインデントレベルの次の行に移動されます。

  • インデントケースブランチ - このチェックボックスを選択すると、case ステートメントは対応するインデントレベルに配置されます。それ以外の場合、case ステートメントは switch と同じインデントレベルに配置されます。

  • オブジェクト - リストから、オブジェクトの配置方法を選択します。

    • そろえない: 連続した行の属性は整列しません。

    • コロン : 順次行の属性はコロンに揃えられます。

    • : 連続した行の属性は値に対して整列されます。

  • 変数宣言 - 等号のアライメントを設定するには、次のオプションのいずれかを選択します。

    • そろえない: 等号は揃っていません。

    • 複数行のときに再配置する : 複数行の var ステートメントの等号は、追加のスペースを挿入することによって位置合わせされます。

    • グループ化するときに整列する : 複数の var ステートメントの等号は、追加のスペースを挿入することによって位置合わせされます。

  • ES6 インポート / エクスポート 'from' 節をそろえる : チェックボックスが選択されている場合、IntelliJ IDEA は ECMAScript 6(英語) コード内の import および export ステートメントを自動的に整列させ、コードを読みやすく維持しやすくします。プレビューペインで、コードフラグメントの配置と配置を比較します。

    ws_align_import_export_es6.png

    このオプションをオンにすると、IntelliJ IDEA は新しいコードをオンザフライで整列させます。既存の importexport ステートメントは、Ctrl+Alt+L を押してコードを再フォーマットした後に整列されます(詳細はソースコードの再フォーマットのセクションを参照)。

波括弧配置オプション

波括弧配置スタイル

このリストを使用して、クラス宣言メソッド宣言関数宣言、およびその他のタイプの宣言で、左中括弧の位置を指定します。使用可能なオプションは次のとおりです。

  • 行末 : このオプションを選択すると、宣言括弧を宣言行の末尾に配置します。

  • 折り返されている場合は次の行 : このオプションを選択すると、複数行の宣言行の後の行頭に開き括弧が配置されます。

  • 次の行 : このオプションを選択すると、宣言行の後の行の先頭に左中括弧が配置されます。

  • 次の行をシフト : このオプションを選択すると、宣言の行が対応するインデントレベルに移動した後の行に左中括弧が配置されます。

  • 次の行をそれぞれシフト : このオプションを選択すると、宣言の行が対応するインデントレベルに移動した後の行に開き括弧が配置され、次の行も次のインデントレベルに移動します。

強制波括弧

このリストから、ifforwhiledo () while ステートメントの括弧の導入方法を選択します。使用可能なオプションは次のとおりです。

  • 強制しない : このオプションを選択すると、中括弧の挿入が自動的に抑制されます。

  • 複数行の場合 : ステートメントが複数の行にまたがっている場合に中括弧を自動的に挿入するには、このオプションを選択します。IntelliJ IDEA はステートメント全体の行数を分析しますが、その条件だけではありません。

    if (true) return false;

    IntelliJ IDEA は自動的に中括弧を挿入します:

    if (true) { return false; }
  • に: このチェックボックスを選択すると、IntelliJ IDEA は常に中括弧を自動的に挿入します。

空白行

このタブを使用して、再フォーマット後に IntelliJ IDEA が保持してコードに挿入する空白行の場所と数を定義します。結果はプレビューペインに表示されます。

空白行の指定 この領域では、再フォーマット後に保持する余白行数を指定します。
最小の空白行数

この領域では、import ステートメントのブロックの後に、クラス、フィールド、メソッド、または関数の周囲に余分な空行があるかどうかを構成します。各オプションの横にあるフィールドで、追加する空白行の最小数を指定します。

句読点

このタブのリストを使用して、終了セミコロン、一重引用符と二重引用符、および末尾のコンマの自動挿入でディレクティブを作成します。

ステートメントの終了にセミコロン
  • セミコロンを使用して新しいコードのステートメントを終了する

  • セミコロンを使用してステートメントをに終了する

  • 新しいコードのステートメントを終了するためにセミコロンを使用しないでください

  • にステートメントを終了するためにセミコロンを使用しないでください

引用符
  • 新しいコード二重引用符を 使用する

  • 二重引用符を使用する

  • 新しいコード単一引用符を 使用する

  • 単一引用符を使用する

末尾のコンマ

このリストを使用して、オブジェクト、配列、メソッド定義と呼び出しのパラメーターに末尾のコンマ(英語)を使用するかどうかを構成します。使用可能なオプションは次のとおりです。

  • 保持
  • 除去
  • 複数行のときに追加

コード生成

このタブで、生成されたコードのコードスタイルを設定します。

命名規約

このエリアでは:

  • 生成されたフィールドとプロパティの名前に自動的に追加される既定のプレフィックスを設定または受け入れます。

  • 生成されたファイルの名前のスタイルを選択してください。例: IntelliJ IDEA がクラスを新しい自動生成ファイルに移動することを提案するとき、このファイルの提案名は選択されたスタイルに従ってクラス名から生成されます。クラスの名前を保持し、準拠するファイルを含むからさらに詳しく

コードのコメント

この領域では、生成されたコメントのコードスタイルを設定します。

  • 最初の列に行コメントを入れる : このチェックボックスを選択すると、最初の列から行のコメントが始まります。チェックボックスをオフにすると、コード内で行コメントが整列されます。

  • コメントの最初に空白を追加する : このチェックボックスを選択すると、行コメント文字とコメント行の最初の文字の間にスペースが挿入されます。

インポート

同じモジュールのメンバーのインポートをマージする
  • このチェックボックスが選択されている場合、同じモジュールからインポートされたシンボルは、区切り文字としてコンマを使用して 1 つのインポートステートメントにリストされます。メンバーは、インポートされた順にリストされます。アルファベット順に配置するには、インポートされたメンバーをソートするチェックボックスを選択してコード | インポートの最適化を実行します。

  • このチェックボックスをオフにすると、インポートされたシンボルごとに個別のインポート文が生成されます。

プロジェクト、リソース、またはソースのルートを基準にしたパスを使用する

このオプションは、JavaScript コードでのインポート文の自動生成中に適用されます。

  • このチェックボックスを選択すると、IntelliJ IDEA は、プロジェクトルート、リソースルート、またはソースルートからの相対パスを提案します。

  • デフォルトでは、このチェックボックスはオフになっており、IntelliJ IDEA は現在のファイルを基準にしたパスを示しています。

ディレクトリインポートを使用する (ノードスタイルのモジュール解決)

次のような構造のプロジェクトがあるとします。

Directory import: project structure
  • ディレクトリインポートを使用するチェックボックスを選択すると、ファイル src/lib/index.js./src/lib としてインポートされます。

  • チェックボックスをオフにすると、ファイル src/lib/index.js./src/lib/index.js としてインポートされます。

モジュール名にファイル拡張子を使用する このチェックボックスをオンにすると、IntelliJ IDEA は .js 拡張をインポートステートメント内の ES6 モジュールの名前に自動的に追加します。これは、完全なファイル名を必要とするブラウザーで ES6 モジュールを使用する場合(Chrome など)には重要です。IntelliJ IDEA は、コード補完上で自動的にインポートステートメントを生成するとき、または Alt+Enter でインポート生成を呼び出すときに、この設定を適用します。
パスエイリアスを使用する

このフィールドでは、import または require ステートメントでパスのスタイルを構成します。

  • に - このオプションを使用して、IntelliJ IDEA は常に使用するエイリアス(英語)をあなたの webpack.config.jssystem.js、または jsconfig.json 構成ファイルから。

  • 決して - このオプションを使用すると、IntelliJ IDEA は生成されたインポートで常に相対パスを使用します。

  • 指定されたパス外のファイルのみ - このオプションを使用すると、IntelliJ IDEA は、同じエイリアスが定義されているファイル間のインポートを生成するときに相対パスを使用します。他のすべてのファイルでは、パスマッピングが使用されます。

以下の例では、ファイル Animal.js および Bird.js は、webpack.config.js でエイリアスが指定されている animated フォルダーのフォルダーに格納されています。ファイル Dog.js はエイリアスの外にあります。

JavaScript: sample project structure

エイリアス Lib は次のように構成されています。

resolve: { alias: { Lib: path.resolve(__dirname, './lib/objects/earth/animated/') } }

その結果、常時となしの各オプションは、Bird.jsDog.js の両方に同じ方法で適用されます。指定されたパス外のファイルのみオプションを選択すると、IntelliJ IDEA は、Bird.js に相対パスを使用し、Dog.js にエイリアスを使用して、さまざまなスタイルの import ステートメントを生成します。

Import ステートメントは Lib エイリアスを使用します。

Option Always: the alias is used

Import ステートメントは相対パスを使用します。

Option Never: relative paths are used

IntelliJ IDEA は、Bird.js の相対パスと Dog.jsLib エイリアスを使用して、さまざまなスタイルの import ステートメントを生成します。

Import statement: alias or relative path used
正確にインポートしない

このフィールドでは、シンボルの自動インポート中に IntelliJ IDEA がスキップする必要がある正確なパスを指定します。代わりに、IntelliJ IDEA はシンボルをインポートするための代替パスを探します。

これは、モジュール全体ではなくサブモジュールをインポートできるモジュールで特に便利です。例: より一般的な import {Observable} from 'rxjs'import {Observable} from 'rxjs/Observable' のようなインポートを優先させるには、rxjs をリストに追加します。

スキップするモジュールのリストを管理するには:

  1. フィールドの右側にある Icons general expand component をクリックします。

  2. 開いているモジュールの変更ダイアログボックスで、Add icon をクリックし、モジュールの追加ダイアログボックスでモジュール名を指定します。一覧からモジュールを削除するには、モジュールを選択して Icons general remove をクリックします。

インポートされたメンバーをソートする
  • このチェックボックスが選択されている場合、IntelliJ IDEA は、マージされたインポート文のインポートされたメンバーをアルファベット順にリストします。メンバーは、コード | インポートの最適化を実行した場合にのみ、インポートおよび再ソートされた順序でコンマ区切りでリストされていることに注意してください。

  • このチェックボックスがオフの場合、マージされたインポート文のメンバーは、インポートされた順序で常にコンマ区切りでリストされます。

モジュール別にインポートをソートする
  • このチェックボックスが選択されている場合、コード | インポートの最適化を実行すると、インポート文がモジュール名でアルファベット順に再ソートされます。

  • このチェックボックスがオフの場合、インポート文は常に生成された順序で表示され、この順序はコード | インポートの最適化の実行後に変更されません。

配置

このタブでは、好みに応じて JavaScript コードを並べ替える一連のルールを定義します。

グループ化ルール

このエリアを使用して、グループ化ルールを設定します。

  • プロパティフィールドに対応する getter/setter をグループ化する

  • メソッドとアロー関数でフィールド初期化をグループ化する

  • オーバーライドされたメソッドをまとめる

    このチェックボックスを選択して、オーバーライドされたメソッドをクラスおよびインターフェースごとにグループ化します。順序リストで、順序保持または名前順オプションを選択します。

一致ルール

この領域を使用して、ルールのリストとして要素の順序を定義します。すべてのルールには、修飾子や型などの一致のセットがあります。

  • the Add button : このボタンを使用してルールを追加します。空のルール領域が開きます。

  • the Remove button : このボタンを使用してリストからルールを削除します。

  • the Edit button : このボタンを使用して既存のルールを編集します。このボタンを表示するには、編集するルールに移動してボタンをクリックします。表示されるポップアップで、ルールフィールドを変更します。

  • the Move up button the Move down button : これらのボタンを使用して、選択したルールを上下に移動します。

空のルール

このエリアを使用して、新しい一致ルールを作成するか、既存のルールを編集します。次のフィルターから選択できます。

  • タイプ : このフィルターを使用して、ルールのクラスまたはメソッドを選択します。
    type キーワードを 2 回クリックすると、条件が無効になることに注意してください。

  • 修飾子 : このフィルターを使用して、ルールの修飾子のタイプを選択します。
    修飾子キーワードを 2 回クリックすると、条件が無効になることに注意してください。

  • 名前 : このフィールドを使用して、ルールのエントリ名を指定します。このフィルターは、フィールド名、メソッド名、クラス名などのエントリ名のみに一致します。フィルターは正規表現をサポートし、標準の構文(英語)を使用します。一致は名前全体に対して実行されます。

  • 順序 : このリストを使用して、ルールの並べ替え順序を選択します。このオプションは、複数の要素が同じ一致ルールを使用する場合に役立ちます。この場合、順序を維持を選択すると、再配置前に設定されたのと同じ順序が維持され、名前で並べ替えを選択すると、同じ一致ルールを持つ要素が名前で並べ替えられます。

  • エイリアス : このオプションは、ルールの別名定義ダイアログで定義されたエイリアスを表示します。不要なものは削除できます。

the Sort Alphabetically button このアイコンは、順序リストから名前で並べ替えを選択すると表示されます。アイコンは、このルールの項目がアルファベット順にソートされていることを示します。

次からセット

該当する場合、リンクはページの右上隅に表示されます。このリンクをクリックして、現在の言語コードスタイルのベースとして使用する言語を選択します。

コードスタイル設定の初期セットに戻り、変更を破棄するには、リセットをクリックします。

関連ページ:

プラグインを管理する

このサイトのメニューやアクション名表記は日本語です。IntelliJ IDEA を日本語化するには、日本語言語パックのインストールを参照してください。プラグインは以下に示すように IntelliJ IDEA のコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を向上、コーディング演習と検証で新しい...

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

IntelliJ IDEA では、コードスタイル設定で指定した要件に従ってコードを再フォーマットできます。ただし、プロジェクトで EditorConfig を使用する場合、ファイルで指定されたオプションは、コードを再フォーマットするときにコードスタイル設定で指定されたオプションをオーバーライドします。設定にアクセスするには、設定 / 環境設定ダイアログでに移動します。詳細については、コードスタイルの構成を参照してください。コードの一部、ファイル全体、ファイルのグループ、ディレクトリ、モジュールを再...

コードスタイル

スキーム:この領域では、コードスタイルスキームを選択し、必要に応じて変更します。コードスタイルスキームの設定は、IntelliJ IDEA がコードを生成、リファクタリング、または再フォーマットするたびに自動的に適用されます。コードスタイルは、プロジェクトレベルと IDE レベル(グローバル)で定義されます。プロジェクトレベルでは、設定はプロジェクトスキームにグループ化されます。これは事前定義されており、太字でマークされています。プロジェクトスタイルスキームは現在のプロジェクトにのみ適用されます...

JavaScript のリファクタリング

リファクタリングとは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングは、コードを安定した dry に保ち、保守を容易にできます。シンボルの移動リファクタリング:IntelliJ IDEA を使用すると、ファイルやフォルダーを移動できるだけでなく、JavaScript トップレベルシンボルを移動できます。シンボルの移動リファクタリングは、ES6 モジュールのクラス、関数、変数に対して機能します。クラス、関数、または変数を移動する移動するシンボルを選択します...

コードスタイル: HTML

このページを使用して、HTML ファイルのフォーマットオプションを設定します。これらの設定を変更すると、プレビューペインに、コードへの影響が表示されます。タブとインデント:タブ文字を使用するこのチェックボックスをオンにすると、タブ文字が使用されます。キーを押すと、インデント用、コードを再フォーマットするため、チェックボックスがオフの場合、IntelliJ IDEA はタブではなくスペースを使用します。スマートタブインデントは 2 つの部分で構成されます。1 つの部分はコードブロックのネストに起...

コードスタイル: JSON

このページを使用して、JSON ファイルのフォーマットオプションを設定します。これらの設定を変更すると、プレビューペインに、コードへの影響が表示されます。タブとインデント:タブ文字を使用するこのチェックボックスをオンにすると、タブ文字が使用されます。キーを押すと、インデント用、コードを再フォーマットするため、チェックボックスがオフの場合、IntelliJ IDEA はタブではなくスペースを使用します。スマートタブインデントは 2 つの部分で構成されます。1 つの部分はコードブロックのネストに起...