GoLand 2024.1 ヘルプ

ESLint

GoLand は、プラグインで拡張できる幅広い lint ルールをもたらす ESLint(英語) と統合します。GoLand は、入力時に ESLint によって報告された警告とエラーをエディターに表示します。ESLint を使用すると、JavaScript 標準スタイル(英語)を使用したり、TypeScript コードをリントしたりすることもできます。

JavaScript と TypeScript に加えて、ESLint はプロジェクト全体またはその特定の部分の他のタイプのファイルに適用できます。lint スコープを構成するを参照してください。

始める前に

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

  2. ローカル Node.js インタープリターの構成、または Windows Subsystem for Linux で Node.js を使用する、またはリモート Node.js インタープリターの構成に従って、プロジェクトで Node.js インタープリターを構成します。

ESLint をインストールする

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

    • グローバルインストール用の npm install --g eslint

    • 開発依存関係として ESLint をインストールするための npm install --save-dev eslint

  2. 必要に応じて、追加のプラグイン（たとえば、eslint-plugin-react(英語) を lint React アプリケーションにインストール）をインストールします。

GoLand で ESLint をアクティブ化して構成する

デフォルトでは、ESLint は無効になっています。自動的に構成するか、すべての構成設定を手動で指定するかを選択できます。

ESLint を自動的に構成する

自動構成では、GoLand はプロジェクト node_modules フォルダーの ESLint パッケージと、現在のファイルが保存されているフォルダーの .eslintrc.* 構成ファイルを使用します。現在のファイルフォルダーに .eslintrc.* が見つからない場合、GoLand はプロジェクトルートまでの親フォルダーから検索します。

ESLint が依存関係としてリストされている複数の package.json ファイルがある場合、GoLand は package.json ごとに別々のプロセスを開始し、その下にあるすべてのものを処理します。これにより、モノレポまたは複数の ESLint 構成を持つプロジェクトの各パスに、特定の ESLint バージョンまたは特定のプラグインセットを適用できます。

  • 現在のプロジェクトで ESLint を自動的に構成するには、設定ダイアログ（Ctrl+Alt+S）を開き、言語 & フレームワーク | JavaScript | コード品質ツール | ESLint に移動して、自動 ESLint 構成オプションを選択します。

  • すべての新しいプロジェクトで ESLint を自動的に構成するには、新規プロジェクトの設定ダイアログ（ファイル | 新規プロジェクトのセットアップ | 新規プロジェクトの設定）を開き、言語 & フレームワーク | JavaScript | コード品質ツール | ESLint に移動して、自動 ESLint 構成オプションを選択します。

ESLint を手動で構成する

手動構成では、カスタム ESLint パッケージ、構成ファイル、作業ディレクトリを使用したり、さまざまな追加のルールやオプションを適用したりできます。

  1. 設定ダイアログ（Ctrl+Alt+S）で、言語 & フレームワーク | JavaScript | コード品質ツール | ESLint に移動し、手動 ESLint 構成を選択します。

  2. ESLint パッケージフィールドで、eslint または標準パッケージの場所を指定します。

  3. 作業ディレクトリフィールドで、ESLint プロセスの作業ディレクトリを指定します。

    デフォルトでは、フィールドは空であり、GoLand は作業ディレクトリを自動的に検出します。最初に、.eslintignore または .eslintrc.* ファイル、または eslintIgnore または eslintConfig プロパティのいずれかを持つ package.json ファイルを含む linted ファイルに最も近いディレクトリを探します。

    自動検出された作業ディレクトリがプロジェクト構成と一致しない場合は、作業ディレクトリ（ディレクトリ）を手動で指定する必要があります。区切り文字としてセミコロンを使用します。許容値は次のとおりです。

    • 絶対パス。

    • プロジェクトのベースディレクトリ (GoLand 固有のプロジェクトメタデータが格納されている .idea フォルダーの親フォルダー) からの相対パス。例:

      1. ./ : プロジェクトのベースディレクトリを ESLint プロセスの作業ディレクトリとして使用します。

      2. client;server : <project_base_dir>/client および <project_base_dir>/server を作業ディレクトリとして使用します。server フォルダーでもなく client でもないファイルの場合、作業ディレクトリは上記のように自動検出になります。

      3. packages/* : <project_base_dir>/packages ディレクトリの各サブフォルダーは、対応する lint ファイルの作業ディレクトリとして使用されます。

    • 一部の lint ファイルがフォルダー階層のプロジェクトベースディレクトリにない場合は、コンテンツルートからの相対パスを使用できます。

    • 作業ディレクトリへの相対パスを定義する Glob パターン(英語)。例: **/foo -* を使用すると、名前が foo- で始まる各ディレクトリが、対応する lint ファイルの作業ディレクトリとして使用されます。

  4. 使用する設定を選択します。

    • 自動検索 : ESLint ルールが package.json または .eslintrc.* ファイルで構成されている場合は、このオプションを選択します。これは、.eslintrc、.eslintrc.json、.eslintrc.yaml ファイル、または別のサポートされている形式のファイルです。詳細については、ESLint 公式 Web サイト(英語)を参照してください。

      GoLand は、.eslintrc.* ファイルまたは package.json 内の eslintConfig プロパティを検索します。GoLand は、チェックするファイルが保存されているフォルダーから検索を開始し、その親フォルダーを検索し、プロジェクトのルートに到達するまで続けます。

    • 構成ファイル - このオプションを選択してカスタムファイルを使用し、パスフィールドでファイルの場所を指定します。

    ESLint 公式 Web サイト(英語)から ESLint を設定する方法の詳細を参照してください。

  5. オプション:

    • 追加 eslint オプションフィールドで、ESLint を実行するための追加のコマンドラインオプションを指定し、区切り文字としてスペースを使用します。

      ESLint 公式 Web サイト(英語)の ESLint CLI オプションの詳細を参照してください。

    • 追加ルールディレクトリフィールドで、追加のコード検証ルールを使用してファイルの場所を指定します。これらのルールは、package.json、.eslintrc.*、カスタム構成ファイルのルールの後に適用されるため、オーバーライドします。

      ESLint 構成ファイル(英語)とルールの追加(英語)の詳細については、ESLint の公式 Web サイトを参照してください。

lint スコープを構成する

  1. 設定ダイアログ（Ctrl+Alt+S）を開き、言語 & フレームワーク | JavaScript | コード品質ツール | ESLint に移動して、自動 ESLint 構成または手動 ESLint 構成を選択します。

  2. ファイルに対して実行フィールドで、リントするファイルのセットを定義するパターンを指定します。デフォルトのパターンを受け入れるか、カスタムパターンを入力できます。

    デフォルトのパターンである **/*.{js,ts,jsx,tsx,html,vue} を使用すると、ESLint が起動し、更新された JavaScript、TypeScript、JSX、TSX、HTML、Vue ファイルを処理します。他のタイプのファイルまたは特定のフォルダーに保存されているファイルをリントするには、glob パターン(英語)を使用してデフォルトのパターンを更新します。

    • 例: CoffeeScript ファイルも自動的に再フォーマットするには、次のように coffee をデフォルトパターンに追加します。

      **/*.{js,ts,jsx,tsx,html,vue,coffee}

    • サブフォルダーを含む特定のフォルダーからファイルを lint する場合は、**/* を <path to the folder>/**/* に置き換えます。

      次のような構造のプロジェクトがあるとします。

      ESLint: custom patterns. Example project structure

      coffee フォルダー内のファイルのみをリントするには、次のようにパターンを更新します。

      coffee/*.{js,ts,jsx,tsx,html,vue,coffee}

      その結果、ファイル linting.coffee はリントされますが、no_linting .coffee はリントされません。

保存時に問題を自動的に修正

ESLint は、変更が Ctrl+S を使用して手動で保存されるたびに、または実行 / デバッグ構成を起動するとき、GoLand を閉じるとき、またはバージョン管理アクションを実行するときに自動的に保存されるたびに、検出された問題を修正できます。詳細については、自動保存を参照してください。

  • 設定ダイアログ（Ctrl+Alt+S）を開き、言語 & フレームワーク | JavaScript | コード品質ツール | ESLint に移動して、保存時に eslint --fix を実行チェックボックスを選択します。

コードの Lint

インストールして有効にすると、JavaScript ファイルを開くたびに ESLint が自動的にアクティブになります。

デフォルトでは、GoLand は、ESLint 構成の重大度に基づいて検出された問題をマークします。これらの設定を無効にする方法については、ESLint ハイライトの設定を参照してください。

現在のファイルで検出されたエラーの説明とそれらのクイックフィックスは、エディターおよび問題ツールウィンドウのファイルタブから入手できます。

以前に開いたすべてのファイルのエラーとそれらのクイックフィックスは、問題ツールウィンドウのプロジェクトエラータブに表示されます。ツールウィンドウを開くには、エディターの右上隅にあるインスペクションウィジェットをクリックします。

Inspection widget

詳細については、エディターで問題を表示してクイックフィックスを適用するおよび問題ツールウィンドウを参照してください。

エディターで問題を表示してクイックフィックスを適用する

  • 問題の説明を表示するには、ハイライトされたコードにカーソルを合わせます。

    ESLint: errors and warnings are highlighted, the description of a problem is shown in a tooltip.

    検出された問題を解決するには、ESLint: 「<ルール名>」を修正をクリックするか、Alt+Shift+Enter を押します。

    現在のファイルで検出されたすべての問題を解決するには、その他のアクション（Alt+Enter）をクリックして、リストから ESLint: 現在のファイルを修正を選択します。

    ESLint: resolving problems

    詳細は、エディターで問題を表示してクイックフィックスを適用するを参照してください。

  • または、問題ツールウィンドウ Alt+6 のファイルタブを開きます。ここでは、問題の説明を表示したり、クイックフィックスを適用したり、エラーが発生したソースコードのフラグメントに移動したり、ツールウィンドウを移動せずにエディタープレビューペインで修正したりできます。問題ツールウィンドウから詳細を参照してください。

  • このファイルが保存されるときにファイル内のすべての問題を修正するように ESLint を構成することもできます。このような動作を構成するには、GoLand での ESLint のアクティブ化と構成の説明に従って、設定ダイアログの ESLint ページで保存時に eslint --fix を実行チェックボックスを選択します。

問題ツールウィンドウでコードをリントする

問題ツールウィンドウを開くには、エディターの右上隅にあるインスペクションウィジェットをクリックします。

Inspection widget

または、メインメニューから表示 | ツールウィンドウ | 問題を選択するか、Alt+6 を押します。

プロジェクトエラータブには、現在のセッション中に開かれたすべてのファイルのエラーが、検出されたファイルごとにグループ化されたエラーメッセージとともに表示されます。

Problems tool window, ESLint. Project Errors tab shows syntax errors in previously opened files across the project

ここでは、問題の説明を表示したり、クイックフィックスを適用したり、エラーが発生したソースコードのフラグメントに移動したり、ツールウィンドウを移動せずにエディタープレビューペインでフラグメントを修正したりできます。問題ツールウィンドウから詳細を参照してください。

ESLint のハイライトを構成する

デフォルトでは、GoLand は ESLint 設定の重大度に基づいて検出されたエラーと警告をマークします。例: エラーは赤色の波線でハイライトされ、警告は黄色の背景でマークされます。

ESLint 構成のルールの重大度レベルを変更する

  • .eslintrc または package.json の eslintConfig で、編集するルールを見つけ、その ID を 1 warn または 2 error に設定します。

    ESLint 公式 Web サイト(英語)の詳細を参照してください。

ESLint 構成の重大度をオーバーライドして、GoLand が無視し、リンターによって報告されたすべてのものをエラー、警告、カスタムカラーで表示することができます。

構成から重大度レベルを無視する

  1. 設定ダイアログ（Ctrl+Alt+S）で、エディター | インスペクションを選択します。インスペクションページが開きます。

  2. 中央ペインで、JavaScript | コード品質ツール | ESLint に移動します。

  3. 右側のペインで、構成ファイルのルール重要度を使用するチェックボックスをオフにし、デフォルトのものの代わりに使用する重大度を選択します。

    Specifying a custom severity level for ESLint

ESLint からコードスタイルをインポートする

ESLint コードスタイルルール(英語)の一部を GoLand JavaScript コードスタイル設定にインポートすることができます。これにより、GoLand は、コードの自動補完、生成、またはリファクタリング、インポートステートメントの追加時に、プロジェクトでより正確なコードスタイルオプションを使用することができます。再フォーマットアクションを使用すると、GoLand は ESLint パースペクティブから適切にフォーマットされたコードを破棄しなくなります。

GoLand はあらゆる公式フォーマットの ESLint 設定を理解します: .eslintrc JSON ファイル、eslintConfig フィールドを持つ package.json ファイル、JavaScript と YAML 設定ファイル。

  • 最初にプロジェクトを開くと、GoLand はプロジェクトの ESLint 設定からコードスタイルを自動的にインポートします。

  • ESLint の設定が（手動またはバージョン管理から）更新されている場合は、それをエディターで開き、コンテキストメニューから ESLint コードスタイルルールを適用するを選択します。

    Importing ESLint code style rules from JavaScript or YAML configuration files

    または、ファイルの上部にある "ESLint からコードスタイルを適用しますか？ " の質問にはいと答えるだけです。

    GoLand suggests importing the code style from ESLint

    適用されたルールのリストは、イベントログツールウィンドウに表示されます。

    Event log tool window shows the list of applied ESLint rules

JavaScript 標準スタイルを使用する

JavaScript 標準スタイル(英語)をアプリケーションのデフォルトの JavaScript コードスタイルとして設定して、コードを入力または再フォーマットするときにそのメインルールが適用されるようにすることができます。Standard は ESLint に基づいているため、GoLand ESLint 統合を介して Standard を使用することもできます。

JavaScript 標準をインストールする

ESLint を介して標準で lint を有効にする

プロジェクトの package.json ファイルに standard が記載されているプロジェクトを開くと、GoLand は自動的に lint を Standard で有効にします。

  1. 設定ダイアログ（Ctrl+Alt+S）で、言語 & フレームワーク | JavaScript | コード品質ツール | ESLint に移動します。

  2. 表示された ESLint ページで、手動 ESLint 構成を選択し、ESLint パッケージフィールドに standard パッケージの場所を指定します。

JavaScript 標準スタイルをデフォルトとして設定する

  1. 設定ダイアログ（Ctrl+Alt+S）で、エディター | コードスタイル | JavaScript に移動します。

  2. JavaScript ページで選択して設定をクリックし、次に JavaScript 標準スタイルを選択します。スタイルは現在のスキームを置き換えます。

Docker を使用した ESLint

GoLand を使用すると、ローカルで実行するのと同じ方法で、Docker コンテナー内のコードに対して ESLint を実行できます。

  1. JetBrains マーケットプレイスからプラグインをインストールする説明に従って、Node.js および Node.js リモートインタープリタープラグインを設定 | プラグインページのマーケットプレースタブにインストールします。

  3. Docker トピックの説明に従って、Docker をダウンロード、インストール、構成します。

  4. package.json を開き、ESLint が devDependencies セクションにリストされていることを確認します。

    { "name": "node-express", "version": "0.0.0", "private": true, "dependencies": { "cookie-parser": "~1.4.4", "debug": "~2.6.9", "express": "~4.16.1", "http-errors": "~1.6.3", "morgan": "~1.9.1", "pug": "^3.0.2" }, "devDependencies": { "eslint": "^8.1.0" } }

  5. エディターの任意の場所を右クリックして、コンテキストメニューから実行 '<package manager> install' を選択します。

  6. その後、ESLint は、コードをローカルで操作する場合と同じように機能します。検出された不一致の説明をエディターまたは問題ツールウィンドウで表示し、提案されたクイックフィックスを適用します。

    ESLint in a Docker container
JavaScript リンター JSLint

関連ページ：

Node.js

Node.js は、サーバーやコマンドラインなど、ブラウザーの外部で JavaScript を実行するための軽量ランタイム環境です。GoLand は Node.js と統合されており、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、保守を支援します。Node.js がアプリケーションのローカルランタイムとして、または npm パッケージの管理、JavaScript リンターの実行、ツールのビルド、フレームワークのテストなどにのみ必要な場合は、Node.js をインストールする...

リモート Node.js インタープリターの構成

GoLand では、リモートホストまたは仮想環境にインストールされた Node.js でアプリケーションを開発、テスト、リント、実行、デバッグするときに、リモート Node.js インタープリターを構成する必要があります。リモート Node.js インタープリターは、Node.js リモートインタープリターの構成ダイアログで構成されます。このダイアログは、リモート環境でアプリケーションを実行またはデバッグするための Node.js 実行 / デバッグ構成を作成または編集するときに、設定ダイアログ...

変更の保存と復元

GoLand は、ファイルに加えた変更を自動的に保存します。保存は、コンパイル、実行、デバッグ、バージョン管理操作の実行、ファイルまたはプロジェクトのクローズ、IDE の終了などのさまざまなイベントによってトリガーされます。ファイルの保存は、サードパーティのプラグインによってトリガーすることもできます。自動保存をトリガーするイベントのほとんどは事前定義されており、構成することはできませんが、変更が失われることはなく、ローカルヒストリーですべてを見つけることができます。自動保存動作を設定する設定ダ...

JavaScript リンター

GoLand は、ESLint およびその他の最も一般的な JavaScript コードリンターと統合され、コードを実行せずにコードの問題を検出します。インストールして有効にすると、JavaScript ファイルを開くたびにリンターが自動的にアクティブになり、検出されたエラーと警告が報告され、可能な場合はクイックフィックスが提案されます。現在のファイルで検出されたエラーの説明とそれらのクイックフィックスは、エディターおよび問題ツールウィンドウのファイルタブから入手できます。以前に開いたすべてのファ...

問題ツールウィンドウ

問題ツールウィンドウには、GoLand がプロジェクト内で検出した問題がいくつかのタブを使用して表示されます。ウィンドウ内で問題を選択してを押すか、問題をダブルクリックしてエディター内の対応する行に移動します。ツールウィンドウのタブを切り替えるには、とを押します。設計時コードインスペクションが有効になっている場合、このタブには、現在のファイルで見つかったすべてのコードの問題が一覧表示されます。エディターでファイルを切り替えると、リストが更新されます。ツールバー：表示オプション重大度でコー

インスペクション

このページを使用して、インスペクションプロファイルのカスタマイズ、インスペクション重大度レベルの構成、インスペクションの無効化と有効化、さまざまなスコープのインスペクションの構成を行います。変更されたインスペクションは青でハイライトされます。プロファイルの管理：プロファイル設定したいプロファイルの名前を選択します。適用をクリックすると、選択したプロファイルがプロジェクトのハイライトに自動的に使用されます。IDE にコピー / プロジェクトにコピー: プロジェクトまたはグローバル（IDE）レベルで選...