IntelliJ IDEA 2020.2ヘルプ

コード・スタイル: JavaScript

WindowsおよびLinux用のファイル | 設定 | エディター | コード・スタイル | JavaScript

macOS Ctrl+Alt+S the Settings/Preferences iconIntelliJ IDEA | 環境設定 | エディター | コード・スタイル | JavaScript

Use this page to configure formatting options for JavaScript files. When you change these settings, the プレビュー pane shows how this will affect your code.

タブとインデント

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

    • Tab キーを押すと

    • インデント用

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

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

スマート・タブ

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

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

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

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

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

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

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

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

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

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

スペース

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

折り返しおよび括弧

このタブでは、IntelliJ IDEAがソースコードの再フォーマット時にさまざまなコード構成に適用する例外、ブレース配置、および配置オプションをカスタマイズします。プレビューペインで結果を確認します。
次でハードラップこのフィールドでは、要素の右側に必要なスペースの数を指定します。デフォルトオプションを受け入れると、グローバル設定の値が使用されます。
入力時に折り返す

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

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

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

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

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

再フォーマット時の保持

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

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

折り返しオプション

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

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

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

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

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

アライメントオプション

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • ES6インポート/エクスポート When the 'from' 節をそろえる : checkbox is selected, IntelliJ IDEA aligns import and export statements in ECMAScript 6(英語) code automatically making your code easier to read and maintain. Compare the appearance of a code fragment with alignment and without it in the プレビュー pane.

    ws_align_import_export_es6.png

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

波括弧配置オプション

波括弧配置スタイル

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

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

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

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

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

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

強制波括弧

このリストから、if , for , whileおよび do () 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モジュールの名前に追加します。これは、完全なファイル名を必要とするブラウザ(Chromeなど)でES6モジュールを使用する場合に重要です。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でエイリアスが指定されているアニメーションフォルダーのフォルダーに格納されています。ファイル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.expandComponent.png をクリックします。

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

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

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

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

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

配置

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

グループ化ルール

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

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

一致ルール

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

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

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

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

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

空のルール

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

  • タイプ : このフィルターを使用して、ルールのクラスまたはメソッドを選択します。

    タイプキーワードを2回クリックすると、条件が無効になることに注意してください。

  • 修飾子 : このフィルターを使用して、ルールの修飾子のタイプを選択します。

    修飾キーワードを2回クリックすると、条件が無効になることに注意してください。

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

  • 順序 : このリストを使用して、ルールのソート順を選択してください。このオプションは、複数の要素が同じ一致規則を使用している場合に便利です。この場合、秩序を保ちますを選択しても並べ替え前の設定と同じ順序が保持され、名前順を選択すると同じ一致規則を持つ要素が名前順に並べ替えられます。

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

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

次からセット

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

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

最終更新日: 2020年7月10日

関連ページ:

プラグインを管理する

プラグインはIntelliJ IDEAのコア機能を拡張します。彼ら:バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を...

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

IntelliJ IDEAでは、コード・スタイル設定で指定した要件に従ってコードを再フォーマットできます。ただし、プロジェクトでEditorConfigを使用する場合、ファイルで指定されたオプションは、コードを再フォーマットするときにコードスタイル設定で指定されたオプションをオーバーライドします。設...

コード・スタイル

macOSのIntelliJ IDEA | 環境設定 | エディター | コード・スタイルスキーム:この領域では、コードスタイルスキームを選択し、必要に応じて変更します。コードスタイルスキームの設定は、IntelliJ IDEAがコードを生成、リファクタリング、または再フォーマットするたびに自動的に...

JavaScript のリファクタリング

リファクタリングは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングはコードを堅牢にし、dryを維持しやすくします。シンボルの移動リファクタリング:IntelliJ IDEAを使用すると、ファイルやフォルダーを移動できるだけでなく、JavaScriptトップ...

コード・スタイル: HTML

macOSのIntelliJ IDEA | 環境設定 | エディター | コード・スタイル | HTMLUse this page to configure formatting options for HTML files. When you change these settings, theプ...