ES Lint for Beginner

ESLint is the standard linting tool for JavaScript and TypeScript projects. It helps you catch bugs, enforce coding conventions, and maintain consistency across your codebase.

What Is Linting?

Linting is the process of analyzing code for potential errors and style issues before it runs. Think of it as a spell-checker for your code.

Info

ESLint doesn't just find bugs — it can automatically fix many issues for you with the --fix flag.

Setting Up ESLint

Modern projects can use the flat config format (eslint.config.js):

eslint.config.js

import js from "@eslint/js";
import tsPlugin from "@typescript-eslint/eslint-plugin";
import tsParser from "@typescript-eslint/parser";

export default [
  js.configs.recommended,
  {
    files: ["**/*.ts", "**/*.tsx"],
    languageOptions: {
      parser: tsParser,
    },
    plugins: {
      "@typescript-eslint": tsPlugin,
    },
    rules: {
      "no-unused-vars": "off",
      "@typescript-eslint/no-unused-vars": "error",
    },
  },
];

Essential Rules

Here are the rules every project should enable:

{
  "rules": {
    "no-console": "warn",
    "no-debugger": "error",
    "prefer-const": "error",
    "no-unused-vars": "error",
    "eqeqeq": ["error", "always"]
  }
}

Warning

Never disable no-unused-vars globally. Unused variables are a sign of dead code or incomplete refactoring.

Integration with Your Editor

Most code editors support ESLint out of the box:

VS Code — Install the ESLint extension
Enable auto-fix on save — Add to your settings:

.vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

ESLint with Next.js

Next.js ships with its own ESLint config. You can extend it:

eslint.config.js (Next.js)

import nextPlugin from "@next/eslint-plugin-next";

export default [
  {
    plugins: {
      "@next/next": nextPlugin,
    },
    rules: {
      ...nextPlugin.configs.recommended.rules,
    },
  },
];

Tip

Run next lint to check your Next.js project. It automatically uses the recommended Next.js ESLint rules.

Conclusion

ESLint is an essential tool for any JavaScript or TypeScript project. Set it up early, configure it once, and let it catch issues before they reach production.