IntelliJ IDEA 2024.1 ヘルプ

Lint TypeScript

TypeScript コードに推奨されるリンターは ESLint(英語) で、プラグインで拡張できる幅広い lint ルールをもたらします。IntelliJ IDEA は、入力時に ESLint によって報告された警告とエラーをエディターに表示します。ESLint から詳細を参照してください。

@typescript-eslint/parser がプロジェクトの ESLint 設定でパーサーとして設定されている場合、IntelliJ IDEA は .ts および .tsx ファイルで ESLint によって報告されたエラーをハイライトします。typescript-eslint リポジトリの readme ファイル(英語)からさらに学びましょう。

ESLint をインストールして構成する

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

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

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

  2. デフォルトでは、ESLint は無効になっています。IntelliJ IDEA で ESLint をアクティブ化して構成するに従って、設定 | 言語およびフレームワーク | JavaScript | コード品質ツール | ESLint で有効にします。

新しいプロジェクトで TypeScript に ESLint を使用する

  1. 埋め込まれたターミナルAlt+F12)で、次のように入力します。

    npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

  2. .eslintrc 構成ファイルまたは package.jsoneslintConfig に、以下を追加します。

    { "parser": "@typescript-eslint/parser", "plugins": [ "@typescript-eslint" ], "extends": [ "plugin:@typescript-eslint/recommended" ] }

ESLint で lint TypeScript コードを抑制する

  • @typescript-eslint/parser をすでに使用しているが ESLint で TypeScript コードをチェックしたくない場合は、.eslintignore ファイルに .ts または .tsx を追加してください。

ESLint 4.0

以前のバージョンの ESLint を使用している場合、ESLint 4.0 以前はスコープ付きパッケージをサポートしていないため、babel-eslinttypescript-eslint-parsereslint-plugin-typescript をインストールする必要があります。

babel-eslint を使用する

  1. 埋め込まれたターミナルAlt+F12)で、次のように入力します。

    npm install eslint babel-eslint --save-dev

    babel-eslint(英語) の公式ドキュメントから、インストールとバージョンの互換性の詳細を参照してください。

  2. .eslintrc 構成ファイルまたは package.jsoneslintConfig に、以下を追加します。

    { "parser": "babel-eslint" }

typescript-eslint-parser を使用する

  1. 埋め込まれたターミナルAlt+F12)で、次のように入力します。

    npm install typescript-eslint-parser --save-dev

    typescript-eslint-parser(英語) の公式ドキュメントから詳細を学びましょう。

  2. .eslintrc 構成ファイルまたは package.jsoneslintConfig に、以下を追加します。

    { "parser": "typescript-eslint-parser" }

eslint-plugin-typescript を使用する

  1. 埋め込まれたターミナルAlt+F12)で、次のように入力します。

    npm install typescript-eslint-parser eslint-plugin-typescript --save-dev

  2. .eslintrc 構成ファイルまたは package.jsoneslintConfig に、以下を追加します。

    { "parser": "typescript-eslint-parser", "plugins": [ "eslint-plugin-typescript" ] }

TSLint

IntelliJ IDEA 内から TSLint(英語) コード検証ツールを使用して、アプリケーションを実行せずに TypeScript コードによくある間違いがないかチェックすることもできます。このツールがアクティブになると、開いているすべての TypeScript ファイルがリントされ、検出された問題がマークされます。

問題の説明を表示するには、ハイライトされたコードにカーソルを合わせます。デフォルトでは、IntelliJ IDEA は、TSLint 構成ファイルの重大度レベルに基づいて検出された問題をマークします。これらの設定を上書きする方法については、TSLint ハイライトの設定を参照してください。

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

始める前に

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

  2. プロジェクトでローカル Node.js インタープリターが構成されていることを確認します。設定ダイアログ(Ctrl+Alt+S)を開き、言語 & フレームワーク | Node.js に移動します。Node インタープリターフィールドには、デフォルトのプロジェクト Node.js インタープリターが表示されます。

    ローカル Node.js インタープリターの構成の詳細を参照してください。

  3. 設定 | プラグインページのインストール済みタブで、JavaScript と TypeScript および TSLint に必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。

TSLint のインストール

  • 埋め込まれたターミナルAlt+F12)で、次のように入力します。

    npm install tslint typescript --save-dev

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

IntelliJ IDEA での TSLint のアクティブ化と構成

デフォルトでは、IntelliJ IDEA はプロジェクトの node_modules フォルダーの TSLint パッケージと現在のファイルが格納されているフォルダーの tslint.json 設定ファイルを使用します。現在のファイルフォルダーに tslint.json が見つからない場合、IntelliJ IDEA はその親フォルダーからプロジェクトルートまで探します。

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

この動作はすべての新しい IntelliJ IDEA プロジェクトでデフォルトです。以前に作成したプロジェクトで有効にするには、設定ダイアログ(Ctrl+Alt+S)で言語 & フレームワーク | TypeScript | TSLint に移動し、自動 TSLint 構成オプションを選択します。

カスタム TSLint パッケージと tslint.json を使用して追加の規則を指定するように TSLint を手動で構成することもできます。

  1. 設定ダイアログ(Ctrl+Alt+S)で、言語 & フレームワーク | TypeScript | TSLint に移動します。

  2. 手動構成オプションを選択してください。

  3. TSLint パッケージへのパスを指定します。

  4. 構成ファイル領域で、使用する構成を指定します。

    デフォルトでは、IntelliJ IDEA は最初に tslint.jsontslint.yamltslint.yml 構成ファイルを検索します。IntelliJ IDEA は、チェックするファイルが保存されているフォルダーから検索を開始し、親フォルダーを検索し、プロジェクトルートに到達するまで続けます。tslint.jsontslint.yamltslint.yml 構成ファイルが見つからない場合、TSLint はデフォルトの組み込み構成ファイルを使用します。tslint.jsontslint.yaml、または tslint.yml 構成ファイル、カスタム構成ファイルのいずれかに適用する構成を定義するか、デフォルトの組み込み構成に依存する必要があります。

    • IntelliJ IDEA に tslint.jsontslint.yamltslint.yml ファイルを検索させるには、自動検索オプションを選択します。

    • カスタムファイルを使用するには、構成ファイルオプションを選択し、パスフィールドにファイルの場所を指定します。リストからパスを選択するか、手動で入力するか、the Browse button をクリックして表示されるダイアログから関連ファイルを選択します。

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

  5. 必要に応じて、追加ルールディレクトリフィールドで、追加のコード検証規則を使用してファイルの場所を指定します。これらの規則は、tslint.jsontslint.yamltslint.yml からの規則の後、または上記で指定したカスタム構成ファイルからの規則の後に適用されるため、上書きします。

TSLint のハイライトの構成

デフォルトでは、IntelliJ IDEA は、TSLint 構成ファイルの重大度レベルに基づいて、検出されたエラーと警告をマークします。例: エラーは赤い波線でハイライトされ、警告は黄色の背景でマークされます。詳細については、コードインスペクションおよびインスペクションの重大度を変更するを参照してください。

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

  • TSLint 構成ファイルで、編集するルールを見つけ、その ID を warning または error に設定します。TSLint 公式サイト(英語)の詳細を参照してください。

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

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

  1. 設定ダイアログ(Ctrl+Alt+S)で、エディター | インスペクションに移動します。インスペクションページが開きます。

  2. 中央ペインで、TypeScript | TSLint に移動します。

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

    Specifying a custom severity level for TSLint

TSLint 構成ファイルからコードスタイルをインポートする

IntelliJ IDEA は、tslint.jsontslint .yaml、または tslint.yml 構成ファイルに記述されているいくつかの TSLint 規則を理解し、プロジェクト内の TypeScript コードスタイルの設定に適用できるようにします。

  • プロジェクトを初めて開くと、IntelliJ IDEA はプロジェクト tslint.jsontslint.yamltslint.yml からコードスタイルを自動的にインポートします。

  • tslint.jsontslint.yamltslint.yml が(手動でまたはバージョン管理から)更新された場合は、エディターで開き、コンテキストメニューから TSLint コードスタイルルールを適用するを選択します。

    Import TSLint code style rules from the editor: context menu

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

    IntelliJ IDEA suggests importing the code style from tslint.json

TSLint のクイックフィックス

IntelliJ IDEA を使用すると、TSLint が報告する問題の一部を自動的に修正できます。

  • 特定のエラーを修正するには、ハイライトされたコードにキャレットを置き、Alt+Enter を押して、リストから TSLint: 現在のエラーを修正するを選択します。

  • ファイルで検出されたすべての問題を修正するには、TSLint: 現在のファイルを修正するを選択します。

    ws_tslint_quick_fixes.png

現在のファイルおよび現在の行の TSLint 規則を抑制することができます。IntelliJ IDEA は、/* tslint:disable:<rule name> または // tslint:disable-next-line:<rule name> の形式でコメントを無効にして、ファイルの上または現在の行の上にそれぞれ配置します。

その場で TSLint ルールを抑制する

  1. TSLint によって報告されたエラーまたは警告にキャレットを置き、Alt+Enter を押します。

  2. 無効にするルールのクイックフィックスを選択し、Right を押します。

  3. リストから、現在のファイルに対して <ルール名> を表示しないまたは現在の行に <ルール名> を表示しないを選択します。

    Disabling TSLint rules on the fly by adding disable comments

関連ページ:

ESLint

IntelliJ IDEA は、プラグインで拡張できる幅広い lint ルールをもたらす ESLint と統合します。IntelliJ IDEA は、入力時に ESLint によって報告された警告とエラーをエディターに表示します。ESLint を使用すると、JavaScript 標準スタイルを使用したり、TypeScript コードをリントしたりすることもできます。JavaScript と TypeScript に加えて、ESLint はプロジェクト全体またはその特定の部分の他のタイプのファイルに適...

Node.js

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

プラグインのインストール

プラグインは IntelliJ IDEA のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains...

コードインスペクション

IntelliJ IDEA には、プロジェクトをコンパイルする前に、プロジェクト内の異常なコードを検出して修正する一連のコードインスペクションがあります。IDE は、さまざまな問題を見つけてハイライトし、デッドコードを見つけ、考えられるバグやスペルの問題を見つけ、全体的なコード構造を改善することができます。インスペクションは、すべてのプロジェクトファイルまたは特定のスコープでのみ(たとえば、本番コードまたは変更されたファイルでのみ)コードをスキャンできます。すべてのインスペクションには、問題がコ...

インスペクションの重大度を変更する

インスペクション重大度レベルは、検出されたコードの問題がプロジェクトに与える影響の深刻度を示します。IntelliJ IDEA には、定義済みの一連の重大度レベルがあります。エラー構文エラー警告バグを引き起こす可能性がある、または拡張が必要なコードの断片弱い警告改善または最適化できるコードの断片 (冗長なコード、重複したコードフラグメントなど) サーバーの問題外部ビルドサーバー (TeamCity など) に起因する問題文法エラー文法の間違い。この重大度は、バンドルされている Grazie Lite...

インスペクション

変更されたインスペクションは青でハイライトされます。プロファイルの管理:プロファイル設定したいプロファイルの名前を選択します。IDE にコピー / プロジェクトにコピー: プロジェクトまたはグローバル(IDE)レベルで選択したプロファイルのコピーを作成します。複製: 現在のプロファイルのコピーを作成します。名前変更: プロファイルの名前を変更してください。削除: プロファイルを削除します。カスタムプロファイルのみ削除できます。説明の追加: 現在のプロファイルの説明を書いてください。テキストを入力し...