Adam Richardson

Next.js Eslint configuration with vscode

Adam Richardson / November 06, 2021

2 min read

Next.js Eslint configuration with vscode

Install Dependecies

npm i eslint eslint-config-next eslint-plugin-import eslint-plugin-react eslint-plugin-sort-keys-fix eslint-plugin-simple-import-sort

Add Linting scripts

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "lint.fix": "next lint --fix"
  },

Add .eslintrc

/.eslintrc
{
  "extends": [
    "next",
    "next/core-web-vitals",
    "eslint:all",
    "plugin:react/all",
    "plugin:import/errors",
    "plugin:import/warnings"
  ],
  "env": {
    "browser": true,
    "es2020": true,
    "node": true,
    "jest": true
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "indent": 0,
    "quotes": ["error", "double"],
    "semi": ["error", "always"],
    "sort-imports": 0,
    "linebreak-style": 0,
    "multiline-ternary": 0,
    "require-await": 0,
    "func-style": 0,
    "class-methods-use-this": 0,
    "sort-keys-fix/sort-keys-fix": "warn",
    "max-len": 0,
    "no-magic-numbers": 0,
    "react/forbid-component-props": 0,
    "react/jsx-wrap-multilines": 0,
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error",
    "no-ternary": 0,
    "max-lines-per-function": 0,
    "space-before-function-paren": [
      "error",
      {
        "anonymous": "never",
        "named": "never",
        "asyncArrow": "always"
      }
    ],
    "function-call-argument-newline": 0,
    "padded-blocks": 0,
    "padding-line-between-statements": [
      "error",
      { "blankLine": "always", "prev": "*", "next": "return" },
      { "blankLine": "always", "prev": ["const", "let", "var"], "next": "*" },
      {
        "blankLine": "any",
        "prev": ["const", "let", "var"],
        "next": ["const", "let", "var"]
      }
    ],
    "object-curly-spacing": ["error", "always"],
    "one-var": ["error", "never"],
    "quote-props": 0,
    "react/prop-types": 0,
    "react/jsx-indent": 0,
    "react/jsx-indent-props": [2, 2],
    "react/jsx-filename-extension": 0,
    "react/react-in-jsx-scope": 0,
    "react/jsx-no-literals": 0,
    "react/jsx-one-expression-per-line": 0,
    "react/jsx-max-depth": 0,
    "react/jsx-newline": 0,
    "react/jsx-props-no-spreading": 0,
    "react/jsx-closing-tag-location": 0
  },
  "plugins": [
    "sort-keys-fix", 
    "simple-import-sort"
  ],
  "ignorePatterns": ["node_modules/", ".next/"]
}

Ensure code action is to fix all errors on save

/.vscode/settings.json
{
  "workbench.colorCustomizations": {
    "titleBar.activeForeground": "#fff",
    "titleBar.inactiveForeground": "#ffffffcc",
    "titleBar.activeBackground": "#2cff37",
    "titleBar.inactiveBackground": "#2cff37"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}

© 2021 Adam Richardson. All rights reserved.