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'
};
The pluggable linting utility for JavaScript and JSXESLint is an open source project that helps you find and fix problems with your JavaScript code. It doesn't matter if you're writing JavaScript in the browser or on the server, with or without a framework, ESLint can help your code live its best life.
There are two primary ways to configure ESLint: Configuration Comments - use JavaScript comments to embed configuration information directly into a file. Configuration Files - use a JavaScript, JSON, or YAML file to specify configuration information for an entire directory and all of its subdirectories.
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 .
I found an alternative to the original answer so that you don't have to specify the arguments when running eslint
command.
Use the command eslint . --ext .js --ext .jsx
Specify overrides
in your eslint config...
//.eslintrc
{
...
"overrides": [
{
"files": ["*.jsx", "*.js"]
}
],
...
}
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'
}
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With