ReSharper 2019.2 Help

Validating Code with Web Linters

ReSharper integrates with web code quality tools (also known as linters) — JSLint, ESLint, and TSLint — to detect and help fixing even more problems in your code.

Linters are designed as command-line tools, so normally each time you want to validate your code, you need to go to the console, run a command line, and then dig through its text output.
With ReSharper it is different. When a linter is installed and enabled in ReSharper settings, the linter code rules are used together with ReSharper's own code inspections, and all code issues detected by linters are highlighted right in the editor in design-time.

The table below shows in which contexts different linters are supported.

JavaScript

JS code in HTML

JS code in ASPX

TypeScript

JSON

JSLint

SupportedSupportedSupportedNot supportedSupported

ESLint

SupportedSupportedSupportedNot supportedNot supported

TSLint

SupportedSupportedSupportedSupportedNot supported

To enable web linter validation in the editor

  1. Install Node.js interpreter. The easiest way to do so is to install the Node.js Tools for Visual Studio.

  2. In most cases, ReSharper will find the Node.js interpreter automatically. If it is installed in an uncommon location, specify it on the Tools | Node.js page of ReSharper options (Alt+R,,O)

  3. Install the desired linter packages in your project.

  4. Open the desired linter options pages under Tools | Web Linters and enable the linter.

  5. If there is node_modules folder in your project, ReSharper will find linter packages automatically. But you can also specify a custom linter folder.

  6. If you use ESLint or TSLint, ReSharper will take all rules and settings from linter configuration files. By default, these files are found automatically but you can also specify a custom configuration file.

    If the automatic search is enabled and the linter does not work, make sure that the configuration files are in the current directory and/or its parent directories, or in the user home directory:

    • For ESLint: .eslintrc.* file or an eslintConfig field in a package.json.

    • For TSLint: tslint.json, tslint.yaml, or tslint.yml.

  7. You can also pass any additional command-line options separated with spaces (see command line options reference for JSLint, ESLint, and TSLint)
    Note that some options, which affect how the linter is executed cannot be applied. For example, --fix will be ignored because ReSharper provides its own way to apply the linter fixes.

  8. If you use TSLint, ReSharper will enable the linter in TypeScript and JavaScript code by default. To use it in TypeScript code only, clear the corresponding checkbox.

When linter support is set up, you will see code issues detected by the linter highlighted in the editor according the severity level (error level) of the corresponding rule:

ReSharper: highlighting a code issue detected by ESLint

If the linter provides a fix for a rule, you will be able to apply it right from the Alt+Enter menu:

ReSharper: fixing a code issue detected by ESLint

You can also choose Inspection: [name] | Configure inspection severity | [Severity level] from the Alt+Enter menu — this will write the new severity level (error level) for the corresponding rule right in the linter configuration file.

This feature is supported in the following languages and technologies:

Language: C# Language: VB.NET Language: C++ Language: HTML Language: ASP.NET Language: Razor Language: JavaScript Language: TypeScript Language: CSS Language: XML Language: XAML Language: Resx Language: Build Scripts Language: Protobuf Language: JSON
Feature is not available Feature is not available Feature is not available Feature is available Feature is available Feature is not available Feature is available Feature is available Feature is not available Feature is not available Feature is not available Feature is not available Feature is not available Feature is not available Feature is available
Last modified: 18 November 2019