eslint-config-react
This is my preferred React code style linting rules. You'll probably hate them.
Idea behind these
No tricks, no magic, no useless code, no complicated code. Very opinionated about all these spaces, quotes, parentheses. A bit of sanity applied, but not too much.
Installation
Installation steps assumes you've already configured base eslint config, ie: installed my base rules.
npm i eslint-plugin-react @dzek69/eslint-config-react --save-dev
In your .eslintrc file add the rules in extends array:
{
"extends": [
"@dzek69/eslint-config-react"
]
}It will automatically enable jsx and define react plugin. You may however want to set your pragma and React version settings - look here.
Then to lint src and test directories with subdirectories run:
npx eslint src/**/*.js src/*.js test/**/*.js test/*.js
Test files issues
Some of these rules may be annoying in tests files. Use overrides in your config:
{
"overrides": [
{
"files": ["test/*.js", "test/**/*.js"],
"env": {
"mocha": true
},
"rules": {
"react/no-multi-comp": "off"
}
}
]
}See eslint config guide for more details.
Full config example
This is full config that I am using in one of my projects, feel free to take inspiration:
{
"extends": [
"@dzek69/eslint-config-base",
"@dzek69/eslint-config-react"
],
"env": {
"node": true
},
"overrides": [
{
"files": ["src/*.spec.js", "src/**/*.spec.js"],
"env": {
"mocha": true
},
"rules": {
"global-require": "off",
"max-lines": "off",
"max-lines-per-function": "off",
"max-statements": "off",
"no-magic-numbers": "off",
"react/no-multi-comp": "off"
}
}
],
"settings": {
"react": {
"createClass": "createReactClass",
"pragma": "React",
"version": "detect",
"flowVersion": "detect"
},
"propWrapperFunctions": []
}
}License
MIT
