My Typescript with Next.js ESLint Configuration

My most commonly used ESLint configuration for Typescript with Next.js.

Usage

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

Contribution

This is a monorepository, please check the root readme.