1.0.3 • Published 4 years ago
@me.rinta/eslint-config-react v1.0.3
Eslint Setup of me.rinta 📦
These are my settings for ESLint ⚡️
What it does
- Lints JavaScript based on the latest standards
- Fixes issues and formatting errors with ESlint Formatter
- Check for accessibility rules on JSX elements.
Local / Per Project Install
If you don't already have a
package.json
file, create one withnpm init
.Then we need to install everything needed by the config:
npx install-peerdeps --dev @me.rinta/eslint-config-react
You can see in your package.json there are now a big list of devDependencies.
Create a
.eslintrc
of.eslint.config.js
file in the root of your project's directory (it should live where package.json does). Your eslint config file should look like this:
{
"extends": [
"@me.rinta/eslint-config-react"
]
}
- You can add two scripts to your package.json to lint and/or fix:
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
},
With VS Code
Once you have done. You probably want your editor to lint and fix for you.
- Install the ESLint package
- Now we need to setup some VS Code settings via
Code/File
→Preferences
→Settings
. Click to the{}
icon in the top right corner and add this :
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
With Create React App
- You need to eject first
npm run eject
oryarn eject
- Run
npx install-peerdeps --dev @me.rinta/eslint-config-react
- Open your
package.json
and replace"extends": "react-app"
with"extends": ["@me.rinta/eslint-config-react"]