ESLint configuration for JSX

Question

I want configure ESLint for check my JSX files but my configuration doesn't work. What is the correct way?

.eslintrc.js:

module.exports = {
  extends: 'airbnb',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    }
  },
  plugins: [
    'react',
  ],
  parser: 'babel-eslint'
};

What is the error or problem you are having? – Mike D May 20 '16 at 12:58 — Mike D, May 20 '16 at 12:58
Eslint don't scan jsx files. – SaroVin May 20 '16 at 13:20 — SaroVin, May 20 '16 at 13:20

score 34 · Accepted Answer · answered May 20 '16 at 22:32

34

In order to lint JSX files configuration alone is not enough. Your configuration looks fine (although you probably don't need babel-eslint, unless you are using features that are lower than stage 4 proposal). By default ESLint will only process .js files. You have to tell it that you want to process .jsx files as well by using --ext flag on command line: eslint --ext .jsx .

answered May 20 '16 at 22:32

Ilya Volodin

10,929
2
45
48

1

Now ESLint scan jsx but not js – SaroVin May 25 '16 at 09:20
17

`eslint --ext .jsx --ext .js .` will scan both. – Ilya Volodin May 25 '16 at 16:36
12

This keep it less verbose `eslint --ext .js,.jsx .` – iarroyo Jan 24 '18 at 13:17
13

Can drop the preceding extension dot like: `eslint --ext js,jsx .` – Kyle s Apr 05 '18 at 22:37

score 13 · Answer 2 · answered Oct 30 '20 at 15:02

13

I found an alternative to the original answer so that you don't have to specify the arguments when running eslint command.

Option 1

Use the command eslint . --ext .js --ext .jsx

Option 2

Specify overrides in your eslint config...

//.eslintrc
{
  ...
  "overrides": [
    {
      "files": ["*.jsx", "*.js"]
    }
  ],
  ...
}

answered Oct 30 '20 at 15:02

user2220967

133
1
3

3

Option 2 only works if all of the rules are placed within this override object, which is not useful if you're extending other configurations. – Chase Sandmann Mar 24 '21 at 00:11

fernandopasik · Answer 3 · 2018-07-19T13:13:57.417

5

I would recommend you to use also the plugin for eslint https://github.com/yannickcr/eslint-plugin-react

You could do this example config:

'use strict';

module.exports = {
  'extends': [ 'plugin:react/recommended' ],
  'parserOptions': {
    'ecmaFeatures': {
      'jsx': true
    }
  },
  'plugins': [ 'react' ],
  'rules': {

    // React
    'react/forbid-prop-types': 'error',
    'react/no-multi-comp': [ 'error', { 'ignoreStateless': true }],
    'react/no-set-state': 'error',
    'react/no-string-refs': 'error',
    'react/prefer-es6-class': 'error',
    'react/prefer-stateless-function': 'error',
    'react/require-extension': 'error',
    'react/require-render-return': 'error',
    'react/self-closing-comp': 'error',
    'react/sort-comp': 'error',
    'react/sort-prop-types': 'error',
    'react/wrap-multilines': 'error',

    // JSX
    'react/jsx-boolean-value': 'error',
    'react/jsx-closing-bracket-location': 'error',
    'react/jsx-curly-spacing': [ 'error', 'always' ],
    'react/jsx-equals-spacing': 'error',
    'react/jsx-first-prop-new-line': 'error',
    'react/jsx-handler-names': 'error',
    'react/jsx-indent-props': [ 'error', 2 ],
    'react/jsx-indent': [ 'error', 2 ],
    'react/jsx-key': 'error',
    'react/jsx-max-props-per-line': [ 'error', { 'maximum': 3 }],
    'react/jsx-no-bind': 'error',
    'react/jsx-no-literals': 'off',
    'react/jsx-no-target-blank': 'error',
    'react/jsx-pascal-case': 'error',
    'react/jsx-sort-props': 'error',
    'react/jsx-space-before-closing': 'error'
  }
};

edited Jul 19 '18 at 13:13

answered Jun 04 '16 at 00:32

fernandopasik

9,565
7
48
55

Is this `eslint` config file enough good for a little project with 3 developers along side ? – AmerllicA Jul 06 '18 at 04:27
1

Yes it could be suitable, or you could use a config like https://www.npmjs.com/package/eslint-config-airbnb which comes with a lot of good stuff already out of the box – fernandopasik Jul 19 '18 at 13:15
But I saw some articles about `airbnb`, In these articles were wrote `airbnb` eslint is annoying and make development hard and slow. Is it right? – AmerllicA Jul 19 '18 at 13:47
3

I think the point of eslint is to put HARD restrictions on how the code is written. Airbnb config is industry standard, if your developers complain it might be because they don't use estrict configs. I personally think that is very good to have a very tight eslint configuration that doesn't allow lazy developers do what they think is easy. – fernandopasik Jul 19 '18 at 21:57
2

It's not just about being strict on code style, airbnb has good rules that detect potential bugs, performance issues, and other things – fernandopasik Jul 19 '18 at 22:09
Thanks a lot, Definitely I use it in my next project. Undoubtedly I will do it. But first I should R&D about it and study how can I settle it in my case. – AmerllicA Jul 19 '18 at 22:18

ESLint configuration for JSX

3 Answers3

Option 1

Option 2