Eslint Visual Studio



  1. Visual Studio Code Tutorial
  2. Turn Off Eslint
  3. Eslint Visual Studio Code Typescript
  4. Eslint Visual Studio 2019
  5. Eslint Visual Studio Code Setup
  6. Eslint Visual Studio 2017
  7. Eslint Visual Studio Code React

If you used Web Essentials as your linter, you probably learned by now that it doesn’t provide that functionality anymore in VS 2015.
One way to fix it is to start using tools like gulp… or you could install a plugin – Web Analyzer

The tool seems to rely on node, so you need to install that as well. Also, it doesn’t look like it installs all of the necessary packages (at least it didn’t work for me, until I installed the packages). So, you may need to run npm install for these packages:
npm install -g eslint eslint-config-defaults
npm install -g babel-eslint

The global-in-visual-studio.eslintrc file is at your root user directory (Windows 10) along with other visual studio configs. You could still have eslint installed via npm install eslint -g on your machine. VS won't use it. It comes with the react plugin, but you can install other plugins and they'll will work. JavaScript tooling is amazing! In this video, learn how you can use ESLint and Visual Studio Code to format your code and provide suggestions on how to make.

To config it, go to Tools – Web Analyzer – Edit ESLint Settings. All of the configuration settings can be found at http://eslint.org/. For example, if you use Jasmine tests and jQuery, your “env” will look like this:
“env”: {
“browser”: true,
“node”: true,
“es6”: true,
“jasmine”: true,
“jquery”: true
}

In the “rules” block you can turn on/off individual rules and specify if they should show up as warnings (1) or errors (2).
“rules”: {
“eqeqeq”: 2,

This means that if ESLint sees “” instead of “” it will show up as an error in your Visual Studio Error List.

In order to enforce style concerns or help ensure correctness, you may want to use a linter. Here, we will discuss support in Visual Studio for linting JavaScript and TypeScript code.

Visual Studio Code Tutorial

ESLint

Turn Off Eslint

Eslint

Visual Studio natively supports ESLint for linting JavaScript files, JSX files, and JavaScript contained in script blocks in HTML files. By default, Visual Studio installs ESLint 4 and uses it to lint all open .js files, .jsx files, and files containing JavaScript code in script blocks. The set of rules that are used to lint your files is configured by default using the global ESLint configuration file (.eslintrc) in the User Home folder. Files are linted as you type, and results are shown in the error list and as squiggles in the editor. Information concerning ESLint rules and usage can be found in the ESLint documentation.

Configuration

Visual Studio offers several ways that you can configure its support for ESLint.

Configuring rules enforced by ESLint

As mentioned above, by default, ESLint will provide results based on the global ESLint configuration file, and you can configure your results by editing this file. However, if you would like to use a specific ESLint configuration for a particular directory, you can add a configuration file to that directory, and all files contained in that folder or any subdirectory will use that configuration file instead of the global one. More details can be found in the ESLint documentation.

Configuring the version of ESLint

Visual Studio will use its installation of ESLint 4 by default. However, if you would like to use a different version, Visual Studio will pick up a local installation of ESLint and use it instead. In particular, if any parent directory of the file you want to be linted contains a package.json that lists ESLint as a dependency, as well as a node_modules folder with an installation of ESLint, then it will use that copy of the linter. Visual Studio is designed to be backwards compatible to ESLint 2.

Warning

Before version 4, ESLint did not provide full location information for its results. Therefore, if you are using a version of ESLint earlier than 4, squiggles will appear under the first character of any error location, rather than underneath the whole error.

Eslint Visual Studio Code Typescript

Configuring files to be ignored

Since Visual Studio now lints all files in your project or solution, you may want to choose some files or directories for it to ignore. To do so, Visual Studio supports the .eslintignore file. When such a file is located in a project's root directory, ESLint will use it to exclude the requested files or directories from linting. More information on usage of the .eslintignore file can be found in the ESLint documentation.

Eslint Visual Studio 2019

Note

When using a jsconfig.json file or a tsconfig.json file, the location of that file is considered to be the project root. Otherwise, the location of the project file (e.g., a .csproj file) is considered to be the project root. In scenarios without such a file, such as when using Open Folder, an .eslintignore file in the User Home folder will be recognized.

Eslint Visual Studio Code Setup

Note

Since ASP.NET Core projects frequently include JavaScript libraries in the wwwrootlib directory, files in that directory will not be linted by default. If you do want these files to be linted, you can re-include that directory or any file or subdirectory it contains by using an .eslintignore file.

Eslint visual studio 2019

Eslint Visual Studio 2017

Settings

ESLint support can be enabled or disabled under Tools -> Options -> Text Editor -> JavaScript/TypeScript -> Linting. Here, you can also reset the global ESLint configuration file to the default recommended by Visual Studio.

Additionally, you can choose to lint your whole project or solution (as opposed to only open files) by selecting 'Lint all files included in project, even closed files' under Tools -> Options -> Text Editor -> JavaScript/TypeScript -> Linting.

TSLint

Eslint Visual Studio Code React

Currently, TSLint is not supported directly by Visual Studio. However, there are extensions available, or it can be used as a command-line tool.