editor-integrations.md

ESLint integrations with your IDE/editors

To make the whole developer experience more pleasant and convenient, it is important to configure your code editor of choice integrate with ESLint. The following can be achieved with most editors:

• Show errors/warnings inline with your code, as you type/on save
• Fix some issues immediately after saving the file so you do not have to do it manually

Letting your editor fix some issues will increase your productivity and code quality dramatically.

Atom

Install the following packages:

• linter
• linter-eslint

For the linter package, these settings are recommended:

• Lint as you type
• Do not lint files ignored by VCS

For the linter-eslint package, these settings are recommended:

• Disable when no eslintrc file in PATH
• Fix errors on save
• Ignore fixable rules while typing

Visual Studio Code

Install the following packages:

• eslint

Put the following configuration options into your settings.json file:

• "eslint.autoFixOnSave": true

Sublime Text

For best results, make sure you have Package Control installed in your Sublime Text. Issue reports and autofix on save are handled by two different packages, so you will need to configure both for best developer experience.

Install the following packages:

• SublimeLinter
• SublimeLinter-Contrib-ESLint
• ESLint-Formatter

Make sure ESLint does not lint files in node_modules folder: (Preferences -> Package Settings -> SublimeLinter -> Settings - User):

"linters": {
  "eslint": {
    "@disable": false,
    "exludes": [
      "node_modules"
    ]
  }
}

Enable autofix on save (Preferences -> Package Settings -> ESLint Formatter -> Settings - User):

{
  "format_on_save": true
}

WebStorm

WebStorm has built-in support for ESLint issue reporting. Auto fixing is only supported in versions 2016.3 and newer.

To enable ESLint reporter, follow the guide on WebStorm's support page. To use the new autofix feature, read their blog post on the topic.

To use autofix on save feature:

1. Go to Preferences -> Tools -> File watchers
2. Click the Add (+) button and choose custom template
3. Name it for example eslint
4. Set file type to javascript
5. Program will be your path to eslint binary for example /Users/[yourusername]/git/[yourproject]/node_modules/.bin/eslint
6. Arguments --fix $FilePath$
7. Working directory $ProjectFileDir$
8. Show console never (if you don't want to see the console when --fix command finds errors)
9. Check Trigger watcher regardless of syntax errors and uncheck Immediate file synchronization