JavaScript

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

WebStorm の外部で作成されインポートしたプロジェクトを開くと、WebStorm は未知のソースコードをどう扱うか選択できるダイアログを表示します。

次のいずれかのオプションを選択します：

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

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

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

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

詳細は プロジェクトのセキュリティ をご覧ください。

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

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

JavaScript コードの JSX 構文

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

パラメーターヒント

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

戻り型のヒント

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

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

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

  メソッドチェーンの戻り値の型ヒントは、内部 WebStorm エバリュエーターが提供します。

型ヒント

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

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

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

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

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

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

  

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

  

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

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

  

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

  

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

  

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

現在のファイルにすでに ES6 インポート文がある場合、WebStorm も ES6 スタイルで新しいインポート文を挿入します。

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

既に CommonJS モジュール（require ステートメントまたは module.export を含む）となっているファイルに、プロジェクトのシンボルをインポートする場合、WebStorm はシンボル補完時に CommonJS インポートを自動的に挿入します。

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

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

WebStorm は JavaScript コンテキストで import defer 構文をサポートし、コード補完・エラー表示・ import ステートメントのライブテンプレート・使用箇所検索を提供します。

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

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

WebStorm は JavaScript コンテキストで import source 構文をサポートし、コード補完・エラー表示・ import ステートメントのライブテンプレート・使用箇所検索を提供します。

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

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

デコレーター

デコレーター向けには再フォーマット時に逐一改行を抑止するのが重要な場合もあります。

デコレーター用に次のフォーマットオプションが利用できます：