PhpStorm 2024.3 ヘルプ

チュートリアル: JavaScript 内の PHP 構文のハイライト

このチュートリアルでは、PhpStorm での複合構文を扱うためのテンプレートデータ言語の使用方法について説明します。時には、異なるプログラミング言語を 1 つのファイルに混在させています。このようなインジェクションが 1 回または 2 回しかない場合は、言語インジェクションを使用してください。しかし、もしたくさんいるとしたら? 例: PHP の変数や関数を使用している JavaScript ファイルや CSS ファイル? どのようにして、コード補完とインスペクションが混在した構文ハイライトを得るのですか? これを行うには、テンプレートデータ言語を設定するという素晴らしいトリックがあります。

以下の JavaScript ファイルを考えてみましょう。ファイル内では、現在のドキュメントが読み込まれたときに警告に表示する PHP 変数を使用しています。構文エラーを発見することもできます: 変数にアクセスするために $ が欠落していました。PhpStorm は、JavaScript コードと PHP コードの両方をどのように認識させるのですか?

Mixed syntax highlighting in a js file

PhpStorm で異なる言語を 1 つのファイルで認識させるには、次の手順を実行します。

  1. ファイルの名前を変更するを使用します。そのため、PhpStorm は PHP として扱いますが、拡張子は php とは異なります。

  2. 新しいファイルタイプを PHP に関連付ける(または他の言語)。

  3. テンプレートデータ言語を設定するを設定します。

ファイルの名前を変更する

最初のステップとして、ファイルを alert.js から alert.js.php に名前変更します(拡張子は任意です)。拡張を変更する必要があるのはなぜですか? ハイライト表示、コード補完、解析がすべてのファイルに対して実行可能なままになるように、カスタム言語を他の php ファイルから分離することは不可欠です。なぜ .js.php ですか? デプロイされると、このファイルは PHP によって実行されなければなりません。もちろん、PHP インタープリターを介して JavaScript ファイルを実行するようにサーバーを再構成することもできますが、現在の方法はおそらく簡単です。

名前を変更した後のファイルの外観は次のとおりです。

Mixed syntax highlighting in a js.php file

新しいファイルタイプを PHP に関連付ける

設定ダイアログのファイルタイプページで新しい(js.php ファイルタイプを PHP に関連付ける必要があります。カスタム拡張子を使用したくない場合は、完全なファイル名をパターンとして使用する必要はありません。お勧めします。

File types settings page

この設定は IDE ワイドなので、作成されたファイルタイプの関連付けはすべてのプロジェクトに影響します。独自の拡張機能を使用することが最善の方法です。

テンプレートデータ言語を設定する

PhpStorm は PHP 構文を認識しますが、JavaScript は認識しなくなりました。設定ダイアログ (Ctrl+Alt+S) で、言語 & フレームワークテンプレートデータ言語を選択します。ここでは、特定のファイル、フォルダー、プロジェクト全体に対して第 2 言語を指定できます。この例では、ファイルとして JavaScript を選択できます。

Template Data Languages settings page

テンプレートデータ言語が指定されると、PhpStorm は両方の言語を認識し、PhpStorm は構文ハイライト、コード補完、インスペクション、リファクタリングなどを提供します。

PHP inspection in php.js

関連ページ:

言語インジェクション

言語インジェクションを使用すると、コードに埋め込まれた他の言語のコード部分を操作できます。文字列リテラルに言語 (HTML、CSS、XML、RegExp など) を挿入すると、プロジェクトのメイン言語でなくても、挿入されたコードに対して包括的なコーディング支援を受けることができます。PHP のコンテキストでは、インジェクション可能な PHP と呼ばれる特別な PHP ダイアレクトを使用できます。このダイアレクトは、省略可能な開始タグを除いて、PHP に似ています。インジェクション可能な PHP は、...

ファイルタイプ

コピーライトなしこのオプションを選択すると、選択した種類のファイルでコピーライト表示が更新されません。デフォルト設定を使用するこのオプションを選択すると、新しいプロジェクトのデフォルト設定に従ってコピーライト表示が更新されます。カスタムフォーマットオプションを使用するこのオプションを選択すると、選択した種類のファイルのコピーライト表示が、以下に定義されているカスタム設定に従って更新されます。コメントタイプこの領域では、コピーライト表示を囲むコメントの種類を指定します。使用できるオプションは次のと...

IDE の設定

PhpStorm では、プロジェクトレベルとグローバルの 2 つのレベルで設定を構成できます。グローバル設定は、特定のインストールまたはバージョンの PhpStorm で開くすべてのプロジェクトに適用されます。このような設定には、IDE の外観 (テーマ、配色、メニュー、ツールバー)、通知設定、インストールされて有効になっているプラグインのセット、デバッガー設定、コード補完などが含まれます。グローバル設定は、構成ディレクトリに保存されます。プロジェクト設定は、新しいプロジェクトのデフォルト設定と...

ファイルタイプの関連付け

PhpStorm は、さまざまな言語やテクノロジを表すファイルの言語固有の機能(構文のハイライトやコード分析など)について、ファイルタイプのリストを保持します。各ファイルタイプは、言語サービスを 1 つ以上のファイル名パターンにリンクします。ファイルタイプのデフォルトリストには、関連するすべてのファイル名パターンが含まれていますが、カスタム言語ファイルに新しいファイルタイプを追加したり、既存のファイルタイプに関連付けられたファイル名パターンを変更したりできます。エディターでファイルを開くと、Ph...

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

プラグインは PhpStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains マーケッ...