PyCharm 2020.1ヘルプ

CoffeeScript

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

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

始める前に

  1. お使いのコンピューターにNode.js(英語)がインストールされていることを確認してください。

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

CoffeeScriptをJavaScriptにコンパイルする

PyCharmは、CoffeeScriptコードをJavaScriptに変換するcoffee-script(英語)コンパイラーと統合します。また、ツールは、PyCharmデバッガーがCoffeeScriptコードのブレークポイントを認識して正しく処理するように、CoffeeScriptコードと生成されたJavaScriptコードの行間の対応を設定するソースマップ(英語)を作成します。コードをオンザフライでコンパイルするには、コンパイラーをPyCharm ファイル監視として構成する必要があります。

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

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

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

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

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

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

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

コードのコンパイル

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

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

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

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

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

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

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

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

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

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

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

CoffeeScriptの実行

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

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

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

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のデバッグ

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

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

関連ページ:

プラグイン

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

プラグインを管理する

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

ファイル監視

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

npmおよびYarn

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

外部ツール

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

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

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