Use ESLint with Airbnb style and tab (React.js)

Question

I'm working on a React.js application and I'm trying to lint my code. I use ESLint with the Airbnb style, but I have these errors:

../src/Test.jsx
  4:2   error  Unexpected tab character                                no-tabs
  5:2   error  Unexpected tab character                                no-tabs
  5:3   error  Expected indentation of 2 space characters but found 0  react/jsx-indent
  6:2   error  Unexpected tab character                                no-tabs

Here my code:

Test.jsx:

import React from 'react';

function Test() {
    return (
        <h1>Test</h1>
    );
}

export default Test;

.eslintrc:

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": "airbnb",
  "parser": "babel-eslint",
  "rules": {
    "indent": [2, "tab", { "SwitchCase": 1, "VariableDeclarator": 1 }],
    "react/prop-types": 0,
    "react/jsx-indent-props": [2, "tab"],
  }
}

As you can see above, I would like to indent with tab.

webpack.config.js:

loaders: [{
  test: /\.jsx$|\.js$/,
  loaders: ["babel-loader", "eslint-loader"],
  exclude: /node_modules/
},
...
]

I also tried to indent why 2 spaces, without success. I really don't understand why I have theses errors. Do you have an idea?

Thanks!

Answer 1

As @mark-willian told me, I added some lines in my .eslintrc and it works:

{
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": "airbnb",
    "parser": "babel-eslint",
    "rules": {
        "indent": [2, "tab", { "SwitchCase": 1, "VariableDeclarator": 1 }],
        "no-tabs": 0,
        "react/prop-types": 0,
        "react/jsx-indent": [2, "tab"],
        "react/jsx-indent-props": [2, "tab"],
    }
}

Thank you for all of your answers.

Answer 2

The airbnb rules want you to use spaces instead of tabs for formatting your code. Good editors (sublime is one!) will let you use tabs but translate them to spaces when saving your code.

You need to change the config of your sublime; go to Preferences - Settings and customize the following settings:

"tab_size": 2,
"translate_tabs_to_spaces": true

Sublime will convert your existing code - click on the text in the status bar at the bottom right that says tabs or spaces.

You can selectively turn off eslint rules if (for example) one of airbnb's rules doesn't match your coding style guide.

Answer 3

Try replace every tab to spaces .

It is also a good idea to enable the ESLint autofix feature with this eslint-loader option in your webpack configuration.

Answer 4

You can add this comment on page which you get no-tabs error.

 /* eslint-disable */