eslint-config-fluxuator v2.4.5
eslint-config-fluxuator
This package includes the shareable ESLint configuration that I use in my projects.
It was inspired by https://github.com/airbnb/javascript and https://github.com/facebook/create-react-app but less opinionated.
Installation (React app)
NOTE: You can also create it in your home directory to enable it globally for all projects.
React App
- Install this package, ESLint and the necessary dependencies
yarn add -D eslint-config-fluxuator \
@babel/core@^7.0.0 @babel/eslint-parser@^7.0.0 @babel/preset-react@^7.0.0 \
eslint@^8.0.0 \
eslint-plugin-react@^7.0.0 eslint-plugin-react-hooks@^4.0.0 \
typescript@^5 \
@typescript-eslint/eslint-plugin@^6 @typescript-eslint/parser@^6
- Create a file named
.eslintrc
with following contents in the root folder of your project:
{
"extends": ["fluxuator"]
}
- You can override the settings from
eslint-config-fluxuator
by editing the.eslintrc
file. Learn more about configuring ESLint on the ESLint website.
{
"extends": ["fluxuator"],
"rules": {
"some-annoying-rule": "off"
}
}
If you are using the new JSX transform from React 17, add "fluxuator/jsx-runtime" to "extends" to disable the relevant rules.
Add a script to you package.json to check your project with Eslint.
{
"scripts": {
"lint": "eslint '**/*.{ts,tsx}' --report-unused-disable-directives",
"lint:fix": "yarn lint --fix --max-warnings 0"
}
}
React App (Recommended)
You can also enable all recommended rules for your React App with only one config that combines all recommended rules including Prettier, but without testing libraries (should be installed separately)
{
extends: ['fluxuator/react-recommended'],
}
{
extends: [
'fluxuator/react-recommended',
// "fluxuator/vitest-recommended"
// "fluxuator/jest-recommended"
],
}
NOTE: Requires Prettier to be installed additionally
NodeJS App
- Install this package, ESLint and the necessary plugins
yarn add -D eslint-config-fluxuator \
eslint@^8.0.0 \
typescript@^5 \
@typescript-eslint/eslint-plugin@^6 @typescript-eslint/parser@^6
- Create a file named
.eslintrc
with following contents in the root folder of your project:
{
"extends": ["fluxuator/node"]
}
- You can override the settings from
eslint-config-fluxuator
by editing the.eslintrc
file. Learn more about configuring ESLint on the ESLint website.
{
"extends": ["fluxuator/node"],
"rules": {
"some-annoying-rule": "off"
}
}
NodeJS App (Recommended)
You can also enable all recommended rules for your NodeJS App with only one config that combines all recommended rules including Prettier, but without testing libraries (should be installed separately)
{
"extends": ["fluxuator/node-recommended", "fluxuator/jest"]
}
NOTE: Requires Prettier to be installed additionally
That's it!
Extensions
Jest
This config also ships with optional Jest rules for ESLint (based
on eslint-plugin-jest
)
- Install the ESLint plugin for Jest and Testing Library (if you don't already have them installed).
yarn add -D jest eslint-plugin-jest eslint-plugin-jest-formatting
- Enable these rules by adding the Jest config to the
extends
array in your ESLint config.
{
"extends": ["fluxuator", "fluxuator/jest"]
}
Vitest
In case you are using ViteJS as app builder, it is recommended to use Vitest instead of Jest in your app.
This config also ships with optional Vitest rules for ESLint (based
on eslint-plugin-vitest
)
- Install the ESLint plugin for Vitest
yarn add -D jest eslint-plugin-vites eslint-plugin-jest-formatting
- Enable these rules by adding the Jest config to the
extends
array in your ESLint config.
{
"extends": ["fluxuator", "fluxuator/vitest"]
}
Testing Library
You can also charge your ESLint with additional power
of eslint-plugin-testing-library
) rules.
yarn add -D eslint-plugin-testing-library
and enable additional rules
{
"extends": ["fluxuator", "fluxuator/vitest", "fluxuator/testing-library"]
}
Prettier
This config also ships with optional Prettier rules for ESLint.
- Install the Prettier tool (if you don't already have them installed).
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
- Enable these rules by adding the Prettier config to the
extends
array in your ESLint config. Make sure to put it last, so it gets the chance to override other configs.
{
"extends": ["fluxuator", "fluxuator/prettier"]
}
Accessibility Checks
Some basic rules from the eslint-plugin-jsx-a11y plugin are activated:
If you want to enable even more accessibility rules, you can create an .eslintrc
file in the root of your project with
this content:
{
"extends": ["fluxuator", "fluxuator/a11y"]
}
MDX rules
This config also ships with optional MDX rules for ESLint (based
on eslint-plugin-mdx
).
- Install the ESLint plugin for MDX (if you don't already have it installed).
yarn add -D eslint-plugin-mdx@^1.16.0
- Enable these rules by adding the MDX config to the
extends
array in your ESLint config.
{
"extends": ["fluxuator", "fluxuator/jest", "fluxuator/mdx"]
}
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
8 months ago
8 months ago
8 months ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago