WebStorm 2025.1 ヘルプ

コードスタイルの構成

特定のコーディングガイドラインが企業内に存在する場合は、ソースコードを作成する際に、このガイドラインに従わなければなりません。WebStorm は、必要なコードスタイルを維持できます。

IDE には、プロジェクトスキームとデフォルトスキームの 2 つの定義済みスキームが付属しています。

  • プロジェクトスキームでは、構成する設定は現在のプロジェクトにのみ適用されます。

    これらの設定は、.ideacodeStyles フォルダーに保存され、VCS を介してプロジェクトと共有されます。

    プロジェクトのコードスタイル設定を変更すると、IDE によってフォルダーが作成されます。

  • デフォルトスキーム(IDE レベルのスキーム)では、構成する設定は、デフォルトコードスタイルスキームが選択されている既存のすべてのプロジェクトに適用されます。

    これらの設定は、WebStorm コンフィギュレーションディレクトリの下の codestyles フォルダーに保存され、VCS を介して共有されません。

プロジェクトコードスタイルスキームをデフォルトスキームとして使用する場合は、IDE レベルにコピーできます。逆の方法も可能です。現在のプロジェクト設定を IDE レベルのスキームの設定で上書きし、チームの他のメンバーと共有することができます。

スキームを構成する

WebStorm では、コードスタイル設定は言語固有であるため、プロジェクトで使用する言語ごとに個別に構成する必要があります。ある言語から設定をコピーして、別の言語に適用することもできます。

言語のコードスタイルを設定する

  1. Ctrl+Alt+S を押して設定を開き、エディター | コードスタイルを選択します。

    新しいプロジェクトのスキームを構成するには、ファイル | 新規プロジェクトのセットアップ | 新規プロジェクトの設定 | エディター | コードスタイルに移動します。

  2. コードスタイルを構成する言語を選択します。

  3. 構成するコードスタイルスキームを選択します: プロジェクトスキームまたは IDE レベルのスキームの 1 つ。

  4. タブを参照して、コードスタイルの設定を構成します。

    ダイアログの右側のセクションを使用して、変更をプレビューします。設定を変更すると、プレビュー領域に 1 つまたは複数の点滅領域が表示され、変更が強調されます。

別の言語のコードスタイルを適用する

ほとんどのサポートされている言語では、他の言語やフレームワークのコードスタイル設定をコピーできます。

  1. Ctrl+Alt+S を押して設定を開き、エディター | コードスタイルを選択します。

    新しいプロジェクトのスキームを構成するには、メインメニューのファイル | 新規プロジェクトのセットアップ | 新規プロジェクトの設定 | エディター | コードスタイルに移動します。

  2. コードスタイルを構成する言語を選択します。

  3. 変更するコードスタイルスキームを選択します: プロジェクトスキームまたは IDE レベルのスキームの 1 つ。

  4. 表示されるリストから、コードスタイルをコピーする言語を選択します。

    Set code style from another language

EditorConfig を使用してディレクトリレベルでコードスタイルを管理する

WebStorm を使用すると、EditorConfig(英語) サポート ( 設定ダイアログ (Ctrl+Alt+S) でデフォルトで有効になります) を使用して、個々のファイルセットごとにすべてのコードスタイル設定を管理できます。コードスタイルを定義したいファイルが含まれるルートディレクトリに .editorconfig ファイルを配置するだけです。プロジェクト内には必要なだけ .editorconfig ファイルを含めることができるため、モジュールごとに異なるスタイルを指定できます。

.editorconfig ファイルからのすべてのオプションは、それが存在するディレクトリと現在のプロジェクトコードスタイルの上にあるそのすべてのサブディレクトリに適用されます。.editorconfig で何も定義されていない場合は、プロジェクト設定から取得されます。

.editorconfig ファイルのすべてのオプションは、以下のカテゴリに分類されます。

  • indent_sizeindent_style などの標準オプション。これらのオプションにはドメイン固有の接頭辞がありません。

  • ij_ という接頭辞を持ち、すべての言語に適用可能な一般的な IntelliJ オプション

    • ij_visual_guides

    • ij_formatter_off_tag

    • ij_formatter_on_tag

    • ij_formatter_tags_enabled

    • ij_wrap_on_typing

    • ij_continuation_indent_size

    • ij_smart_tabs

  • 多くの(全部ではない)言語でサポートされている共通の IntelliJ オプション。それらは ij_any_brace_style のように、ij_any 接頭辞で始まります。

  • <lang> は言語ドメイン ID(通常は小文字の言語名)である ij_<lang>_ 接頭部で始まる IntelliJ 言語固有のオプション、たとえば ij_java_blank_lines_after_imports

.editorconfig ファイルを追加する

  1. プロジェクトビューで、コードスタイルを定義するファイルを含むソースディレクトリを右クリックして、コンテキストメニューから新規 | EditorConfig を選択します。

  2. WebStorm がスタブを作成するように定義するプロパティを選択するか、必要なプロパティを手動で追加するにはすべてのチェックボックスを空白のままにします。

  3. コードスタイル設定の変更が実際のソースファイルにどのように影響するかをプレビューするには、.editorconfig ファイルのガターで the eye icon をクリックし、影響を受けるソースファイルを選択します。プレビューが右側に開きます。

    editorconfig preview

    プレビューペインを変更して、ソースコードに不要な変更を加えることを気にせずに構成の変更がどのように反映されるかを試すことができます。これらの変更はすべて .editorconfig ファイルを閉じると破棄されます。

関連ページ:

IDE で使用されるディレクトリ

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

プロジェクト設定

WebStorm では、特定のプロジェクトの設定を構成することも、IDE レベルでグローバルに設定を構成することもできます。詳細については、IDE の構成を参照してください。プロジェクトレベルの設定は、現在のプロジェクトにのみ適用されます。これらの設定は、プロジェクトフォルダーの .idea ディレクトリに xml ファイルとして保存されます。<project name>.iml ファイルはプロジェクト構造を記述します。workspace.xml ファイルには、実行 / デバッグ構成などのワーク...

プラグインのインストール

プラグインは WebStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。デフォルトでは、WebStorm には多数のプラグインがバンドルされています。バンドルされたプラグインを無効にするこ...

新しい UI

新しいユーザーインターフェース (UI) は、WebStorm およびその他の JetBrains IDE の外観を再設計したものです。デザインを簡素化し、重要な機能にアクセスしやすくするために作成されました。その結果、よりクリーンでモダンなルックアンドフィールが得られます。この記事では、新しい UI の主な変更点と、それを使い始める方法について説明します。主な変更点:テーマこの UI には 3 つの新しいテーマ (ライト、ダーク、ライトヘッダー付きライト) が導入されました。これらはすべて、...

色とフォント

開発者は、エディターのソースコード、検索結果、デバッガー情報、コンソールの入出力など、多くのテキストリソースを操作します。このテキストのフォーマットには色とフォントスタイルが使用されており、一目で理解できるようになります。WebStorm では、IDE テキストで使用される色とフォントを定義する構成可能な配色から選択できます。事前定義された配色を使用するか、あなたの好みに合わせてカスタマイズすることができます。スキームを共有することも可能です。配色を選択を押して設定を開き、を選択します。あるいは...