RubyMine 2020.2 ヘルプ

CoffeeScript

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

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

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

始める前に

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

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

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

CoffeeScript を JavaScript にコンパイルする

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

RubyMine を使用すると、コマンドラインモードで作業しているかのように、引数をコンパイラーに渡してコンパイラーを調整できます。以下は、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

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

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

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

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

CoffeeScript の実行

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

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

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

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、pnpm、および 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 のデバッグ

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

CoffeeScript のデバッグは、ローカルモードでのみサポートされています。つまり、RubyMine は実行構成に従って 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 年 8 月 19 日

関連ページ:

プラグインを管理する

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

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

Windows および Linux 用のファイル | 設定 | ツール | ファイル監視 - 新規ウォッチャーmacOSのRubyMine | 環境設定 | ツール | ファイル監視 - 新規ウォッチャーファイルウォッチャーページの追加、または編集、ボタンをクリックする...

ファイル監視

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

npm、pnpm、および Yarn

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

外部ツール

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

Node.js の実行とデバッグ

RubyMine は、Node.js アプリケーションの実行とデバッグを支援します。RubyMine から起動し、既に実行中のアプリケーションにアタッチするアプリケーションをデバッグできます。始める前に :JetBrains リポジトリからプラグインをインストールする説明に従って、設定 / 環境設定...