An ESLint Shareable Config from ImprontaAdvance based on config-react-app.
This module is for advanced users.
Installation for projects based on create-react-app
$ npm install --save-dev @improntaadvance/eslint-config
# OR
$ yarn add --dev @improntaadvance/eslint-config
Installation for projects not based on create-react-app
$ npm install --save-dev @improntaadvance/eslint-config
# OR
$ yarn add --dev @improntaadvance/eslint-config
Then, install peerDependencies:
$ npm install -D eslint-config-react-app@7.0.1 eslint@^8.0.0
In your ESlint configuration file (either .eslintrc
, .eslintrc.js
or the eslintConfig
property in your package.json
) add the following fields:
{
"extends": ["@improntaadvance"]
}
You can append the "@improntaadvance"
value if you're having other configs already.
Because the prettier
configuration is already integrated in this configuration you can just execute eslint --fix
as usual to apply prettier style to your code:
$ ./node_modules/.bin/eslint --fix
// or if you have it globally installed
$ eslint --fix
However it may be useful to have a handy script to call for that, together with other awesome fix
eslint
provides.
Therefore in your package.json
file just add in the scripts
section:
...
"scripts": {
...
"eslint:fix": "eslint --fix"
}
Integrating this with your editor will check your code during development together with automatically fix many issues on save. Most issues may arise from the prettier
rules inside this package, that eslint --fix
can easily solve for you.
Install a eslint
extension and enable the eslint --fix
on save in the IDE preferences:
...
"eslint.autoFixOnSave": true,
...
Install a eslint
plugin and enable from the extension configuration the label :
Sometimes it is required to tweak a little bit the configuration, expecially when working with different teams one may like 2 ore 4 spaces indentation.
This request is reasonable and it is possible to tweak the configuration directly in the eslint
configuration file:
{
"extends": [
"@improntaadvance"
],
"rules": {
"prettier/prettier": [
"error",
{
"singleQuote": true,
"trailingComma": "es5",
"bracketSpacing": false,
"jsxBracketSameLine": true,
"parser": "flow",
"tabWidth": 2
}
]
}
}
Note that the whole configuration object needs to be passed.
As an alternative for overriding it is possible to keep distinct the prettier
configuration to better integrate with third party tools and use a .prettierrc
file.
- Create a
.prettierrc
file and paste the following content inside:
{
singleQuote: true,
trailingComma: 'es5',
bracketSpacing: false,
jsxBracketSameLine: true,
parser: 'flow',
tabWidth: 4,
}
- Now edit your
.eslintrc
file and add the following rule:
{
"extends": [
"@improntaadvance"
],
"rules": {
"prettier/prettier": [
"error",
null
]
}
}
Now everything should be in sync: edit the .prettierrc
file with your own custom rules.
This module works using only the eslint
plugin for IDEs. Additional prettier plugins may go in conflict with this configuration as they usually rely only on the .prettierrc
configuration file.
It is possible to make them both work overriding the current configuration as explained in the [third party tools section][#integration-with-third-party-tools].
[![js-impronta-style](https://img.shields.io/badge/code--style-@improntaadvance-green.svg?style=flat-square)](http://improntaadv.com/)