Posted inBack-End Front-End

Customizing ESLint Rules: Make Your JavaScript Linting Work for You

July 1, 2025Posted inBack-End, Front-End
Customizing ESLint Rules: Make Your JavaScript Linting Work for You

Originally published on Makemychance.com

If you’ve worked on a JavaScript project with multiple developers, you’ve likely run into inconsistent code styles, unexpected errors, or long debates about semicolons. That’s where ESLint comes in — a pluggable linting tool that helps enforce consistent coding standards and catch errors before runtime.

But ESLint isn’t one-size-fits-all. Whether you’re working solo or as part of a team, customizing ESLint rules allows you to tailor it to your preferred coding style or team guidelines.

In this article, we’ll show you how to go beyond the default ESLint setup and configure rules to match your needs.

🔧 What is ESLint?

ESLint is a static code analysis tool for identifying and reporting problems in JavaScript code. It helps:

  • Catch bugs early
  • Enforce style consistency
  • Prevent bad practices (like using var)

🚀 Getting Started

If you haven’t set up ESLint yet:

npm install eslint --save-dev
npx eslint --init

📘 Official Setup Guide

Choose your framework, preferred style guide, and install the dependencies.

🎯 Where Rules Live

Rules are defined in the .eslintrc file, typically in JSON, JavaScript, or YAML format.

📘 Configuration File Docs

Example .eslintrc.json:

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["warn", "single"],
    "no-console": "off"
  }
}

🛠️ Customizing ESLint Rules

You can customize ESLint rules by:

  • Enabling/disabling specific rules
  • Changing their severity: "off", "warn", "error"
  • Adding rule-specific configuration

📘 ESLint Rules List

🔹 1. Changing Rule Severity

"no-alert": "warn"

🔹 2. Setting Custom Rule Options

"quotes": ["error", "single", { "avoidEscape": true }]

🔹 3. Disabling Rules Entirely

"no-console": "off"

Or inline:

// eslint-disable-next-line no-console
console.log("Debugging info");

🔄 Overriding Rules Per File

📘 ESLint Overrides

If you’re working with different kinds of files (e.g. tests, legacy code), you can override rules:

"overrides": [
  {
    "files": ["*.test.js"],
    "rules": {
      "no-unused-expressions": "off"
    }
  }
]

💡 Popular Custom Rules for Teams

RuleWhat it DoesDocs
semiEnforces semicolons🔗
quotesEnforces quote style🔗
eqeqeqForces use of === instead of ==🔗
no-varDisallows var declarations🔗
indentEnforces consistent indentation🔗
no-consoleBlocks console logs in production code🔗

🧩 Using ESLint Plugins

You can go further by using plugins like:

npm install eslint-plugin-react --save-dev

📘 ESLint Plugin Guide

Then in .eslintrc:

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-uses-react": "error"
  }
}

Also check:

🧪 Example: Custom Rule Set for a Team Project

{
  "env": {
    "node": true,
    "es2021": true
  },
  "extends": ["eslint:recommended"],
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"],
    "indent": ["error", 2],
    "eqeqeq": "error",
    "no-var": "error",
    "no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }]
  }
}

✅ Final Thoughts

Customizing ESLint rules helps align your code with your project’s style and improves collaboration across teams. Whether you’re tweaking rules for formatting, disabling unnecessary warnings, or setting up environment-specific overrides, ESLint gives you full control.

Start with recommended rules, then tweak them as your project grows. Remember, consistency is more important than perfection — and with ESLint, that consistency is just a few rules away.

Last updated on July 1, 2025