DEV Community: Ambika

Major Differences between ESLint v9 and Previous Versions:

Ambika — Mon, 07 Jul 2025 14:08:41 +0000

Feature	ESLint v9+ (Flat Config)	ESLint v8 and below (.eslintrc)
Config Format	JavaScript-only flat config (`eslint.config.js`)	JSON, YAML, or JS (`.eslintrc`)
File Structure	Flat array of config objects (more predictable merge order)	Hierarchical and deep merging of config
Config File Name	`eslint.config.js`	`.eslintrc.js`, `.eslintrc.json`, etc.
Plugins	Must be imported explicitly using `import` or `require`	Auto-loaded by name convention
Extends	No `extends` keyword — you spread config into the array manually	Uses `extends: 'airbnb-base'` etc.
Performance	Faster, deterministic resolution order	Slower with more complex merging
Scoping	Config applies only to matching files (using `files`/`ignores`)	Can be inherited by directory hierarchy
TypeScript Support	Better integration with `@eslint/js` and modern bundlers	Requires additional setup or plugin support

Config Format Flat Config (ESLint v9)

import js from '@eslint/js';
export default [
  js.configs.recommended,
  {
    rules: {
      'eqeqeq':'error',
    },
  },
];

Old Config

module.exports = {
  extends: ['eslint:recommended'],
  rules: {
   'eqeqeq':'error',
  },
};

File Structure: Flat vs Nested Flat Config (v9): No inheritance, flat array.Each config block is evaluated in order, top-down.

export default [
  {
    files: ['**/*.js'],
    rules: {
      'no-console': 'warn',
    },
  },
  {
    files: ['src/**/*.js'],
    rules: {
      'no-console': 'error',
    },
  },
];

Nested: Deep merge + inheritance. ESLint merges configs up the directory tree.

// root/.eslintrc.js
module.exports = {
  rules: {
    'no-console': 'warn',
  },
};

// root/src/.eslintrc.js
module.exports = {
  rules: {
    'no-console': 'error', // overrides parent
  },
};

Extends vs Import Flat Config (v9): No extends, uses direct imports

import js from '@eslint/js';
import airbnb from 'eslint-config-airbnb-base';

export default [
  js.configs.recommended,
  ...airbnb, // must be spread manually if it's an array
];

.eslintrc: Uses extends keyword

module.exports = {
  extends: ['eslint:recommended', 'airbnb-base'],
};

Plugins Usage: Flat Config: Plugins must be imported manually

import js from '@eslint/js';
import myPlugin from 'eslint-plugin-myplugin';

export default [
  js.configs.recommended,
  {
    plugins: {
      my: myPlugin,
    },
    rules: {
      'my/custom-rule': 'error',
    },
  },
];

.eslintrc: Plugins are auto-loaded by name

module.exports = {
  plugins: ['myplugin'],
  rules: {
    'myplugin/custom-rule': 'error',
  },
};

EsLint SetUp

Ambika — Mon, 07 Jul 2025 14:05:19 +0000

Inorder to install EsLint in your application , you need node.js in your system.

1.Install Node.js.
2.create project(workspace)
3.package.json should be there first for eslint.
4.npm init creates package.json
5.npm install eslint -g for installing globally
6.npm install eslint --save-dev for locally in the application
7.eslint -v gives version of eslint
8.eslint --init to create config file for eslint(it can be of type yaml, json, js).
9.eslintrc.json will be created and eslint dependency will be added in package.json

NOTE: In ESLint v9, the config file format defaults to the new flat config (e.g., eslint.config.js or .mjs), which is more flexible and powerful than the old .eslintrc format. And type is JavaScript (JS).

ESLint Inrtoduction

Ambika — Mon, 07 Jul 2025 13:53:50 +0000

Linting is identifying problem and syntax error in JS code. JS is dynamic language and loosely typed. we can write as we want. Like that of freeness it gives can be chance of bad code.
eg:--function with no return type, no semicolon. code will work but in edge scenarios it will fails.

ESLint is useful tool for JS application to find bugs and styling. Its the most popular js linter. Its popular because it allows use to write customized rules as per application need.

The term lint is a static code analysis tool used to flag programming error, bugs, stylish errors and suspicious constructs.

In above example, function returns true only when the number is positive. Variable x is defined but not used in the code.
The code works but it will break through error in edge scenarios.

ESLint will try to find x is used or not anywhere and value is returned in all scenarios in function. ESLint statically analyze your code to quickly find problems. ESLint is built into most text editors, and you can run EsLint as part of your continuous integration pipeline.
Many problems EsLint finds can automatically fixed using the --fix option.

ESLint uses Espree for JS parsing .
ESLint usese an AST to evaluate patterns in code
ESLint is completely pluggable .Every single rule is a plugin, and you can add more at runtime.