IntelliJ IDEA 2020.3 ヘルプ

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

始める前に

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

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

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

CoffeeScript を JavaScript にコンパイルする

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

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

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

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

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

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

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

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. このモードでは、coffeescript パッケージの一部である register.js ファイルがプロジェクト内にある必要があります。CoffeeScript コンパイラーをインストールするに従って、coffeescript パッケージがローカルにインストールされていることを確認してください。

  2. エディターで開始 CoffeeScript ファイルを開くか、プロジェクトツールウィンドウで選択して、コンテキストメニューから <CoffeeScript_file_name> を実行しますを選択します。IntelliJ IDEA は、自動生成された実行 / デバッグ構成でファイルを実行します。

    または、コンテキストメニューから <CoffeeScript_file_name> を作成しますを選択し、開いた実行 / デバッグ構成: Node.js ダイアログで次の必須設定を確認します。

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

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

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

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

    4. JavaScript ファイルフィールドで、実行する 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. 配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、または色とフォントの構成の説明に従ってカスタマイズします。

関連ページ:

プラグインを管理する

IntelliJ IDEA のユーザーインターフェースはデフォルトでは英語です。日本語化する場合は、日本語言語パックのインストールを参照してください。プラグインは以下に示すように IntelliJ IDEA のコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、およびその他のツー...

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

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

ファイル監視

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

npm、pnpm、Yarn

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

外部ツール

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

Node.js の実行とデバッグ

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