My ESLint Configurations

My most commonly used ESLint configurations.

---

• Usage
  • Javascript (without React)
  • Javascript with React
  • Typescript (without React)
  • Typescript with React
  • Typescript with Next.js
  • With Yarn Plug'n'Play
    • Visual Studio Code
• Contribute

---

Usage

Javascript (without React)

npm i -DE @ivangabriele/eslint-config-base \
  @ivangabriele/prettier-config \
  eslint-config-airbnb-base \
  eslint-config-airbnb-base \
  eslint-config-prettier \
  eslint-plugin-import \
  eslint-plugin-jest \
  eslint-plugin-no-null \
  eslint-plugin-prettier \
  eslint-plugin-sort-destructure-keys \
  eslint-plugin-sort-keys-fix \
  prettier

or:

yarn add -DE @ivangabriele/eslint-config-base \
  @ivangabriele/prettier-config \
  eslint-config-airbnb-base \
  eslint-config-airbnb-base \
  eslint-config-prettier \
  eslint-plugin-import \
  eslint-plugin-jest \
  eslint-plugin-no-null \
  eslint-plugin-prettier \
  eslint-plugin-sort-destructure-keys \
  eslint-plugin-sort-keys-fix \
  prettier

Then extend it in your .eslintrc:

{
  "extends": "@ivangabriele/eslint-config-base"
}

And add this line to your package.json:

{
  // ...
  "prettier": "@ivangabriele/prettier-config"
}

Javascript with React

npm i -DE @ivangabriele/eslint-config-react \
  @ivangabriele/prettier-config \
  eslint \
  eslint-config-airbnb \
  eslint-config-prettier \
  eslint-plugin-import \
  eslint-plugin-jest \
  eslint-plugin-jsx-a11y \
  eslint-plugin-no-null \
  eslint-plugin-prettier \
  eslint-plugin-react \
  eslint-plugin-react-hooks \
  eslint-plugin-sort-destructure-keys \
  eslint-plugin-sort-keys-fix \
  prettier

or:

yarn add -DE @ivangabriele/eslint-config-react \
  @ivangabriele/prettier-config \
  eslint \
  eslint-config-airbnb \
  eslint-config-prettier \
  eslint-plugin-import \
  eslint-plugin-jest \
  eslint-plugin-jsx-a11y \
  eslint-plugin-no-null \
  eslint-plugin-prettier \
  eslint-plugin-react \
  eslint-plugin-react-hooks \
  eslint-plugin-sort-destructure-keys \
  eslint-plugin-sort-keys-fix \
  prettier

Then extend it in your .eslintrc:

{
  "extends": "@ivangabriele/eslint-config-react"
}

And add this line to your package.json:

{
  // ...
  "prettier": "@ivangabriele/prettier-config"
}

Typescript (without React)

npm i -DE @ivangabriele/eslint-config-typescript-base \
  @ivangabriele/prettier-config \
  @typescript-eslint/eslint-plugin \
  @typescript-eslint/parser \
  eslint \
  eslint-config-airbnb \
  eslint-config-airbnb-typescript \
  eslint-config-prettier \
  eslint-plugin-import \
  eslint-plugin-jest \
  eslint-plugin-no-null \
  eslint-plugin-prettier \
  eslint-plugin-sort-destructure-keys \
  eslint-plugin-sort-keys-fix \
  eslint-plugin-typescript-sort-keys \
  prettier \
  typescript

or:

yarn add -DE @ivangabriele/eslint-config-typescript-base \
  @ivangabriele/prettier-config \
  @typescript-eslint/eslint-plugin \
  @typescript-eslint/parser \
  eslint \
  eslint-config-airbnb \
  eslint-config-airbnb-typescript \
  eslint-config-prettier \
  eslint-plugin-import \
  eslint-plugin-jest \
  eslint-plugin-no-null \
  eslint-plugin-prettier \
  eslint-plugin-sort-destructure-keys \
  eslint-plugin-sort-keys-fix \
  eslint-plugin-typescript-sort-keys \
  prettier \
  typescript

Then extend it in your .eslintrc:

{
  "extends": "@ivangabriele/eslint-config-typescript-base",
  "parserOptions": {
    "project": "./tsconfig.json"
  }
}

And add this line to your package.json:

{
  // ...
  "prettier": "@ivangabriele/prettier-config"
}

Typescript with React

npm i -DE @ivangabriele/eslint-config-typescript-react \
  @ivangabriele/prettier-config \
  @typescript-eslint/eslint-plugin \
  @typescript-eslint/parser \
  eslint \
  eslint-config-airbnb \
  eslint-config-airbnb-typescript \
  eslint-config-prettier \
  eslint-plugin-import \
  eslint-plugin-jest \
  eslint-plugin-jsx-a11y \
  eslint-plugin-no-null \
  eslint-plugin-prettier \
  eslint-plugin-react \
  eslint-plugin-react-hooks \
  eslint-plugin-sort-destructure-keys \
  eslint-plugin-sort-keys-fix \
  eslint-plugin-typescript-sort-keys \
  prettier \
  typescript

or:

yarn add -DE @ivangabriele/eslint-config-typescript-react \
  @ivangabriele/prettier-config \
  @typescript-eslint/eslint-plugin \
  @typescript-eslint/parser \
  eslint \
  eslint-config-airbnb \
  eslint-config-airbnb-typescript \
  eslint-config-prettier \
  eslint-plugin-import \
  eslint-plugin-jest \
  eslint-plugin-jsx-a11y \
  eslint-plugin-no-null \
  eslint-plugin-prettier \
  eslint-plugin-react \
  eslint-plugin-react-hooks \
  eslint-plugin-sort-destructure-keys \
  eslint-plugin-sort-keys-fix \
  eslint-plugin-typescript-sort-keys \
  prettier \
  typescript

Then extend it in your .eslintrc:

{
  "extends": "@ivangabriele/eslint-config-typescript-react",
  "parserOptions": {
    "project": "./tsconfig.json"
  }
}

And add this line to your package.json:

{
  // ...
  "prettier": "@ivangabriele/prettier-config"
}

Typescript with Next.js

npm i -DE @ivangabriele/eslint-config-typescript-next \
  @ivangabriele/prettier-config \
  @next/eslint-plugin-next \
  @typescript-eslint/eslint-plugin \
  @typescript-eslint/parser \
  eslint \
  eslint-config-airbnb \
  eslint-config-airbnb-typescript \
  eslint-config-next \
  eslint-config-prettier \
  eslint-plugin-import \
  eslint-plugin-jest \
  eslint-plugin-jsx-a11y \
  eslint-plugin-no-null \
  eslint-plugin-prettier \
  eslint-plugin-react \
  eslint-plugin-react-hooks \
  eslint-plugin-sort-destructure-keys \
  eslint-plugin-sort-keys-fix \
  eslint-plugin-typescript-sort-keys \
  prettier \
  typescript

or:

yarn add -DE @ivangabriele/eslint-config-typescript-next \
  @ivangabriele/prettier-config \
  @next/eslint-plugin-next \
  @typescript-eslint/eslint-plugin \
  @typescript-eslint/parser \
  eslint \
  eslint-config-airbnb \
  eslint-config-airbnb-typescript \
  eslint-config-next \
  eslint-config-prettier \
  eslint-plugin-import \
  eslint-plugin-jest \
  eslint-plugin-jsx-a11y \
  eslint-plugin-no-null \
  eslint-plugin-prettier \
  eslint-plugin-react \
  eslint-plugin-react-hooks \
  eslint-plugin-sort-destructure-keys \
  eslint-plugin-sort-keys-fix \
  eslint-plugin-typescript-sort-keys \
  prettier \
  typescript

Then extend it in your .eslintrc:

{
  "extends": "@ivangabriele/eslint-config-typescript-next",
  "parserOptions": {
    "project": "./tsconfig.json"
  }
}

And add this line to your package.json:

{
  // ...
  "prettier": "@ivangabriele/prettier-config"
}

With Yarn Plug'n'Play

Visual Studio Code

yarn dlx @yarnpkg/sdks vscode

Contribute

Please refer to the contribution guidelines for information on how to contribute to this project.

---