Web Analyzer

A Visual Studio extension that runs ESLint and TSLint on JavaScript and TypeScript files

Download the extension at the VS Gallery or get the nightly build

See the changelog for changes and roadmap.

Features

• Lints JavaScript, JSX, TypeScript, CoffeeScript and CSS files using:
  • CssLint
  • ESLint (a better version of JSHint, JSLint and JSCS)
  • CoffeeLint
  • TSLint
• Error List integration
• Runs when a file is opened and when the file is saved
• Run on a single file, folder or the entire project
• Configuration files lets you select what rules to run
• Configuration can be specified on project or solution level
• Both errors and warnings are supported
• Option to turn off one or more linters
• Smart logic ignores certain files from linting
  • This can be further customized
• Support for Web Compiler and Bundler & Minifier

Error List

When an error is found it will show up in the Error List in Visual Studio as either an error or a warning.

The individual rules for each linter can be configured to be either an error or a warning.

Double-clicking an error will open the file and place the cursor at the location of the error.

Run the linters

The linters automatically run when you open a supported file. That makes it easy to see if there are any errors.

When saving the file the linter runs again.

You can manually run the linters on a single file, multiple files, folders or the entire project by right-clicking in Solution Explorer.

It's also from the same context menu you can clear all the errors generated by Web Linters.

Configuration

Each linter has their own configuration file. For instance, ESLint uses a JSON file with the name of .eslintrc to store the configuration in.

The configuration files are located in your user profile. Example: C:\Users\myname\.

It's easy to modify the configuration files by using the menu commands to open them:

If the configuration files have gotten messed up, you can reset them to their defaults by clicking the Reset Configuration Files command. It will prompt to ask if you are sure you want to proceed and, if you click yes, all the configuration files will be restored to their defaults.

Per project configuration

You can override the global per-user configuration of each linter on a folder, project or solution level. Simply copy in each config files (such as .eslintrc or tslint.json) from the user profile folder and into the root of the project or solution.

A simple command to do this will be added soon. Stay tuned...

Disable linters

You decide which linters to run by enabling or disabling them under Tools -> Options.

They are all enabled by default.

Reset settings

Resetting the settings will do 2 things:

1. Reset the global per-user linter config files
2. Set the settings under Tools -> Options -> Web -> Analyzer to their default values

You can reset the settings under Tools -> Web Analyzer.

If you haven't made any modifications to any settings or configuration files, then it can be a good idea to reset the settings after updating the extension. Typically newer versions of the Web Analyzer extension will have updated configuration files with better defaults.