eslint-config

My shared ESLint & Prettier configuration for projects

🙋‍♂️ Made by @abhijithvijayan

Donate: PayPal, Patreon

❤️ it? ⭐️ it on GitHub or Tweet about it.

Table of Contents

• Features
• Installation
• Usage
• Other Configs
• Override
• With VS Code
• Issues
  • 🐛 Bugs
• License

Features

The config includes these plugins by default:

• eslint-plugin-import-x
• eslint-plugin-jsx-a11y
• eslint-plugin-prettier
• eslint-plugin-react
• eslint-plugin-react-hooks
• typescript-eslint
• eslint-plugin-n

Installation

npm install --save-dev @abhijithvijayan/eslint-config

Install the required peer dependencies:

npm install --save-dev eslint eslint-config-prettier eslint-plugin-import-x eslint-plugin-prettier globals prettier

For TypeScript support, also install:

npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser typescript

For React support, also install:

npm install --save-dev eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

For Node.js support, also install:

npm install --save-dev eslint-plugin-n

Usage

This package uses ESLint's flat config format. Create an eslint.config.js (or eslint.config.mjs) file in your project root:

import baseConfig from '@abhijithvijayan/eslint-config';

export default [
  ...baseConfig,
  // your overrides
];

Other Configs

This config also exposes react, node, and typescript configs that I use often.

TypeScript

import typescriptConfig from '@abhijithvijayan/eslint-config/typescript';

export default [
  ...typescriptConfig,
  // your overrides
];

Node.js

It is to be used in combination with the base config (recommended):

import baseConfig from '@abhijithvijayan/eslint-config';
import nodeConfig from '@abhijithvijayan/eslint-config/node';

export default [
  ...baseConfig, // or typescriptConfig
  ...nodeConfig,
  // your overrides
];

React

It is to be used in combination with the base config (recommended):

import baseConfig from '@abhijithvijayan/eslint-config';
import reactConfig from '@abhijithvijayan/eslint-config/react';

export default [
  ...baseConfig, // or typescriptConfig
  ...reactConfig,
  // your overrides
];

Optional

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

  "scripts": {
      "lint": "eslint .",
      "lint:fix": "eslint . --fix"
  },
  

• Add files/directories to ignore in your eslint.config.js:

  export default [
    {
      ignores: ['node_modules', 'dist', '.yarn', '.pnp.js'],
    },
    ...baseConfig,
  ];
  

Override

If you'd like to override eslint or prettier settings, you can add the rules in your eslint.config.js file:

import baseConfig from '@abhijithvijayan/eslint-config';

export default [
  ...baseConfig,
  {
    rules: {
      'no-console': 'off',
      'prettier/prettier': [
        'error',
        {
          bracketSpacing: true,
          printWidth: 120,
          semi: true,
          singleQuote: true,
          tabWidth: 4,
          trailingComma: 'all',
          useTabs: false,
        },
      ],
    },
  },
];

With VS Code

To show lint errors in your editor, you'll need to configure your editor.

1. Install the ESLint package

2. Install the Prettier package

3. Now we need to setup some VS Code settings via Code/File → Preferences → Settings. It's easier to enter these settings while editing the settings.json file, so click the {} icon in the top right corner:

   "editor.formatOnSave": true,
   "[javascript]": {
     "editor.formatOnSave": false
   },
   "[javascriptreact]": {
     "editor.formatOnSave": false
   },
   "[typescript]": {
     "editor.formatOnSave": false
   },
   "[typescriptreact]": {
     "editor.formatOnSave": false
   },
   "editor.codeActionsOnSave": {
       "source.fixAll": "explicit",
       "source.fixAll.eslint": "explicit"
   },
   "prettier.disableLanguages": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
   

Issues

Looking to contribute? Look for the Good First Issue label.

🐛 Bugs

Please file an issue here for bugs, missing documentation, or unexpected behavior.

See Bugs

TypeScript Config

• Shared TypeScript Configuration - @abhijithvijayan/tsconfig

License

MIT © Abhijith Vijayan