IntelliJ IDEA 2020.2ヘルプ

CoffeeScript

IntelliJ IDEAでは、JavaScriptにコンパイルするCoffeeScript(英語)を使用できます。IntelliJ IDEAは*.coffeeファイルを認識し、the CoffeeScript iconでマークします。CoffeeScriptコードに直接ブレークポイントを設定することができ、IntelliJ IDEAはコンパイル中に生成されたソースマップを使用して認識します。

IntelliJ IDEAは、キーワード、ラベル、変数、パラメーター、および関数の補完を提案することにより、CoffeeScriptコードの作成を支援します。シンボルから宣言 Ctrl+B または実装 Ctrl+Alt+B にジャンプしたり、名前 Ctrl+Alt+Shift+Nのシンボルを検索したりできます。

IntelliJ IDEAは、CoffeeScriptコードをJavaScriptに変換するcoffee-script(英語)コンパイラと統合します。このツールは、CoffeeScriptコードと生成されたJavaScriptコードの行間の対応を設定するソースマップ(英語)も作成するため、IntelliJ IDEAデバッガーはCoffeeScriptコードのブレークポイントを認識し、正しく処理します。

始める前に

  1. Node.js(英語)をダウンロードしてインストールします。

  2. JetBrainsリポジトリからプラグインをインストールする説明に従って、設定/環境設定 | プラグインページでファイル監視プラグインをインストールして有効にします。

  3. 設定/環境設定 | プラグインページでCoffeeScriptバンドルプラグインが有効になっていることを確認してください。詳細については、プラグインの管理を参照してください。

CoffeeScriptをJavaScriptにコンパイルする

コードを自動的にコンパイルするには、ファイルへの変更を追跡し、coffee-scriptコンパイラを実行するCoffeeScriptファイルウォッチャーを構成する必要があります。

ファイルを開くと、IntelliJ IDEAは、該当するファイル監視が現在のプロジェクトで使用可能かどうかを確認します。そのようなファイル監視が構成されているが無効になっている場合、IntelliJ IDEAは、構成されたファイル監視について通知し、有効にすることを提案するポップアップを表示します。

現在のプロジェクトで該当するファイル監視が構成されて有効になっている場合、IntelliJ IDEAは新しいウォッチャーダイアログで指定されたイベントで自動的にコンパイラーを起動します。

  • 編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスが選択されている場合、ソースウォッチに変更が加えられるとすぐにファイル監視が呼び出されます。

  • 編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスをオフにすると、ファイルウォッチャーは保存(ファイル | すべて保存Ctrl+S)またはIntelliJ IDEAからのフォーカス移動時(フレーム非アクティブ化時)に開始されます。

ファイル監視の詳細を参照してください。

コンパイラーは、生成された出力を別のファイルに保管します。ファイルには、ソースCoffeeScriptファイルの名前と、コンパイラーのタイプに応じて拡張子.jsまたは.js.mapがあります。生成されたファイルの場所は、新しいウォッチャーダイアログリフレッシュする出力パスフィールドで定義されています。この設定に基づいて、IntelliJ IDEAはコンパイラ出力を検出します。ただし、プロジェクトツールウィンドウでは、ノードとして表示されているソースコーヒーファイルに表示されます。

CoffeeScriptコンパイラーをインストールする

  • 埋め込まれたターミナルAlt+F12)で、次のいずれかのコマンドを入力します。

CoffeeScriptファイルウォッチャーを作成する

  1. 設定/環境設定ダイアログ Ctrl+Alt+S で、ツール | ファイル監視に移動します。

  2. the Add button をクリックするか、Alt+Insert を押して、リストからCoffeeScript定義済みテンプレートを選択します。コードはJavaScriptに変換され、生成されたソースマップ(英語)とともに提供されます。

  3. プログラムフィールドで、coffee.cmdファイルへのパスを指定します。パスを手動で入力するか、the Browse button をクリックして、表示されるダイアログでファイルの場所を選択します。

  4. ファイル監視に記載されている手順に従います。

コンパイラの動作をカスタマイズする例

IntelliJ IDEAを使用すると、コマンドラインモードで作業しているかのように、引数をコンパイラーに渡してコンパイラーを調整できます。以下は、CoffeeScriptコンパイラのデフォルトの出力場所をカスタマイズする2つの例です。

次のフォルダー構造のプロジェクトがあるとします。

File watchers example of folder structure

デフォルトでは、生成されたファイルは元のファイルと同じフォルダーに保存されます。このデフォルトの場所を変更して、生成されたファイルをjsフォルダーに保存できます。さらに、フラットリストに格納するか、app ノードの元の構造を繰り返すフォルダー構造に配置することができます。

生成されたすべてのファイルを出力jsフォルダーに保存する

  1. 引数フィールドに次のように入力します。

    --output $ProjectFileDir$\js\$FileDirRelativeToProjectRoot$\ --compile --map $FileName$

  2. リフレッシュする出力パスフィールドに次のように入力します。

    $ProjectFileDir$\js\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.js:$ProjectFileDir$\js\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.map
    その結果、プロジェクトツリーは次のようになります。
    Example

コンパイラーを実行せずにコンパイル結果をプレビューする

IntelliJ IDEAは実際にコンパイラを実行せずにCoffeeScriptコードの静的解析を実行し、専用の読み取り専用ビューアーで予測されるコンパイル出力を表示できます。

  1. エディターで目的のCoffeeScriptファイルを開き、エディターの背景を右クリックします。

  2. コンテキストメニューからコンパイル済み CoffeeScript ファイルのプレビューを選択します。プレビューは専用の読み取り専用ビューアーで開きます。左側のペインには元のCoffeeScriptソースコードが表示され、右側のペインには実行時にコンパイラによって生成されるJavaScriptコードが表示されます。

CoffeeScriptの実行

IntelliJ IDEAでCoffeeScriptを実行する方法は2つあります。

  • CoffeeScriptコードを手動でコンパイルし、出力JavaScriptコードをあたかもNode.jsアプリケーションのように実行します。

  • 元のCoffeeScriptコードをNode.js実行構成で実行し、IntelliJ IDEAにその場でコンパイルします。

CoffeeScriptを手動でコンパイルし、生成されたJavaScriptコードを実行する

  1. CoffeeScriptコードをJavascriptにコンパイルします

  2. Node.jsの実行構成の作成を開始するを次の必須設定で使用します。

    1. 使用するNode.jsエンジン。デフォルトでは、このフィールドにはNode.jsの設定中にNode.jsページで指定されたインタープリターへのパスが表示されます。

    2. 作業ディレクトリフィールドでは、たとえば、実行するために開始CoffeeScriptのファイルから参照されるファイルの場所を指定し、含まれています。このファイルが他のファイルを参照しない場合は、フィールドを空のままにします。フィールド

    3. ノードアプリケーションJSファイルへのパスフィールドに、コンパイル中に元のCoffeeScriptファイルから生成されたJavaScriptファイルへの絶対パスを指定します。

  3. 設定を保存し、ツールバーの the Run button をクリックします。

  4. Node.jsアプリケーションの実行の間に進みます。

実行中にオンザフライでCoffeeScriptをコンパイルする

  1. このモードでは、coffee-script パッケージの一部であるregister.jsファイルがプロジェクト内にあることが必要です。npmおよびYarnで説明されているように、coffee-script パッケージをNode.jsページにローカルにインストールする必要があります。

  2. エディターで開始CoffeeScriptファイルを開くか、プロジェクトツールウィンドウで選択し、コンテキストメニューから<CoffecScript_file_name>を作成します。を選択します。または、Node.js実行/デバッグ構成を作成するに従って、Node.js実行構成の作成を開始します。開いた実行/デバッグ構成:Node.jsダイアログで、次の必須設定を指定します。

    1. 使用するノードインタープリター。関連するインタープリター構成を選択するか、新しいインタープリターを作成します。デフォルトでは、このフィールドには、Node.jsの構成中にNode.jsページで指定されたインタープリターへのパスが表示されます。

      LinuxおよびmacOSの場合、この設定は、CoffeeScriptコンパイラ実行ファイルへのパスからNode.jsによって上書きされます。

    2. Node パラメーターフィールドに --require coffee-script/registerと入力します。

    3. 作業ディレクトリフィールドで、アプリケーションの作業ディレクトリ(英語)を指定します。デフォルトでは、フィールドにはプロジェクトのルートフォルダーが表示されます

    4. JavaScript ファイルフィールドで、実行するCoffeeScriptファイルへのフルパスを指定します。

    必要なCoffeeScriptファイルから直接実行構成を作成すると、すべての必須フィールドが自動的に入力されます。

  3. 設定を保存し、ツールバーの the Run button をクリックします。

  4. Node.jsアプリケーションの実行の間に進みます。

CoffeeScriptのデバッグ

IntelliJ IDEAでCoffeeScriptをデバッグするには、JavaScriptコードに加えて生成されたソースマップが必要です。ソースマップ(英語)は、CoffeeScriptコードの行と生成されたJavaScriptコードの対応を設定します。そうしないと、ブレークポイントは認識されず、正しく処理されません。JavaScriptおよびソースマップは、タイプCoffeeScriptのファイル監視を使用してCoffeeScriptコードを手動でコンパイルすることによって生成されます。その後、出力JavaScriptコードをあたかもNode.jsアプリケーションのようにデバッグできます。

CoffeeScriptのデバッグは、ローカルモードでのみサポートされています。つまり、IntelliJ IDEAは実行構成に従ってNode.jsエンジンとターゲットアプリケーションを起動し、セッションを完全に制御します。

Node.jsアプリケーションのデバッグの詳細については、Node.jsの実行とデバッグを参照してください。

CoffeeScriptコードをデバッグする

  1. 必要に応じて、CoffeeScriptコードにブレークポイントを設定します。

  2. タイプCoffeeScriptのファイル監視を使用するCoffeeScriptコードをJavascriptにコンパイルします

  3. Node.jsの実行構成の作成を開始するを次の必須設定で使用します。

    1. 使用するNode.jsエンジン。デフォルトでは、このフィールドにはNode.jsの設定中にNode.jsページで指定されたインタープリターへのパスが表示されます。

    2. 作業ディレクトリフィールドには、起動するCoffeeScriptファイルから参照するファイルの場所を指定します(例: includes)。このファイルが他のファイルを参照していない場合は、フィールドを空のままにしてください。

    3. ノードアプリケーションJSファイルへのパスフィールドに、コンパイル中に元のCoffeeScriptファイルから生成されたJavaScriptファイルへの絶対パスを指定します。

  4. 設定を保存し、ツールバーの the Debug button をクリックします。

  5. コンピューターでNode.jsアプリケーションと一緒にデバッガーを開始する間に進みます。

構文強調表示の構成

好みや習慣に応じて、CoffeeScript対応の構文の強調表示を設定できます。

  1. 設定/環境設定ダイアログ Ctrl+Alt+Sで、エディター | カラー・スキームの切り替え | CoffeeScriptに移動します。

  2. 配色を選択するか、デフォルトから継承された強調表示設定を受け入れるか、または色とフォントの構成の説明に従ってカスタマイズします。

最終更新日: 2020年6月23日

関連ページ:

プラグインを管理する

プラグインはIntelliJ IDEAのコア機能を拡張します。彼ら:バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を...

新規ウォッチャーダイアログ

macOSのファイルウォッチャーページの追加、または編集、ボタンをクリックするとダイアログが開きます。ダイアログを使用して、事前定義済みIntelliJ IDEA File Watcherテンプレートに基づいてプロジェクトファイル監視を作成するか、既存のプロジェクトファイル監視を編集します。各テンプ...

ファイル監視

ファイル監視は、IntelliJ IDEAツールであり、IDEでファイルを変更または保存するときに、コンパイラー、フォーマッター、またはlinterなどのコマンドラインツールを自動的に実行できます。ファイルウォッチャーには、2つの専用コードインスペクションがあります。ファイル監視使用可能インスペクシ...

npmおよびYarn

IntelliJ IDEAはnpm、Yarn、Yarn 2、およびpnpmと統合されているため、IDE内から再利用可能なコードのパッケージをインストール、検索、アップグレード、および削除できます。Node.jsとNPMページは、パッケージを管理するための専用UIを提供します。もちろん、組み込みのター...

外部ツール

スタンドアロンのサードパーティアプリケーションを外部ツールとして定義し、IntelliJ IDEAから実行できます。プロジェクトからコンテキスト情報をコマンドライン引数(たとえば、現在選択されているファイル、開いているファイル、プロジェクトのソースパスなど)として外部ツールに渡したり、ツールによって...

Node.jsの実行とデバッグ-ヘルプ| IntelliJ IDEA

IntelliJ IDEAは、Node.jsアプリケーションの実行とデバッグを支援します。IntelliJ IDEAから起動し、既に実行中のアプリケーションにアタッチするアプリケーションをデバッグできます。始める前に:設定/環境設定 | プラグインページでNode.jsバンドルプラグインが有効になっ...