Skip to main content

ESLint

About​

  • ESLint is a static code analyser for Javasvcript code. It lets you find and fix problems in your JavaScript code
  • ESLint statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline.

ESLint Plugins​

Depending upon the project need or whether you are using React or Angular or Node, you may use different ESLint plugins:

For TypeScript based projects:​

For React based projects:​

For projects using prettier as formatting tool:​

Prettier​
  • prettier: Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
ESLint plugins for Prettier​

Prerequisites​

  • Node.js (^18.18.0, ^20.9.0, or >=21.1.0) built with SSL support. (If you are using an official Node.js distribution, SSL is always built in.)

Installation​

Installation for Angular projects​

@TODO

Installation for Nodejs - Expressjs projects​

@TODO

Installation for Nodejs - Nestjs projects​

@TODO

Installation for React projects using TypeScript​

Navigate to your project directory and install npm packages required for ESLint, ESLint plugins and configurations.

  • If using npm
npm install globals \
eslint @eslint/js typescript-eslint \
eslint-plugin-react \
eslint-plugin-react-hooks \
eslint-plugin-react-refresh \
eslint-plugin-jsx-a11y 
prettier eslint-config-prettier eslint-plugin-prettier \
--save-dev
  • Or if using yarn
yarn add globals \
eslint @eslint/js typescript-eslint \
eslint-plugin-react \
eslint-plugin-react-hooks \
eslint-plugin-react-refresh \
eslint-plugin-jsx-a11y 
prettier eslint-config-prettier eslint-plugin-prettier \ 
--dev
warning

Remember to save these as devDependencies in your project.

Config file for eslint.config.js​

@TODO

Recommended ESLint configuration for Nodejs - Expressjs projects​

@TODO

Recommended ESLint configuration for Nodejs - Nestjs projects​

@TODO
import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginReact from 'eslint-plugin-react';
import pluginReactHooks from 'eslint-plugin-react-hooks';
import pluginReactRefresh from 'eslint-plugin-react-refresh';
import pluginJsxA11y from 'eslint-plugin-jsx-a11y';
import pluginEslintPrettieRecommendedConfig from 'eslint-plugin-prettier/recommended';

/** @type {import('eslint').Linter.Config[]} */
export default [
  {
    files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
  },
  {
    languageOptions: {
      globals: {
        ...globals.browser,
      },
    },
  },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
  pluginJsxA11y.flatConfigs.recommended,
  pluginEslintPrettieRecommendedConfig,
  {
    plugins: {
      'react-hooks': pluginReactHooks,
      'react-refresh': pluginReactRefresh,
    },
    settings: {
      react: {
        version: 'detect',
      },
    },
    rules: {
      'react-hooks/rules-of-hooks': 'error',
      'react-hooks/exhaustive-deps': 'warn',
      'react-refresh/only-export-components': 'warn',
      // Prettier and Indentation Rules
      'prettier/prettier': [
        'error',
        {
          arrowParens: 'always',
          endOfLine: 'lf',
          semi: true,
          singleQuote: true,
          tabWidth: 4,
          trailingComma: 'es5',
          useTabs: true,
        },
      ],
      indent: ['error', 'tab', { SwitchCase: 1 }],
    },
  },
  {
    // Optional: ignore specific files or patterns
    ignores: ['**/node_modules/**', 'dist/**', 'build/**'],
  },
];
@TODO