CoffeeScript
WebStorm では、JavaScript にコンパイルされる CoffeeScript(英語) を使用できます。WebStorm は *.coffee ファイルを認識し、それらに 
のマークを付けます。CoffeeScript コードにブレークポイントを直接設定でき、WebStorm はコンパイル中に生成されたソースマップを使用してブレークポイントを認識します。
WebStorm は、キーワード、ラベル、変数、パラメーター、関数の補完を提案することにより、CoffeeScript コードの作成を支援します。シンボルから宣言 Ctrl+B または実装 Ctrl+Alt+B に移動したり、名前 Ctrl+Alt+Shift+N のシンボルを検索したりできます。
WebStorm の統合の CoffeeScript(英語) は JavaScript に CoffeeScript のコードを変換するコンパイラー。このツールは、CoffeeScript コードと生成された JavaScript コードの行間の対応を設定するソースマップ(英語)も作成するため、WebStorm デバッガーは CoffeeScript コードのブレークポイントを認識して正しく処理します。
始める前に
お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 | プラグインページのマーケットプレースタブに CoffeeScript プラグインをインストールして有効にします。
設定で File Watchers プラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、を選択します。インストール済みタブをクリックします。検索フィールドに File Watchers と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。
CoffeeScript を JavaScript にコンパイルする
コードを自動的にコンパイルするには、ファイルへの変更を追跡してコンパイラーを実行する CoffeeScript ファイルウォッチャーを構成する必要があります。
ファイルを開くと、WebStorm は現在のプロジェクトで適用可能な File Watcher が使用可能かどうかを確認します。そのような File Watcher が構成されているが無効になっている場合、WebStorm は構成されている File Watcher について通知し、有効にすることを提案するポップアップを表示します。
現在のプロジェクトで該当する File Watcher が構成され有効になっている場合、WebStorm は新規ウォッチャーダイアログで指定されたイベントが発生すると自動的にコンパイラーを起動します。
編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスが選択されている場合、ソースウォッチに変更が加えられるとすぐに File Watcher が呼び出されます。
編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスをオフにすると、保存時 (、Ctrl+S) または WebStorm からフォーカスを移動したとき (フレームの非アクティブ化時) に File Watcher が開始されます。
File Watchers の詳細を参照してください。
コンパイラーは、生成された出力を別のファイルに保存します。ファイルの名前はソース CoffeeScript ファイルと同じで、拡張子はコンパイラーの種類に応じて .js または .js.map になります。生成されたファイルの場所は、新規ウォッチャーダイアログのリフレッシュする出力パスフィールドで定義されます。この設定に基づいて、WebStorm はコンパイラー出力を検出します。ただし、プロジェクトツールウィンドウ Alt+1 では、それらはソース coffee ファイルに表示されますが、このファイルはノードとして表示されます。
CoffeeScript コンパイラーをインストールする
埋め込まれたターミナル（Alt+F12）で、次のいずれかのコマンドを入力します。
グローバルインストール用の
npm install --global coffeescriptCoffeeScript を開発依存関係(英語)としてインストールする
npm install --save-dev coffeescriptCoffeeScript 公式 Web サイト(英語)の詳細を参照してください。
CoffeeScript ファイルウォッチャーを作成する
Ctrl+Alt+S を押して設定を開き、 を選択します。
をクリックするか、Alt+Insert を押して、リストから CoffeeScript 定義済みテンプレートを選択します。コードは JavaScript に翻訳され、生成されたソースマップ(英語)とともに提供されます。File Watchers に記載されている手順に従います。
コンパイラーの動作をカスタマイズする
WebStorm を使用すると、コマンドラインモードで作業しているかのように、コンパイラーに引数を渡すことでコンパイラーを調整できます。以下は、CoffeeScript コンパイラーのデフォルトの出力場所をカスタマイズする例です。
次のフォルダー構造のプロジェクトがあるとします。
デフォルトの File Watcher では、生成されたファイルは元のファイルの子として表示されます。
このデフォルトの場所を変更して、生成されたファイルを別の JavaScript フォルダーに保存することができます。
生成されたすべてのファイルを出力 JavaScript フォルダーに保存する
CoffeeScript ファイルウォッチャーを作成します。
引数フィールドに次のように入力します。
--map --compile -o $ProjectFileDir$/JavaScript $FileName$リフレッシュする出力パスフィールドに次のように入力します。
$ProjectFileDir$/JavaScript/$FileNameWithoutExtension$.js:$ProjectFileDir$/JavaScript/$FileNameWithoutExtension$.map:$FileNameWithoutExtension$.js.map
その結果、プロジェクトツリーは次のようになります。
生成されたファイルを、app ノードの元の構造を繰り返すフォルダー構造に格納することもできます。
出力フォルダーに元のフォルダー構造を保持する
CoffeeScript ファイルウォッチャーを作成します。
引数フィールドに次のように入力します。
--map --compile -o $ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$ $FileName$リフレッシュする出力パスフィールドに次のように入力します。
$ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.js:$ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.map:$FileNameWithoutExtension$.js.map
その結果、プロジェクトツリーは次のようになります。
コンパイラーを実行せずにコンパイル結果をプレビューする
WebStorm は実際にコンパイラーを実行せずに CoffeeScript コードの静的解析を実行し、専用の読み取り専用ビューアーで予測されるコンパイル出力を表示できます。
エディターで目的の CoffeeScript ファイルを開き、エディターの背景を右クリックします。
コンテキストメニューからを選択します。プレビューは専用の読み取り専用ビューアーで開きます。左側のペインには元の CoffeeScript ソースコードが表示され、右側のペインにはコンパイラーの実行時に生成される JavaScript コードが表示されます。
CoffeeScript の実行
WebStorm で CoffeeScript を実行する方法は 2 つあります。
CoffeeScript コードを手動でコンパイルし、出力 JavaScript コードをあたかも Node.js アプリケーションのように実行します。
元の CoffeeScript コードを Node.js 実行構成で実行し、WebStorm にその場でコンパイルします。
CoffeeScript を手動でコンパイルし、生成された JavaScript コードを実行する
Node.js の実行構成の作成を開始するを次の必須設定で使用します。
使用する Node.js エンジン。デフォルトでは、このフィールドには Node.js の設定中に Node.js ページで指定されたインタープリターへのパスが表示されます。
作業ディレクトリフィールドには、起動する CoffeeScript ファイルから参照するファイルの場所を指定します（例: includes）。このファイルが他のファイルを参照していない場合は、フィールドを空のままにしてください。
ノードアプリケーション JS ファイルへのパスフィールドに、コンパイル中に元の CoffeeScript ファイルから生成された JavaScript ファイルへの絶対パスを指定します。
設定を保存し、ダイアログで実行をクリックします。
あるいは、メインツールバーのリストから新しく作成した実行構成を選択し、
をクリックします。Node.js アプリケーションの実行の間に進みます。
実行中にオンザフライで CoffeeScript をコンパイルする
このモードでは、
coffeescriptパッケージの一部である register.js ファイルがプロジェクト内に配置されている必要があります。CoffeeScript コンパイラーをインストールするの説明に従って、coffeescriptパッケージがローカルにインストールされていることを確認してください。エディターで開始 CoffeeScript ファイルを開くか、プロジェクトツールウィンドウ Alt+1 を選択して、コンテキストメニューから を選択します。WebStorm は、自動的に生成された実行 / デバッグ構成でファイルを実行します。
または、コンテキストメニューから を選択し、開いた実行 / デバッグ構成: Node.js ダイアログで次の必須設定を確認します。
使用するノードインタープリター。関連するインタープリター構成を選択するか、新しいインタープリターを作成します。デフォルトでは、このフィールドには、Node.js の構成中に Node.js ページで指定されたインタープリターへのパスが表示されます。
Linux および macOS の場合、この設定は、CoffeeScript コンパイラー実行ファイルへのパスから Node.js によって上書きされます。
Node パラメーターフィールドに
--require coffeescript/registerと入力します。作業ディレクトリフィールドで、アプリケーションの作業ディレクトリ(英語)を指定します。デフォルトでは、フィールドにはプロジェクトのルートフォルダーが表示されます。
ファイルフィールドで、実行する CoffeeScript ファイルへのフルパスを指定します。
設定を保存し、ツールバーの
をクリックします。あるいは、メインツールバーのリストから新しく作成した実行構成を選択し、
をクリックします。Node.js アプリケーションの実行の間に進みます。
CoffeeScript のデバッグ
WebStorm で CoffeeScript をデバッグするには、JavaScript コードに加えてソースマップを生成する必要があります。ソースマップ(英語)は CoffeeScript コードと生成された JavaScript コードの行間の対応を設定します。そうしないと、ブレークポイントが認識されず、正しく処理されません。JavaScript とソースマップは、タイプ CoffeeScript の File Watcher を使用して CoffeeScript コードを手動でコンパイルすることによって生成されます。その後、出力された JavaScript コードを Node.js アプリケーションであるかのようにデバッグできます。
CoffeeScript のデバッグは、ローカルモードでのみサポートされています。つまり、WebStorm は実行構成に従って Node.js エンジンとターゲットアプリケーションを起動し、セッションを完全に制御します。
Node.js アプリケーションのデバッグの詳細については、「Node.js の実行とデバッグ」を参照してください。
CoffeeScript コードをデバッグする
必要に応じて、CoffeeScript コードにブレークポイントを設定します。
タイプ CoffeeScript の File Watcher を使用する CoffeeScript コードを Javascript にコンパイルします。
Node.js の実行構成の作成を開始するを次の必須設定で使用します。
使用する Node.js エンジン。デフォルトでは、このフィールドには Node.js の設定中に Node.js ページで指定されたインタープリターへのパスが表示されます。
作業ディレクトリフィールドには、起動する CoffeeScript ファイルから参照するファイルの場所を指定します（例: includes）。このファイルが他のファイルを参照していない場合は、フィールドを空のままにしてください。
ノードアプリケーション JS ファイルへのパスフィールドに、コンパイル中に元の CoffeeScript ファイルから生成された JavaScript ファイルへの絶対パスを指定します。
設定を保存し、ツールバーの
をクリックします。
構文ハイライトの構成
好みや習慣に応じて、CoffeeScript 対応の構文のハイライトを設定できます。
設定ダイアログ（Ctrl+Alt+S）で、 に移動します。
配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、色とフォントの説明に従ってカスタマイズします。
関連ページ：
プラグインのインストール
プラグインは WebStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。デフォルトでは、WebStorm には多数のプラグインがバンドルされています。バンドルされたプラグインを無効にするこ...
新規ウォッチャーダイアログ
File Watchers ページの追加または編集ボタンをクリックすると、ダイアログが開きます。このダイアログを使用して、定義済みの WebStorm File Watcher テンプレートに基づいてプロジェクト File Watcher を作成したり、既存のプロジェクト File Watcher を編集したりします。各テンプレートには、選択したツールに最適な設定が含まれています。ほとんどの場合、必要なのは、ツールの実行可能ファイルへのパスを指定することだけです。名前：名前フィールドに、Fil...
File Watchers
File Watcher は、ファイルの変更を追跡し、サードパーティのスタンドアロンアプリケーションを実行する WebStorm システムです。WebStorm は、多数の標準的な一般的なサードパーティツール (コンパイラー、コンプレッサー、整形ツールなど) 用に定義済みの File Watcher テンプレートを提供します。カスタム File Watcher を設定して、他のサードパーティツールを実行することもできます。File Watchers には 2 つの専用コードインスペクションがありま...
外部ツール
コンパイラー、リンター、コード圧縮プログラムなどのサードパーティのスタンドアロンアプリケーションを使用する推奨方法は、ツール固有のファイルウォッチャーを構成することです。このファイルウォッチャーはファイルへの変更を追跡し、必要に応じてアプリケーションを自動的に実行します。詳細については、File Watchers を参照してください。または、WebStorm でスタンドアロンのサードパーティアプリケーションを外部ツールとして構成することもできます。その結果、メインメニューと場合によってはコンテキス...
Node.js の実行とデバッグ
WebStorm は、Node.js アプリケーションの実行とデバッグを支援します。WebStorm から起動し、すでに実行中のアプリケーションにアタッチするアプリケーションをデバッグできます。始める前に：設定 | プラグインページのインストール済みタブで、Node.js および JavaScript Debugger に必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。Node.js アプリケーションを実行する：WebStorm は...
実行 / デバッグ構成: Node.js
作成: 次の Node.js バージョンは、WebStorm 2023.3 以降でサポートされています。Node.js 20 - アクティブな長期サポート (LTS) バージョン、Node.js 21 - 現在のバージョン、サポートされている Node.js バージョンの詳細を参照してください。このページでは、構成固有の項目と、すべての実行 / デバッグ構成に共通のオプションについて説明します。この構成の使用方法の詳細については、「Node.js の実行とデバッグ」を参照してください。このダイアロ...