[NextJS with all the Must-Haves] #eslint #prettier #lint-staged #husky #vscode #mui #nextjs

NextJS-ESLint-Prettier-Lint-Staged-Husky-VSCode.md

NextJS with ESLint (extends google + prettier) + Prettier + Lint-Staged + Husky (pre-commit hook)

Install and initialize all the necessary dev-dependencies

yarn add --dev prettier eslint-plugin-prettier eslint-config-prettier eslint-config-google lint-staged husky
yarn husky install && husky add .husky/pre-commit "yarn lint-fix"

Prettier Config+Plugin for ESLint

• Prettier is run as an ESLint Plugin, rather than as a stand-alone tool
• Prettier rules are the last to be applied, which overrides some Google rules (some desirably, some not); therefore we have a small .prettierrc:

{
    "singleQuote": true
}

ESLint .eslintrc.json

{
    "extends": ["next/core-web-vitals", "plugin:import/recommended", "plugin:import/typescript", "google", "prettier"],
    "plugins": ["prettier"],
    "rules": {
        "prettier/prettier": "error",
        "no-console": "warn",
        "max-len": ["warn", {
            "code": 120,
            "tabWidth": 2
        }],
        "require-jsdoc": "off"
    }
}

NPM/Yarn Scripts via package.json

• Reminder: lint-fix is called on the git pre-commit hook via Husky + Lint-Staged

Server Rendering Enabled

{
    "scripts": {
        "prepare": "husky install",
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint",
        "lint-fix": "next lint --fix"
    }
}

Static Only Site

• Ensure you have serve installed, ie yarn add --dev serve

{
    "scripts": {
        "prepare": "husky install",
        "dev": "next dev",
        "build": "next build",
        "preexport": "npm run build",
        "export": "next export",
        "prestart": "npm run export",
        "start": "serve out",
        "lint": "next lint",
        "lint-fix": "next lint --fix"
    }
}

NOTE: For a Static Only NextJS Site, you need to DISABLE Image Optimization in next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    unoptimized: true, // CANNOT use while exporting site as "Static" only
  }
}

module.exports = nextConfig

VSCode Setup

1. Install the ESLint extension
   • Do NOT Install the Prettier extension. It's not needed because we are using Prettier as an ESLint Plugin, rather than as a stand-alone tool.
2. Configure VSCode as you wish via User Settings JSON (settings.json)
   • Enable/Disable (suggestions) "eslint.enable": false (default: true)
   • Enable/Disable (fix on save) "editor.codeActionsOnSave": { "source.fixAll": true } (default: false)