JavaScript

プロジェクトのセキュリティ

PhpStorm の外で作成しインポートされたプロジェクトを開くと、PhpStorm は未知のソースコードを扱う方法を決定できるダイアログを表示します。

次のいずれかのオプションを選択してください：

• セーフモードでプレビュー ：この場合、PhpStorm はプロジェクトをプレビューモードで開きます。 これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。

  PhpStorm はエディター領域上部に通知を表示し、 プロジェクトを信頼する… リンクをクリックすればいつでもプロジェクトをロードできます。

• プロジェクトを信頼 ：この場合、PhpStorm はプロジェクトを開いてロードします。 つまり、プロジェクトが初期化され、プラグインが解決され、依存関係が追加され、すべての PhpStorm 機能が利用可能になります。

• 開かない ：この場合、PhpStorm はプロジェクトを開きません。

詳細については プロジェクトのセキュリティ を参照してください。

複数の JavaScript バージョンを使用する

ECMAScript 5.1 と新しいバージョンの ECMAScript の両方を使用するアプリケーションに取り組んでいる場合、最も簡単な方法は、 JavaScript ページ (設定 | 言語 & フレームワーク | JavaScript) のリストからプロジェクト全体の最も高い言語バージョンを選択することです。

JavaScript コードの JSX 構文

JavaScript コードで JSX 構文を使用している場合は、 ECMAScript 6 以降 を有効にします。

パラメーターヒント

パラメーターヒントは、コードを読みやすくするためのメソッドや関数のパラメーター名を示します。 デフォルトでは、リテラルまたは関数式であるが名前付きオブジェクトではない値に対してのみ、パラメーターヒントが表示されます。

戻り型のヒント

PhpStorm は関数呼び出しや呼び出しチェーンで関数の戻り値の型を表示できます。

• 関数の戻り値の型ヒントは、 JSDoc コメントから、またはコードの静的解析に基づき推論されます。

• メソッドチェーンで型ヒントを返すは、メソッド呼び出しが複数行に分かれており、少なくとも 2 つの異なる型を返す場合に表示されます。

  メソッドチェーンの戻り値の型ヒントは、内部 PhpStorm エバリュエーターによって提供されます。

型ヒント

型ヒントは、変数、フィールド、パラメーターの型を示します。 変数とフィールドの型は、その定義の横に表示されます。 パラメーターの型ヒントは関数呼び出しに表示されます。 型ヒントは JSDoc コメントやコードの静的解析から推論されます。

ES6 インポートステートメントを追加する

インポートステートメントは、シンボルの作成時にその場で追加することも、後からインポートツールチップ、クイックフィックス、インテンションアクションを使用して追加することもできます。

プロジェクトから ES6 モジュールであるファイル、またはすでに ES インポートステートメントが含まれているファイルにシンボルをインポートする場合、PhpStorm はシンボル補完時に自動的に ES6 インポートを挿入します。

未解決のシンボルにカーソルを合わせると、自動インポートのツールチップが表示され、インポート文を追加するように提案されます。

• 提案を受け入れるには、 Alt+Enter を押してください。

  

• ツールチップを無効にするには、エディターの右上隅にあるインスペクションウィジェットにカーソルを合わせ、 をクリックして、 自動インポートツールチップを表示 オプションのチェックを外します。

  

以前の JavaScript バージョンや、 補完時の自動インポートが無効化されている場合、PhpStorm はシンボルを未解決としてマークし、エラーの説明とクイックフィックスの提案が表示されるポップアップを表示します：

• 提案を受け入れるには、 Alt+Shift+Enter を押してください。

  

• または、 Alt+Enter を押します。

  

• インポートソースが複数ある場合、PhpStorm は候補リストを表示します：

  

PhpStorm は、プロジェクトの依存関係で定義されたシンボルのインポートステートメントも生成できます。 自動インポートは、 TypeScript 定義ファイル(英語)を含むパッケージ（moment(英語) や redux(英語) など）や ES モジュールとして記述されたソースのシンボルに対して機能します。

現在のファイルにすでに ES6 インポートステートメントが含まれている場合、PhpStorm は新しいステートメントも ES6 スタイルで挿入します。

CommonJS（必須）インポートステートメントを追加する

プロジェクトからすでに CommonJS モジュール（require ステートメントまたは module.export ）であるファイルにシンボルをインポートする場合、PhpStorm はシンボル補完時に自動的に CommonJS インポートを挿入します。

あるいは、インポートするシンボルにキャレットを置き、 Alt+Enter を押して、CommonJS (require) インポートスタイルのクイックフィックスを選択します。

import defer ステートメントを追加する

PhpStorm は JavaScript コンテキストでの import defer構文をサポートし、コード補完、エラーハイライト、 import ステートメントのライブテンプレートや使用箇所の検索が可能です。

import.defer 構文もサポートされています。

インポートソースステートメントを追加する

PhpStorm は JavaScript コンテキストでの import source構文をサポートし、コード補完、エラーハイライト、 import ステートメントのライブテンプレートや使用箇所の検索が可能です。

import.source 構文もサポートされています。

自動インポートを構成する

デコレーター

デコレータでは、整形時に各デコレータの後へ改行を挿入しないことが重要な場合があります。

デコレーターのためのフォーマットオプションは以下の通りです：