ESLint config by @Garvae
Massive and optimized ESLint config for the main front-end environments
✔️ You don't have to configure everything yourself, just add this config and enjoy rigorous testing and development assistance.
⌛ This section is under development and will be available soon
This package provides settings and best practices for:
🌟 JavaScript
🌟 TypeScript
🌟 React.js
🌟 Redux
🌟 HTML
🌟 Jest
🌟 JSON
🌟 Markdown
🌟 Feature Sliced Design (disabled by default)
>=8.0.0 <=8.22.0
and has not been tested with the new flat config ESLint 9
1. Install ESLint if you haven't already
npm:
npm i eslint@8.22.0 --save-dev
yarn:
yarn add eslint@8.22.0 -D
npm:
npm i prettier --save-dev
yarn:
yarn add prettier -D
npm:
npm install @garvae/eslint-config-garvae eslint-plugin-typescript-sort-keys@3.2.0 eslint-plugin-unused-imports@3.2.0 --save-dev
yarn:
yarn add -D @garvae/eslint-config-garvae eslint-plugin-typescript-sort-keys@3.2.0 eslint-plugin-unused-imports@3.2.0
4. Add the eslint-config-garvae to the ESLint config
{
"extends": [ "@garvae/eslint-config-garvae" ]
}
If you don't have a babel config, then add the path to the on included in this library the ESLint config
:
{
"overrides": [
{
"files": [
"*.js",
"*.jsx"
],
"parserOptions": {
"babelOptions": {
"configFile": "./node_modules/@garvae/eslint-config-garvae/babel.config.js"
}
}
}
]
}
If you already have your own babel config, then check it includes (and you have installed) presets:
// your babel.config.js
module.exports = {
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript",
]
}
It's also required to add the path to your tsconfig.json
into next sections:
{
"overrides": [
{
"files": [ "*.ts", "*.tsx" ],
"parserOptions": {
"project": "tsconfig.json"
},
"settings": {
"import/resolver": {
"typescript": {
"project": "tsconfig.json"
}
}
}
}
]
}
You can add config of Feature Sliced Design:
{
"overrides": [
{
"files": [ "*.ts", "*.tsx", "*.js", "*.jsx" ],
"extends": [ "@feature-sliced" ]
}
]
}
It is challenging to combine the work of many libraries with different versions. Today ESLint version 9 has an updated flat config and many plugins have already changed their configuration to support this update. However, the eslint-config-garvae library dependencies have been tested in the exact combination of versions listed in below. If you have newer versions of these libraries installed, the functionality of ESLint is not guaranteed.
Tested package versions:
{
"@babel/core": "7.24.7",
"@babel/eslint-parser": "7.24.7",
"@babel/preset-env": "7.24.7",
"@babel/preset-react": "7.24.7",
"@babel/preset-typescript": "7.24.7",
"@getify/eslint-plugin-proper-arrows": "11.0.3",
"@getify/eslint-plugin-proper-ternary": "3.1.1",
"@html-eslint/eslint-plugin": "0.25.0",
"@html-eslint/parser": "0.25.0",
"@stylistic/eslint-plugin-js": "2.3.0",
"@types/eslint-plugin-security": "3.0.0",
"@types/jest": "29.5.12",
"@types/node": "20",
"@typescript-eslint/eslint-plugin": "5.0.0",
"@typescript-eslint/parser": "5.0.0",
"eslint": "8.22.0",
"eslint-config-airbnb": "19.0.4",
"eslint-config-airbnb-typescript": "18.0.0",
"eslint-config-prettier": "9.1.0",
"eslint-import-resolver-typescript": "3.6.1",
"eslint-plugin-array-func": "4.0.0",
"eslint-plugin-better-styled-components": "1.1.2",
"eslint-plugin-destructuring": "2.2.1",
"eslint-plugin-eslint-comments": "3.2.0",
"eslint-plugin-html": "8.1.1",
"eslint-plugin-import": "2.29.1",
"eslint-plugin-import-newlines": "^1.4.0",
"eslint-plugin-jest": "27.2.1",
"eslint-plugin-jsdoc": "48.5.0",
"eslint-plugin-jsonc": "2.16.0",
"eslint-plugin-jsx-a11y": "6.9.0",
"eslint-plugin-markdownlint": "0.6.0",
"eslint-plugin-modules-newline": "0.0.6",
"eslint-plugin-newline-destructuring": "1.2.2",
"eslint-plugin-no-unsanitized": "4.0.2",
"eslint-plugin-perfectionist": "2.3.0",
"eslint-plugin-pii": "1.0.2",
"eslint-plugin-prefer-type-alias": "0.1.0",
"eslint-plugin-prettier": "5.1.3",
"eslint-plugin-react": "7.34.3",
"eslint-plugin-react-hooks": "4.6.2",
"eslint-plugin-react-redux": "4.1.0",
"eslint-plugin-security": "3.0.1",
"eslint-plugin-sort-destructure-keys": "2.0.0",
"eslint-plugin-sort-keys-fix": "1.1.2",
"eslint-plugin-styled-components-a11y": "2.1.34",
"eslint-plugin-typescript-sort-keys": "3.2.0",
"eslint-plugin-unused-imports": "3.2.0",
"eslint-plugin-write-good-comments": "0.2.0",
"eslint-plugin-you-dont-need-lodash-underscore": "6.14.0",
"jsonc-eslint-parser": "2.4.0",
"prettier": "3.3.2",
"typescript": "5.5.2"
}
There is already known issue with popular libraries:
{
"@typescript-eslint/eslint-plugin": "^6.14.0",
"@typescript-eslint/parser": "^6.14.0"
}
Working versions:
{
"@typescript-eslint/eslint-plugin": "5.0.0",
"@typescript-eslint/parser": "5.0.0"
}
And maybe up to
{
"@typescript-eslint/eslint-plugin": "5.62.0",
"@typescript-eslint/parser": "5.62.0"
}
So if you have versions newer than listed above, the possible solution:
- Uninstall newer versions and eslint-config-garvae library using CLI
- Reinstall eslint-config-garvae library
⌛ This section is under development and will be available soon
⌛ This section is under development and will be available soon
🤝 Contributions, issues and feature requests are welcome!
Feel free to check issues page and pull request page.
❤️ Give a ⭐ if you like this project!
If you want to grow 🚀 fast in front-end development - contact me! 🙋♂