🤔 Problem

I share almost the same ESLint configuration between all my projects, with variations depending if the project uses typescript, jest, react, etc. Whenever a new configuration or plugin gets upgraded, I have to go through all the projects and upgrade the dependencies.

🤓 Solution

This opinionated ESLint configuration automatically detects what dependencies my project depends on and dynamically generates configs, plugins and rules configuration. So now my projects rather than depending on a lot of eslint-* packages, only depends on this one.

📚 Table of Contents

• ⬇️ Installation
• 📝 Usage
  • ESLint config file
  • package.json script
  • Auto formatting
  • Overriding configuration
• 📦 What's included?
  • Vanilla JS
    • parser
    • extends
    • plugins
    • env
    • import/resolver plugin settings
    • Rules
  • Jest
    • env
  • TypeScript
    • parser
    • extends
    • plugins
    • import/resolver plugin settings
    • rules
  • React
    • extends
    • plugins
    • env
    • import/resolver plugin settings
    • rules
  • React with TypeScript
    • import/resolver plugin settings
    • rules
  • React Native
    • plugins
    • env
    • import/resolver plugin settings
  • React Native with TypeScript
    • import/resolver plugin settings
• 📄 License

⬇️ Installation

Add this package to the devDependencies section of your package.json. Since this package is part of a Yarn workspaces powered monorepo, I encourage you to install it via yarn.

yarn add -D @kevinwolf/eslint-config

📝 Usage

ESLint config file

Create a new .eslintrc.js file on the root of your project and just extend my configuration.

module.exports = {
  extends: "@kevinwolf"
};

package.json script

Add a new script to your package.json in order to run eslint.

{
  "scripts": {
    "lint": "eslint . --ext .ts,.tsx,.js,.jsx"
  }
}

NOTE: Since this package has an explicit dependency on eslint and the supporting packages, you won't need to install them separately.

Auto formatting

You get auto formatting out-of-the-box if your code editor supports eslint formatting or you have prettier configured to format using ESLint rules.

Overriding configuration

Thanks to the awesome config system of ESLint, you can override any rule, add extra plugins and whatever you want on the same .eslintrc.js file.

📦 What's included?

The generated rules vary depending on your project type, they can and will be combined depending on your dependencies.

Vanilla JS

All projects will inherit this configurations, except on typescript projects, on which the parser will be different.

parser

• babel-eslint

extends

• airbnb-base
• plugin:prettier/recommended

plugins

• prettier

env

• es6
• node

import/resolver plugin settings

• Allows importing .js files
• Allows absolute imports from src folder

Rules

• no-console: generates warning when using console
• no-use-before-define: generates error when using a variable before its definition. It won't display an error when using a function before its definition
• import/prefer-default-export: off
• prettier/prettier: enforces parenthesis on all arrow function arguments, disables the use of semicolons, enforces single quote and enforces adding a trailing comma for multiline arrays and objects

Jest

This rules will apply if you have jest installed as a devDependency.

env

• jest

TypeScript

This rules will apply if you have typescript installed as a devDependency.

parser

• @typescript-eslint/parser

extends

• plugin:@typescript-eslint/recommended
• prettier/@typescript-eslint

plugins

• @typescript-eslint

import/resolver plugin settings

• Allows importing .ts files

rules

• @typescript-eslint/explicit-function-return-type: disabled
• @typescript-eslint/no-unused-vars: error when broken
• @typescript-eslint/no-use-before-define: disabled

React

This rules will apply if you have react installed in any dependency group.

extends

• airbnb
• prettier/react

plugins

• react
• react-hooks

env

• browser (if react-dom is installed in any dependency group)

import/resolver plugin settings

• Allows importing .jsx files

rules

• react/jsx-filename-extension: only allows jsx on .jsx files
• react/prop-types: will throw error if not checking the prop types
• react-hooks/exhaustive-deps: error when broken
• react-hooks/rules-of-hooks: error when broken

React with TypeScript

This rules will apply if you have react installed in any dependency group and typescript installed as a devDependency.

import/resolver plugin settings

• Allows importing .tsx files

rules

• react/jsx-filename-extension: only allows jsx on .jsx and .tsx files

React Native

This rules will apply if you have react-native installed in any dependency group.

plugins

• react-native

env

• react-native/react-native

import/resolver plugin settings

• Allows importing .native.js, .android.js, .ios.js, .native.jsx, .android.jsx and .ios.jsx files

React Native with TypeScript

This rules will apply if you have react-native installed in any dependency group and typescript installed as a devDependency.

import/resolver plugin settings

• Allows importing .native.ts, .android.ts, .ios.ts, .native.tsx, .android.tsx and .ios.tsx files

📄 License

MIT