ReSharper 2020.1 Help

Web Linterでコードの検証

ReSharperは、Webコード品質ツール(linterとも呼ばれます) - JSLint、ESLint、およびTSLintと統合して、コード内のさらに多くの問題を検出して修正できます。

リンターはコマンドラインツールとして設計されているため、通常はコードを検証するたびに、コンソールに移動してコマンドラインを実行し、テキスト出力を調べる必要があります。
ReSharperとは異なります。linterがインストールされ、ReSharper設定で有効にされると、linterコードルールがReSharperの独自のコード・インスペクションとともに使用され、linterによって検出されたすべてのコードの課題がエディターデザインタイムで強調表示されます。

下の表は、異なるリンターがサポートされているコンテキストを示しています。

JavaScriptHTMLのJSコードASPXのJSコードTypeScriptJSON
JSLintSupportedSupportedSupportedNot supportedSupported
ESLintSupportedSupportedSupportedNot supportedNot supported
TSLintSupportedSupportedSupportedSupportedNot supported

エディターでWeb linter検証を有効にする

  1. Node.js(英語)インタープリターをインストールします。これを行う最も簡単な方法は、Visual Studio用のNode.jsツール(英語)をインストールすることです。

  2. ほとんどの場合、ReSharperはNode.jsインタープリターを自動的に検出します。一般的でない場所にインストールされている場合は、ReSharperオプションのツール| Node.jsページで指定する ( Alt+R O )

  3. プロジェクトに目的のlinterパッケージをインストールしてください。

  4. ツール | Web Linterの目的のlinterオプションページを開き、linterを有効にします。

  5. プロジェクトにnode_modulesフォルダーがある場合、ReSharperはlinterパッケージを自動的に検索します。ただし、カスタムlinterフォルダーを指定することもできます。

  6. ESLintまたはTSLintを使用する場合、ReSharperはlinter構成ファイルからすべてのルールと設定を取得します。デフォルトでは、これらのファイルは自動的に検出されますが、カスタム構成ファイルを指定することもできます。

    自動検索が有効になっていて、linterが機能しない場合は、構成ファイルが現在のディレクトリやその親ディレクトリ、あるいはユーザーのホームディレクトリにあることを確認してください。

    • ESLintの場合:.eslintrc.*ファイルまたはpackage.jsoneslintConfig フィールド。

    • TSLintの場合:tslint.jsontslint.yaml、またはtslint.yml

  7. スペースで区切られた追加のコマンドラインオプションを渡すこともできます(JSLint(英語)ESLint(英語)、およびTSLint(英語)のコマンドラインオプションリファレンスを参照してください)。
    linterの実行方法に影響する一部のオプションは適用できないことに注意してください。例:ReSharperはlinter修正を適用する独自の方法を提供するため、--fix は無視されます。

  8. TSLintを使用する場合、ReSharperは、デフォルトでTypeScriptおよびJavaScriptコードでlinterを有効にします。TypeScriptコードでのみ使用するには、対応するチェックボックスをオフにします。

linterサポートを設定すると、linterによって検出されたコードの課題が、対応するルールの重大度レベル(エラーレベル)に従ってエディター内で強調表示されます。

ReSharper: highlighting a code issue detected by ESLint

リンターがルールの修正を提供する場合は、Alt+Enter メニューから直接適用することができます:

ReSharper: fixing a code issue detected by ESLint

Alt+Enter メニューからインスペクション: [名] | インスペクションの重大度を設定する | [重大度]を選択することもできます - これはlinter設定ファイルに対応するルールの新しい重大度レベル(エラーレベル)を書き込みます。

この機能は、次の言語とテクノロジーでサポートされています。

Language: C#Language: VB.NETLanguage: C++Language: HTMLLanguage: ASP.NETLanguage: RazorLanguage: JavaScriptLanguage: TypeScriptLanguage: CSSLanguage: XMLLanguage: XAMLLanguage: ResxLanguage: Build ScriptsLanguage: ProtobufLanguage: JSON
Feature is not availableFeature is not availableFeature is not availableFeature is availableFeature is availableFeature is not availableFeature is availableFeature is availableFeature is not availableFeature is not availableFeature is not availableFeature is not availableFeature is not availableFeature is not availableFeature is available
最終更新日: 2020年5月26日

関連ページ:

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

ReSharper provides over 2500 code inspections in all supported languages. These inspections are used to detect andhighlight code issues in design time...

設計時にコードの課題を検出する

ReSharper starts analyzing a code file as soon as you open it in the editor, all the way you edit it, until it is closed. All detected code issues are...

特定の範囲でコードの課題を見つける

設計時コードインスペクションは、エディターでコーディングしたり、特定のファイルを見直したりするときに役立ちます。ただし、ReSharperを使用すると、ソリューション全体または狭い範囲でスタティックコード分析を実行し、結果をフレンドリーな視点で調べることもできます。必要に応じてインスペクション結果を...

InspectCodeコマンドラインツール

One of ReSharper’s most notable features,code inspection, is available even without opening the IDE. InspectCode, a無料のクロスプラットフォームcommand line to...

ソリューション全体の分析

ソリューション全体の分析では、プロジェクトのコンパイルを妨げないものを含め、サポートされているすべての言語でエラーが検出されます。プロジェクトにこのようなファイル(JavaScript、CSS、HTMLなど)が含まれている場合、ソリューション全体の分析は、それ以外の場合は実行時にのみ検出される可能性...

異なる言語でのReSharperの機能

以下の表は、各ReSharper機能がサポートされている言語/技術を説明しています。言語固有の機能のみを一覧表示し、プロジェクト依存関係図、名前空間の調整リファクタリング、スタックトレースエクスプローラー、最近のファイルを見るなどのプロジェクト/ソリューションのスコープには多くの機能は含まれていませ...