IntelliJ IDEA 2020.1ヘルプ

CoffeeScript

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

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

始める前に

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

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

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

CoffeeScriptをJavaScriptにコンパイルする

IntelliJ IDEA integrates with the coffee-script(英語) compiler that translates CoffeeScript code into JavaScript. The tool also creates source maps(英語) that set correspondence between lines in your CoffeeScript code and in the generated JavaScript code so that IntelliJ IDEA debugger recognizes breakpoints in your CoffeeScript code and processes them correctly. To compile your code automatically, you need to configure the compiler as a 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は、該当するファイル監視が現在のプロジェクトで使用可能かどうかを確認します。そのようなファイル監視が構成されているが無効になっている場合、IntelliJ IDEAは、構成されたファイル監視について通知し、有効にすることを提案するポップアップを表示します。

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

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

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

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

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

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で説明されているように、Node.jsページにローカルに coffee-script パッケージをインストールする必要があります。

  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月2日

関連ページ:

プラグインを管理する

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

プラグイン

WindowsとLinux用のmacOS用このページを使用してプラグインを管理します。プラグインリポジトリの閲覧、プラグインのインストール、削除、有効化、無効化、および更新を行います。主なコントロール:マーケットプレースこのタブを使用して、JetBrainsプラグインリポジトリからプラグインをブラウ...

ファイル監視

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

npmおよびYarn

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

外部ツール

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

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

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