WebStorm 2020.2ヘルプ

ESLint

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

問題の説明を表示するには、強調表示されたコードにカーソルを合わせます。

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

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

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

始める前に

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

ESLintのインストール

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

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

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

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

WebStormでのESLintのアクティブ化と構成

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

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

この動作は、すべての新しいWebStormプロジェクトでデフォルトです。以前に作成したプロジェクトで有効にするには、設定/環境設定ダイアログ Ctrl+Alt+S言語およびフレームワーク | JavaScript | コード品質ツール | ESLintに移動し、自動 ESLint 構成オプションを選択します。

カスタムESLintパッケージと構成を使用するようにESLintを手動で構成することもできます。

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

  2. カスタムESLintパッケージと構成を使用するには、手動構成オプションを選択してください。

  3. Node インタープリターフィールドに、Node.jsへのパスを指定します。標準インストール手順に従った場合、WebStormはパスを検出し、フィールド自体に入力します。

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

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

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

      WebStormは、.eslintrc.*ファイルまたはpackage.jsoneslintConfig プロパティを検索します。WebStormは、チェック対象のファイルが格納されているフォルダーから検索を開始し、プロジェクトのルートに到達するまで、その親フォルダーを検索します。

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

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

  6. プロジェクトファイルの保存時にすべての検出された問題を自動的に修正するには、保存時にeslint --fixを実行するチェックボックスを選択します。

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

  7. オプション:

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

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

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

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

ESLintの強調表示の構成

デフォルトでは、WebStormはESLint設定の重大度に基づいて、検出されたエラーと警告をマークします。例:エラーは赤い波線で強調表示され、警告は黄色の背景でマークされます。詳細はコード・インスペクションインスペクションの重大度の構成を参照してください。

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

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

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

ESLint設定から重大度を無効にして、WebStormが無視し、linterによって報告されたすべてをエラー、警告、またはカスタムカラーで表示することができます。

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

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

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

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

    Specifying a custom severity level for ESLint

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

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

WebStormは、すべての公式形式のESLint構成を理解します。.eslintrcJSONファイル、eslintConfig フィールドを含むpackage.jsonファイル、JavaScriptおよびYAML構成ファイル。

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

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

    Importing ESLint code style rules from JavaScript or YAML configuration files

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

    WebStorm suggests importing the code style from ESLint

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

    Event log tool window shows the list of applied ESLint rules

JavaScript標準スタイルの使用

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

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

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

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

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

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

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

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

  2. 表示されるコード・スタイル: JavaScriptページで、次からセットをクリックしてからJavaScript標準スタイルを選択します。スタイルは現在のスキームを置き換えます。

Lint TypeScriptコードとESLint

WebStormは、@typescript-eslint/parser がプロジェクトのESLint構成でパーサーとして設定されている場合、.tsおよび.tsxファイルのESLintによって報告されたエラーを強調表示します。typescript-eslintリポジトリのreadmeファイル(英語)の詳細を参照してください。

新しいプロジェクトで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-eslint , typescript-eslint-parserまたは eslint-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" ] }
最終更新日: 2020年7月22日

関連ページ:

JavaScript linter

WebStormは、ESLintおよび他の最も人気のあるJavaScriptコードlinterと統合され、コードを実行せずにコードの問題を検出します。linterをインストールして有効にすると、JavaScriptファイルを開くたびに自動的にアクティブになり、検出されたエラーと警告を報告し、可能な場...

ソースコードを書いて編集する

コードを使用する場合、WebStormは作業にストレスがないことを保証します。追加、選択、コピー、移動、編集、折りたたみ、出現箇所の検索、コードの保存に役立つさまざまなショートカットと機能を提供します。エディター内のナビゲーションについては、エディターの基本を参照してください。アクションの検索使用し...

コード・インスペクション

WebStormには、プロジェクト内の異常コードを検出して修正する一連のコードインスペクションがあります。IDEはさまざまな問題を見つけて強調表示し、デッドコードを見つけ、可能性のあるバグを見つけ、スペルの問題、コード構造全体を改善することができます。インスペクションは、すべてのプロジェクトファイル...

インスペクションの重大度の構成

インスペクションの重大度は、検出されたコードの問題がプロジェクトにどれほど深刻な影響を及ぼすかを示します。すべての重要度レベルには、独自の強調表示スタイルがあります。WebStormには、事前定義された重大度レベルのセットがあります。エラー:構文エラーをマークします。警告:バグを生成したり、機能拡張...

インスペクション

macOSのWebStorm | 環境設定 | エディター | インスペクションこのページを使用して、インスペクションプロファイルのカスタマイズ、インスペクション重大度レベルの構成、インスペクションの無効化と有効化、および異なるスコープのインスペクションの構成を行います。このトピックでは、コントロー...

コード・スタイル: JavaScript

macOSのWebStorm | 環境設定 | エディター | コード・スタイル | JavaScriptこのページを使用して、JavaScriptファイルのフォーマットオプションを設定します。これらの設定を変更すると、プレビューペインに、コードへの影響が表示されます。タブとインデント:タブ文字を使...