Use Eslint With Airbnb Style And Tab (react.js)

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 cha

Solution 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.

Solution 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.

Solution 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.