To install the eslint plugin simply execute in your terminal:

yarn add -DE @rainforestqa/eslint-config eslint @babel/core @babel/eslint-parser eslint-plugin-babel eslint-plugin-import eslint-plugin-jsx-a11y prettier

In your eslint configuration, add @rainforestqa/eslint-config to extends

Import the prettier config (prettier.config.js) as outlined in sharing configurations

optional:

If using react: yarn add -DE eslint-plugin-react

In your eslint configuration, add @rainforestqa/eslint-config/react to extends

If using flow: yarn add -DE eslint-plugin-flowtype

In your eslint configuration, add @rainforestqa/eslint-config/flow to extends

Install the eslint and prettier extensions add these to your settings file:

{
  "javascript.validate.enable": false, // turn off vscode's built in linter because it doesn't follow our eslint config
  "editor.codeActionsOnSave": {
    "source.fixAll": true // unless you want to manually fix the lint errors
  },
  "editor.tabSize": 2, // will conflict with prettier otherwise
  "editor.wordWrapColumn": 120,
  "css.validate": false, // not working for css modules currently
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Also in projects that use flow, it's useful to install flow for vscode

The setup should be picked up automatically from the repository's .eslint.rc.* and package.json. Here is where to look in case something doesn't work as expected: Eslint - Choose Webstorm / Preferences from the main menu and type eslint into the seach bar, this will show up all related config sections:

1. Languages & Frameworks / JavaScript / Code Quality Tools / ESLint is the main lint config section. Make sure the Enable checkbox on top is checked, the Node interpreter is set to the Project node version, and the ESLint package is from the local node_modules folder. The Automatic search option from the Configuration file section is working fine for most scenarios.
2. Keymap allows you to setup key shortcuts for fixing lint problems.

Prettier - An official Prettier plugin is available starting from version 2018.1. Again go to Preferences but write prettier this time. The configuration is under Languages & Frameworks / JavaScript / Prettier and the only thing you can do is to point the IDE to the related package folder.

• Patch release (x.y.z -> x.y.z+1): bugfixes and tooling updates mean that code that previously passed linting should continue to pass after the update.

• Minor release (x.y.z -> x.y+1.0): a change to an existing rule means that code that previously failed linting may now pass, or a new configuration means that code that previously passed linting should continue to pass.

• Major release (x.y.z -> x+1.0.0): a new rule, or a change to an existing rule, means that code that previously passed linting will not pass any more.