eslint-config-leaero v1.1.0
eslint-config-leaero
Shareable ESLint and Prettier config.
Quickstart
Start with installing the library and its necessary peer dependencies.
yarn add --dev eslint-config-leaero eslint prettier
Prettier Integration
This library is automatically configured with Prettier by adding it as a rule to ESLint. You just need to add a .prettierrc
file to your project and add your own custom formatting rules.
Available Configurations
You can choose between different configurations that suit the technology stack of your project. All configurations extend from a base config.
Name | Description |
---|---|
leaero | Base configuration for projects that use plain JavaScript. |
leaero/react | Configuration for React projects that use Babel. |
leaero/typescript | Configuration for Node projects that use TypeScript. |
leaero/react-typescript | Configuration for React projects that use Typescript. |
leaero/next-typescript | Configuration for Next.js projects that use Typescript. |
leaero
Base configuration for projects that use plain JavaScript.
Required packages:
- @babel/core
- @babel/eslint-parser
- eslint-config-airbnb-base
- eslint-config-prettier
- eslint-plugin-import
- eslint-plugin-simple-import-sort
yarn add --dev @babel/core @babel/eslint-parser eslint-config-airbnb-base eslint-config-prettier eslint-plugin-import eslint-plugin-simple-import-sort
Add it to your eslintrc.js
.
module.exports = {
extends: ['leaero'],
};
leaero/react
Configuration for React projects that use Babel.
Required packages:
- Packages from
leaero
- eslint-plugin-react
- eslint-plugin-react-hooks
- eslint-plugin-jsx-a11y
yarn add --dev @babel/core @babel/eslint-parser eslint-config-airbnb-base eslint-config-prettier eslint-plugin-import eslint-plugin-simple-import-sort eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y
Add it to your eslintrc.js
.
module.exports = {
extends: ['leaero/react'],
};
leaero/typescript
Configuration for Node projects that use TypeScript.
Required packages:
- Packages from
leaero
except for@babel/core
and@babel/eslint-parser
eslint-config-airbnb-typescript
@typescript/eslint/eslint-plugin
@typescript-eslint/parser
eslint-import-resolver-typescript
yarn add --dev eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-simple-import-sort eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-import-resolver-typescript
Add it to your eslintrc.js
.
module.exports = {
extends: ['leaero/typescript'],
};
leaero/react-typescript
Configuration for React projects that use TypeScript.
Required packages:
- Packages from
leaero
except for@babel/core
andbabel/eslint-parser
- Packages from
leaero/react
- Packages from
leaero/typescript
yarn add --dev eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-simple-import-sort eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-import-resolver-typescript
Add it to your eslintrc.js
.
module.exports = {
extends: ['leaero/react-typescript'],
};
leaero/next-typescript
Configuration for Next.js projects that use TypeScript.
Required packages:
- Packages from
leaero
except for@babel/core
and@babel/eslint-parser
- Packages from
leaero/react-typescript
- @next/eslint-plugin-next
yarn add --dev eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-simple-import-sort eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-import-resolver-typescript @next/eslint-plugin-next
Add it to your eslintrc.js
.
module.exports = {
extends: ['leaero/typescript-next'],
};
Make VS Code lint and fix for you
If you want your code editor lint and fix for you on save, you should add these instructions to your workbench or project settings.json
{
// auto-save configs
"editor.formatOnSave": true,
// turn it off for JS, JSX, TS and TSX, we will do this via eslint
"[javascript][javascriptreact][typescript][typescriptreact]": {
"editor.formatOnSave": false
},
// tell the ESLint plugin to run on save
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}