I’m developing a simple blog web app in Next Js with Typescript. I’m trying to learn and setup a lint check for my code. I went through multiple articles for the same and was able to follow them with successful execution.

But I’m confused about what basic or standard configs should be added to get started with the app?

Several docs suggest different patterns, but I’m unsure exactly which one to follow.

Also, I tried to add the lint auto fixable flag (–fix) to help reduce manual lint fix, but it’s not working.

This is my current basic configs in eslintrc.json

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "root": true,
  "extends": [
    "next",
    "eslint:recommended",
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended"
  ],
  "plugins": ["prettier", "@typescript-eslint", "react", "react-hooks"],
  "rules": {
    "@typescript-eslint/array-type": [
      "warn",
      {
        "default": "array"
      }
    ],
    "@typescript-eslint/consistent-type-assertions": [
      "warn",
      {
        "assertionStyle": "as",
        "objectLiteralTypeAssertions": "never"
      }
    ],
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "react/react-in-jsx-scope": "off",
    "import/no-unresolved": "error",
    "jsx-a11y/anchor-is-valid": "off",
    "react/prop-types": "off"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

These are the required package dependencies and script (in package.json):

"dependencies": {
    "@typescript-eslint/eslint-plugin": "^7.13.0",
    "@typescript-eslint/parser": "^7.13.0",
    "axios": "^1.7.2",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.1.3",
    "husky": "^9.0.11",
    "lint-staged": "^15.2.7",
    "next": "14.2.3",
    "next-connect": "^1.0.0",
    "prettier": "^3.3.2",
    "react": "^18",
    "react-bootstrap": "^2.10.2",
    "react-dom": "^18",
    "swr": "^2.2.5",
    "yup": "^1.4.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8.57.0",
    "eslint-config-next": "^14.2.4",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-react": "^7.34.2",
    "typescript": "^5"
  }
}

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

To test the –fix flag script, I added a sample unused variable in one of the components (header.tsx) like this

const Header = ({ categories }: Props) => {
  const unusedVariable = 10;
  return (
    <Navbar collapseOnSelect expand="sm" className="bg-body-tertiary">
      ... //rest of the code
    </Navbar>
  );
}

export default Header;

but executing, npm run lint:fix, does not resolve that variable automatically. I still get the error in my logs:

I tried looking for other SO queries on the same issue, but none worked. And also installed eslint extension on VSCode but not sure if that’s of help and how.

I’m stuck, unable to figure out what’s missing in my configs or maybe invalid dependencies.

If anyone can help look into this and provide me with a proper path forward with the issue, it’ll be of great help. This is my first time setting up eslint, especially on the next js app.

I’m open for suggestions to following better approach on setting and using the eslint rules and configs in any project.