eslint-config

My shared ESLint & Prettier configuration for projects

🙋‍♂️ Made by @abhijithvijayan

Donate: PayPal, Patreon

❤️ it? ⭐️ it on GitHub

Features

The config includes these plugins by default:

• import
• jsx-a11y
• prettier
• react
• react-hooks
• @typescript-eslint/eslint-plugin
• eslint-plugin-node from v2.2.3

Breaking Changes

• Uses @babel/eslint-parser instead of babel-eslint from v2.6.1 (See migration guide)
• Uses Eslint v7 from v2.x.x (See migration guide)
• Dropped usage eslint-config-airbnb in favour of @abhijithvijayan/eslint-config-airbnb

Installation

# npm
npx install-peerdeps @abhijithvijayan/eslint-config --dev

# yarn
npx install-peerdeps @abhijithvijayan/eslint-config --dev --yarn

This will install the required peerDependencies for eslint

Note: Due to this bug, you need to have all the associated plugins installed as devDependencies to make things work.

Usage

Add extends of the preferred base config to your .eslintrc.json:

{
  "extends": [
    "@abhijithvijayan/eslint-config"
  ],
  "rules": {
    // your overrides
  }
}

Other configs

This config also exposes react, node, and typescript configs that I use often.

TypeScript

To use the ts configuration, install the TypeScript compiler:

# npm
npm install typescript --save-dev

# yarn
yarn add --dev typescript

.eslintrc.json:

{
  "extends": [
    "@abhijithvijayan/eslint-config/typescript"
  ],
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "rules": {
    // your overrides
  },
}

Node.js

It is to be used in combination with the base config (recommended)

.eslintrc.json:

{
  "extends": [
    "@abhijithvijayan/eslint-config", // or "@abhijithvijayan/eslint-config/typescript",
    "@abhijithvijayan/eslint-config/node"
  ],
  "parserOptions": {
    // Uncomment both if you are using typescript with node
    // "project": "./tsconfig.json",
    // "sourceType": "module" // https://github.com/mysticatea/eslint-plugin-node#-configs
  },
  "rules": {
    // Uncomment if you are using typescript with node(ES Modules)
    // "node/no-unsupported-features/es-syntax": ["error", {
    //   "ignores": ["modules"]
    // }],

    // your other overrides
  },
}

React

It is to be used in combination with the base config (recommended)

.eslintrc.json:

{
  "extends": [
    "@abhijithvijayan/eslint-config", // or "@abhijithvijayan/eslint-config/typescript",
    "@abhijithvijayan/eslint-config/react"
  ],
  "parserOptions": {
    // Uncomment if you are using typescript configuration
    // "project": "./tsconfig.json"
  },
  "rules": {
    // your overrides
  }
}

With Create React App

Open your package.json and replace "extends": "react-app" with above config or remove extends entry and create a separate .eslintrc.json file(recommended)

Optional

• To lint your files, you can add the following scripts to your package.json:

  "scripts": {
      // other scripts
      "lint": "eslint . --ext .js,.ts,.tsx",
      "lint:fix": "eslint . --ext .js,.ts,.tsx --fix"
  },

• Add a .eslintignore file with my defaults

  node_modules
  dist            # typescript default output directory
  .yarn
  .pnp.js
  
  # other directories to skip linting
  

Override

If you'd like to override eslint or prettier settings, you can add the rules in your .eslintrc.json file.

The ESLint rules go directly under "rules" while prettier options go under "prettier/prettier".

Note: overriding prettier rules(trailing comma, single quote, etc) require including all existing rules as well.

{
  "extends": ["@abhijithvijayan/eslint-config"],
  "rules": {
    "no-console": "off",
    "react/jsx-props-no-spreading": "off",
    "prettier/prettier": [
      "error",
      {
        "bracketSpacing": true,
        "jsxBracketSameLine": false,
        "printWidth": 120,
        "semi": true,
        "singleQuote": true,
        "tabWidth": 4,
        "trailingComma": "all",
        "useTabs": false,
        "proseWrap": "always"
      }
    ]
  }
}

With VS Code

To show lint errors in your editor, you'll need to configure your editor.

1. Install the ESLint package

2. Install the Prettier package

3. Now we need to setup some VS Code settings via Code/File → Preferences → Settings. It's easier to enter these settings while editing the settings.json file, so click the {} icon in the top right corner:

   "editor.formatOnSave": true,
   "[javascript]": {
     "editor.formatOnSave": false
   },
   "[javascriptreact]": {
     "editor.formatOnSave": false
   },
   "[typescript]": {
     "editor.formatOnSave": false
   },
   "[typescriptreact]": {
     "editor.formatOnSave": false
   },
   "editor.codeActionsOnSave": {
       "source.fixAll": true,
       "source.fixAll.eslint": false
   },
   "prettier.disableLanguages": ["javascript", "javascriptreact", "typescript", "typescriptreact"],

Bugs

Please file an issue here for bugs, missing documentation, or unexpected behavior.

Credits

This was initially a fork of eslint-config-wesbos. Thanks wesbos!

License

MIT © Abhijith Vijayan