@abhijithvijayan/eslint-config NPM

❤️ it? ⭐️ it on GitHub

Features

The config includes these plugins by default:

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.

Install the ESLint package
Install the Prettier package

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"],