eslint-config-satya164

This is my personal ESLint config. I try to avoid rules which are purely stylistic and based on personal opinions. I'm tryin to keep it non-intrusive and aimed towards catching actual errors.

Features

The config includes these plugins by default:

• eslint-comments
• import-x
• jest
• prettier
• promise
• react-hooks
• react-hooks
• react
• typescript-eslint

The config uses the overrides feature of ESLint to automatically adjust the config based on the filename. For example, typescript support is enabled for .ts and .tsx files, the jest environment is set for test files and more.

Prettier is used for formatting.

Usage

First, install the required packages:

yarn add --dev prettier eslint eslint-config-satya164

If you're using TypeScript, also install the TypeScript compiler:

yarn add --dev typescript

Now use the config in your config file:

// eslint.config.mjs
import { defineConfig } from 'eslint/config';
import { recommended, react, vitest } from 'eslint-config-satya164';

export default defineConfig(
  // The base config
  recommended,

  // Optional configs for tools (i.e. react, vitest, jest)
  react,
  vitest,

  {
    // Your additional config here
  }
);

You can also enable type-aware rules:

// eslint.config.mjs
import { defineConfig } from 'eslint/config';
import { recommended, typechecked } from 'eslint-config-satya164';

export default defineConfig(
  // The base config
  recommended,

  // Type-aware rules
  typechecked,

  {
    languageOptions: {
      // Needed for type-aware rules
      parserOptions: {
        project: true,
        // Path to folder containing tsconfig.json
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
);

Also see Typed Linting docs for more details.

Using the config requires ESLint 9's flat config format.

To lint your files, you can add the following script to your package.json:

"scripts": {
  "lint": "eslint \"**/*.{js,ts,tsx}\""
}

To show lint errors in your editor, you'll need to configure your editor. To configure VSCode, add the following in settings.json:

"eslint.validate": [
  {
    "language": "javascript",
    "autoFix": true
  },
  {
    "language": "javascriptreact",
    "autoFix": true
  },
  {
    "language": "typescript",
    "autoFix": true
  },
  {
    "language": "typescriptreact",
    "autoFix": true
  }
],

On Mac OS, you can open settings.json file from Code > Preferences > Settings or via the keyboard shortcut ⌘,.

This config sets autoFix to true to automatically fix lint errors on save. You can set it to false if you don't want this behaviour.

Happy linting 🎉