@aliheym/eslint-config

This package is inspired by Anthony's ESLint config preset and Airbnb's ESLint config preset.

Important

This config is intended to work only with ESM projects. Your project needs to be ESM too.

Usage

Install

npm i --save-dev eslint @aliheym/eslint-config

Create config file

Create a file named eslint.config.js in the root of your project and add the following:

import aliheym from '@aliheym/eslint-config';

export default aliheym();

Tip

ESLint only detects eslint.config.js as the flag config entry.

Add script for package.json

For example:

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

Editor Integration

VS Code

There is a plugin called VS Code ESLint extension. Install it.

Add the following to your .vscode/settings.json:

{
  // Enable the ESlint flat config support
  "eslint.experimental.useFlatConfig": true,

  // Disable the default formatter, use eslint instead
  "prettier.enable": false,
  "editor.formatOnSave": false,

  // Auto fix
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },

  // Silent the stylistic rules in the editor, but still auto fix them
  "eslint.rules.customizations": [
    { "rule": "@stylistic/*", "severity": "off" },
    { "rule": "*-indent", "severity": "off" },
    { "rule": "*-spacing", "severity": "off" },
    { "rule": "*-spaces", "severity": "off" },
    { "rule": "*-order", "severity": "off" },
    { "rule": "*-dangle", "severity": "off" },
    { "rule": "*-newline", "severity": "off" },
    { "rule": "*quotes", "severity": "off" },
    { "rule": "*semi", "severity": "off" }
  ],

  // Enable eslint for all supported languages
  "eslint.validate": [
    "javascript",
    "typescript",
    "json",
    "jsonc",
    "yaml",
    "toml"
  ]
}

Customization

Normally, you only need to import the @aliheym/eslint-config.

import aliheym from '@aliheym/eslint-config';

export default aliheym();

However, you can configure each integration, for example:

import aliheym from '@aliheym/eslint-config';

export default aliheym({
  // Disable some files and directories
  ignores: [
    '**/.temporary',
  ],

  // Customize the stylistic rules
  stylistic: {
    indent: 4,
    quotes: 'double',
  },

  // Enable Node.js linting
  node: {
    overrides: {
      // ...
    }
  },

  // Disable YAML support
  yaml: false,

  // Override Typescript rules
  typescript: {
    overrides: {
      rules: {
        '@typescript-eslint/no-explicit-any': 'off',
      },
    }
  },
});

Tip

The function has TS types, so you can check them to see all the available options.

You can also pass any number of custom config overrides, for example:

import aliheym from '@aliheym/eslint-config';

export default aliheym(
  {
    // Configures the base config
  },
  // From the second arguments they are ESLint configs
  {
    files: ['**/*.ts'],
    rules: {
      '@stylistic/semi': ['error', 'never'],
    },
  },
  {
    // Without `files`, they are general rules for all files
    rules: {},
  },
);

Optional Rules

This config also provides some optional plugins/rules for extended usage.

eslint-plugin-perfectionist

eslint-plugin-perfectionist allows you to sorted object keys, imports, etc, with auto-fix.

The plugin is installed but no rules are enabled by default.

It's recommended to opt-in on each file individually using configuration comments.

/* eslint perfectionist/sort-objects: "error" */
const objectWantedToSort = {
  a: 2,
  b: 1,
  c: 3,
};
/* eslint perfectionist/sort-objects: "off" */

Type Aware Rules

You can optionally enable the type aware rules by passing tsconfigPath to the typescript config:

import aliheym from '@aliheym/eslint-config';

export default aliheym({
  typescript: {
    tsconfigPath: 'tsconfig.json',
  },
});

Lint Staged

You can use lint-staged to lint and auto-fix before every commit. Install it:

npm i -D lint-staged

And then change your package.json:

{
  "lint-staged": {
    "*": "eslint --fix"
  }
}

You can combine it with git hooks. For more details, see the husky or simple-git-hooks.

ESlint Config Viewer

There are a useful tool, that you can use to view what rules are enabled in your project and apply them to what files - eslint-flat-config-viewer.

Go to your project root (the same directory where your eslint.config.js is) and run:

npx eslint-flat-config-viewer