My shared ESLint & Prettier configuration for projects

Donate: PayPal, Patreon

❤️ it? ⭐️ it on GitHub

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

• Uses Eslint v7 from v2.x.x
• Dropped usage eslint-config-airbnb in favour of @abhijithvijayan/eslint-config-airbnb

# 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.

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

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

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

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
  },
}

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
  },
}

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
  }
}

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

• 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
  

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

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

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

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

MIT © Abhijith Vijayan