Intellij plugin: AirBnB ESLint w/ React
JetBrains (Idea, Webstorm) settings
File > Settings > Plugins > Browse repositories... > Search: eslint > Install > Restart WebStorm
File > Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint
After that it should work like this:
ESLint config
ESLint doesn't come with a config. You have to create your own or use a preset:
npm install --save-dev eslint-config-airbnb eslint
Then in your .eslintrc
{ "extends": "airbnb"}
You can also selectively disable/modify some rules from preset (0 - disable rule, 1 - warning, 2 - error):
{ 'extends': 'airbnb', 'rules': { 'indent': [2, 'tab', { 'SwitchCase': 1, 'VariableDeclarator': 1 }], 'react/prop-types': 0, 'react/jsx-indent-props': [2, 'tab'], }}
Read: Turning off eslint rule for a specific line.
If you don't want to use airbnb config (most popular javascript style guide) you can create your own. Here is the instruction for react: How to config ESLint for React on Atom Editor.
To create your own preset you have to create npm package named eslint-config-myname and then use 'extends': 'myname',
http://eslint.org/docs/developer-guide/shareable-configs
You can use command line to check if eslint works:
./node_modules/.bin/eslint .
You may though exclude some files from eslinting (node_modules are excluded by default) in .eslintignore:
bundle.js
There is also a --fix
switch for eslint.
.editorconfig
Good companion for ESLint is editorconfig. Here is an example which works in JetBrains products:
root = true# Unix-style newlines with a newline ending every file[*]end_of_line = lfinsert_final_newline = true# Matches multiple files with brace expansion notation# Set default charset[*.{js,jsx,html,sass}]charset = utf-8indent_style = tabindent_size = 4trim_trailing_whitespace = true# don't use {} for single extension. This won't work: [*.{css}][*.css]indent_style = spaceindent_size = 2
I also have a github repository which already has these files set https://github.com/rofrol/react-starter-kit/
Based on this https://www.themarketingtechnologist.co/how-to-get-airbnbs-javascript-code-style-working-in-webstorm/
More here https://www.jetbrains.com/webstorm/help/using-javascript-code-quality-tools.html