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 となります。 生成ファイルの保存場所は、 New Watcher ダイアログの リフレッシュする出力パス フィールドで定義されます。 この設定に基づいて、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 構成時に JavaScript ランタイムページで指定したランタイムへのパスが表示されます。
作業ディレクトリ フィールドには、起動する CoffeeScript ファイルから参照するファイルの場所を指定します（例: includes）。 このファイルが他のファイルを参照していない場合は、フィールドを空のままにしてください。
ノードアプリ JS ファイルへのパス フィールドに、コンパイル中に元の CoffeeScript ファイルから生成された JavaScript ファイルへの絶対パスを指定します。
設定を保存し、ダイアログで 実行 をクリックします。
あるいは、メインツールバーのリストから新しく作成した実行構成を選択し、
をクリックします。Node.js アプリケーションの実行の間に進みます。
実行中にオンザフライで CoffeeScript をコンパイルする
このモードでは、
coffeescriptパッケージの一部である register.js ファイルがプロジェクト内に配置されている必要があります。 そのため、 CoffeeScript コンパイラーをインストールするで説明されているように、coffeescriptパッケージがローカルにインストールされていることを確認してください。エディターで開始用の CoffeeScript ファイルを開くか、 プロジェクト ツールウィンドウ (Alt+1) でファイルを選択し、コンテキストメニューから を選択します。 WebStorm は自動生成された実行 / デバッグ構成でファイルを実行します。
または、コンテキストメニューから を選択し、開いた Run/Debug Configuration: Node.js ダイアログで次の必須設定を確認します：
使用する Node.js ランタイム。 適切なランタイム構成を選択するか、新しい構成を作成してください。 デフォルトでは、このフィールドには Node.js 構成時に JavaScript ランタイムページで指定したランタイムへのパスが表示されます。
Linux および macOS では、この設定は CoffeeScript コンパイラー実行ファイルへのパスからの Node.js によって上書きされます。
Node パラメーター フィールドに
--require coffeescript/registerと入力します。作業ディレクトリ フィールドで、アプリケーションの 作業ディレクトリ(英語)を指定します。 デフォルトでは、フィールドには プロジェクトのルートフォルダー が表示されます。
ファイル フィールドで、実行する CoffeeScript ファイルへのフルパスを指定します。
設定を保存し、ツールバーの
をクリックします。あるいは、メインツールバーのリストから新しく作成した実行構成を選択し、
をクリックします。Node.js アプリケーションの実行の間に進みます。
CoffeeScript のデバッグ
WebStorm で CoffeeScript をデバッグするには、JavaScript コードに加えて生成される ソースマップが必要です。 ソースマップは CoffeeScript コードの行と生成された JavaScript コードの行の対応を設定します。これがないと、ブレークポイントが正しく認識および処理されません。 JavaScript とソースマップは、File Watcher の CoffeeScript タイプを使って 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 構成時に JavaScript ランタイムページで指定したランタイムへのパスが表示されます。
作業ディレクトリ フィールドには、起動する CoffeeScript ファイルから参照するファイルの場所を指定します（例: includes）。 このファイルが他のファイルを参照していない場合は、フィールドを空のままにしてください。
ノードアプリ JS ファイルへのパス フィールドに、コンパイル中に元の CoffeeScript ファイルから生成された JavaScript ファイルへの絶対パスを指定します。
設定を保存し、ツールバーの
をクリックします。
構文ハイライトの構成
好みや習慣に応じて、CoffeeScript 対応の構文ハイライトを設定できます。
設定 ダイアログ（Ctrl+Alt+S ）で に移動します。
カラースキームを選択し、デフォルトから継承されたハイライト設定をそのまま使用するか、 カラースキーム：エディターのフォントと色彩 の説明に従ってカスタマイズしてください。