IntelliJ IDEA 2020.3 ヘルプ

チュートリアル: IntelliJ IDEA のファイルウォッチャー

このチュートリアルの内容

このチュートリアルは、IntelliJ IDEA でファイル監視を使用する方法を段階的に説明することを目的としています。

ファイル監視の基本、特に LESS と CoffeeScript の使用は、このチュートリアルの範囲外です。

前提条件

以下を確認してください:

  • IntelliJ IDEA を使用しています。

  • Node.js(英語) がダウンロードされ、インストールされます。特定のオペレーティングシステムに応じて、実行可能ファイル Node.js へのパスを Path 環境変数に追加することをお勧めします。

  • ファイル監視を使用する前に、 プラグインが有効になっていることを確認してください。このプラグインは IntelliJ IDEA にバンドルされており、デフォルトでアクティブになっています。プラグインがアクティブ化されていない場合は、プラグインを管理するに従って、設定 / 環境設定ダイアログ Ctrl+Alt+Sプラグインページでプラグインを有効にします。

  • 事前に問題に慣れておくことをお勧めします。セクションファイル監視を参照してください。

  • このチュートリアルでは、Less(英語)CoffeeScript(英語) ファイルを扱います。トレーニングを始める前にいくつかの準備手順を実行してください。

Node.js プラグインのインストール

まず、Node.js プラグインをダウンロードしてインストールします。同梱されていません。プラグインページを開き(メインツールバーの Icons general settings をクリックして、覚えていますか? )、このプラグインを Jetbrains リポジトリで探します:

Py nodejs plugin

変更を有効にするには、IntelliJ IDEA を再起動します。再起動後、設定 / 環境設定ダイアログ Ctrl+Alt+S-Node.js および NPM言語およびフレームワークノードに新しいページが表示されます。

LESS および CoffeeScript コンパイラーのインストール

設定 / 環境設定 Icons general settings を開き、Node.js および NPM ページを開きます。このページで、ノードインタープリターを指定し(バージョンは自動的に決定されます)、Icons general add をクリックします。1 回はインストール数を減らし、もう 1 回は coffeescript をインストールします。

すでに気づいているように、LESS と CoffeeScript はローカルにインストールされているため、対応するコンパイラーファイルはプロジェクトルートに書き込まれます。

Py nodejs project view

これらのファイルは少し後で必要になります。さあ、始めましょう !

ファイル監視の構成

IntelliJ IDEA は、ファイルを操作していることを検出すると、「監視」できます。ファイル監視を設定するように求められます。

LESS ファイル用のファイル監視の構成

例: LESS ファイルを編集するために開くと、IntelliJ IDEA は通知バナーを表示します:

Py nodejs less watcher

リンクウォッチャーの追加をクリックします。IntelliJ IDEA は次のダイアログボックスを表示します。ここでは、ファイル監視タイプ(ここでは Less)、実行可能ファイル(ここでは lessc.cmd)を指定し、stdout から出力を生成するオプションを選択する必要があります。

Py nodejs less watcher new

この構成を見ると、ファイル監視が実際に何をしているかが簡単にわかります。

  • プロジェクト内のすべての Less ファイルの変更を監視します。

  • フィールドプログラムで指定されたコンパイラー lessc.cmd を使用して、拡張子 .less のファイルを拡張子 css のファイルにコンパイルします。

CoffeeScript のファイル監視の構成

次に、CoffeeScript ファイルを編集するために開きます。IntelliJ IDEA はすぐにファイル監視を構成するように要求します。

Py nodejs coffeescript watcher

再度、ウォッチャーの追加をクリックし、ファイル監視設定、特に CoffeeScript 実行可能ファイルを指定します。

Py nodejs coffeescript watcher new

このファイル監視は何をしますか?

  • また、プロジェクト内のすべての CoffeeScript ファイルの変更を追跡します。

  • 拡張子 .coffee のファイルを拡張子 .js のファイルにコンパイルする場合は、コンパイラー coffee.cmd を使用し、フィールドプログラムで指定します。

  • 拡張子 .coffee を持つファイルを、フィールドプログラムで指定されたコンパイラー coffee.cmd を使用して、拡張子 .map を持つファイルにコンパイルします。

ファイル監視の編集

はい、こちらです。ファイル my.less を開いて編集し、何かを変更します。たとえば、変数 @myColor の名前を @Color に変更し、その値を変更します。ファイル監視は変更されたソースファイルをすぐに処理し、拡張子 css の出力ファイルを生成します。

Py nodejs less watcher edit

次に、CoffeeScript ファイルを編集するために開き、そこで何かを変更します。構成されたファイル監視は、JavaScript ファイルとソースマッピングファイルを生成します。

Py nodejs coffeescript watcher edit

どちらの場合も、IntelliJ IDEA はソースファイルにプロジェクトツールウィンドウで生成されたファイルを表示します。

トラブルシューティング、またはエラーが発生した場合

ファイル監視によって実行されたコマンドラインツールが失敗した場合、IntelliJ IDEA はその出力を実行ツールウィンドウに表示します。

Py nodejs error

トラブルシューティングに役立つ、そうではありませんか?

関連ページ:

プラグインを管理する

このサイトのメニューやアクション名表記は日本語です。IntelliJ IDEA を日本語化するには、日本語言語パックのインストールを参照してください。プラグインは以下に示すように IntelliJ IDEA のコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を向上、コーディング演習と検証で新しい...

プラグイン

このページを使用してプラグインを管理します。プラグインリポジトリを参照し、プラグインのインストール、削除、有効化、無効化、更新を行います。主なコントロール:マーケットプレースこのタブを使用して、JetBrains プラグインリポジトリからプラグインをブラウズしてインストールします。カスタムプラグインリポジトリを参照する場合は、に続けてリポジトリの URL を入力します。例:repository:"http://plugins.example.com:8080/" myPlu...

ファイル監視

ファイル監視は IntelliJ IDEA ツールであり、IDE でファイルを変更または保存するときに、コンパイラー、フォーマッタ、リンターなどのコマンドラインツールを自動的に実行できます。ファイルウォッチャーには、2 つの専用コードインスペクションがあります。ファイル監視使用可能インスペクションは、あらかじめ定義されたファイル監視が適用されるすべてのファイルで実行されます。プロジェクトに関連するファイル監視が設定されていない場合、IntelliJ IDEA はファイルウォッチャーを追加すること...

プロジェクトツールウィンドウ

プロジェクトツールウィンドウでは、様々な視点からプロジェクトを見て、新しいアイテム(ディレクトリ、ファイル、クラスなど)の作成、エディターでのファイルのオープン、必要なコードフラグメントへのナビゲートなど、様々なタスクを実行することができます。ビュー:ツールウィンドウにはいくつかのビューがあります。プロジェクトビュー。このビューには、すべてのプロジェクトアイテムとその依存関係(SDK およびライブラリ)が表示されます。パッケージも示されていますが、ディレクトリ構造に重点が置かれています。パッケ...

外部ツール

サードパーティのアプリケーションを外部ツールとして定義し、IntelliJ IDEA から実行できます。IntelliJ IDEA を使用すると、プロジェクトから外部ツールにコンテキスト情報をコマンドライン引数(現在選択されているファイルやプロジェクトのソースパスなど)として渡し、ツールによって生成された出力を表示し、実行前にツールを起動するように構成できます。/ debug 構成など。IntelliJ IDEA に追加できる外部ツールにはいくつかの種類があります。ローカルツールは、コンピューター...