@dartess/eslint-plugin

A set of configs and rules for various TypeScript projects. Based on outdated or deprecated configs eslint-config-airbnb and eslint-config-airbnb-typescript. Also extends

• @eslint/js — recommended
• typescript-eslint — strictTypeChecked & stylisticTypeChecked
• eslint-plugin-import-x — recommended & typescript
• @eslint-community/eslint-plugin-eslint-comments — recommended
• eslint-plugin-de-morgan — recommended
• eslint-plugin-complete — recommended

Also can extends (if it is applicable)

• @eslint-react/eslint-plugin — strict-type-checked
• eslint-plugin-react-hooks — recommended
• @next/eslint-plugin-next — recommended & core-web-vitals
• eslint-config-next
• eslint-plugin-mobx — recommended
• eslint-plugin-storybook — recommended & csf-strict

Note: all recommended warnings are converted to errors because warnings are useless.

All of it pinched with extra configs, setups and extra rules. Just take it and use it!

Notes

1. The package is intended for use with TypeScript (it'll be useful for plain JS, but it hasn't been well-tested).

2. The package is intended for use only with the flat eslint config.

3. Compatible with both eslint@9 and eslint@10. If you're using it with eslint@9, please, also install @eslint/js@9

4. (for React users) The package is intended for use with React New JSX Transform and React 19+.

Installation

Install ESLint, required peer deps and the plugin itself:

npm i -D eslint \
  eslint-plugin-import-x \
  eslint-import-resolver-typescript \
  eslint-plugin-unicorn \
  eslint-plugin-complete \
  eslint-plugin-decorator-position \
  eslint-plugin-de-morgan \
  eslint-plugin-perfectionist \
  typescript-eslint \
  @eslint-community/eslint-plugin-eslint-comments \
  @dartess/eslint-plugin

Next, also install the packages that suit your needs.

npm i -D eslint-plugin-react-hooks \
  eslint-plugin-jsx-a11y-x \
  @eslint-react/eslint-plugin \
  @stylistic/eslint-plugin

npm i -D @next/eslint-plugin-next

npm i -D eslint-plugin-mobx

npm i -D eslint-plugin-storybook

Usage configs

Edit or create eslint.config.ts (or eslint.config.mts). You probably have to install jiti for it.

import type { TSESLint } from '@typescript-eslint/utils';
import dartessEslintPluginRecommended from '@dartess/eslint-plugin/recommended';
import dartessEslintPluginRecommendedPostFormat from '@dartess/eslint-plugin/recommended-post-format';

// if `react` is used
import dartessEslintPluginReact from '@dartess/eslint-plugin/react';
// if `next.js` is used
import dartessEslintPluginNext from '@dartess/eslint-plugin/next';
// if `mobx` is used
import dartessEslintPluginMobx from '@dartess/eslint-plugin/mobx';
// if `storybook` is used
import dartessEslintPluginStorybook from '@dartess/eslint-plugin/storybook';

import { parseGitIgnore } from '@dartess/eslint-plugin/utils';

export default [
  ...parseGitIgnore(), // (optional) the easiest way to ignore files from `.gitignore` 
  
  {
    languageOptions: {
      parserOptions: {
        projectService: true,
      },
    },
  },
  
  ...dartessEslintPluginRecommended,
  
  // if `react` is used
  ...dartessEslintPluginReact,
  // if `next.js` is used
  ...dartessEslintPluginNext,
  // if `mobx` is used
  ...dartessEslintPluginMobx,
  // if `storybook` is used
  ...dartessEslintPluginStorybook,
  
  // <-- Put here your formatters congifs -->
  // @see `Fine Tuning` -> `Formatters` section below 
  
  ...dartessEslintPluginRecommendedPostFormat,
] satisfies TSESLint.FlatConfig.ConfigArray;

Fine Tuning

Formatting tools

If you're want to (and you should to) use formatting tools, you need to additionally install and setup something else.

Replace the <-- Put here your formatters congifs --> comment with the required code, beacuse we have a special config that fine-tunes formatter behavior and should be applied afterward.

In case you for some reason don't want to use any formatting tools, you still have to put ...dartessEslintPluginRecommendedPostFormat in any place of your config.

dprint

Use eslint-plugin-format with rule format/dprint for running dprint as eslint rule (you probably will want to add eslint-config-prettier for disabling unnecessary rules).

Biome

Use eslint-config-biome for disabling unnecessary rules.

Oxlint

Use eslint-plugin-oxlint for disabling unnecessary rules.

Prettier (Old School)

• Use eslint-config-prettier for disabling unnecessary rules.
• Or use eslint-plugin-prettier for running prettier as eslint rule.
• Or use eslint-plugin-format with rule format/prettier for running prettier as eslint rule (you probably will want to add eslint-config-prettier for disabling unnecessary rules).

(for React users)

If you're using React, you also probably will want to add eslint-plugin-react-refresh. This plugin requires manual setup for you build tools.

If you care about accessibility, a linter isn't enough to detect runtime issues. Use it in combination with @axe-core/react.

(for Mobx users)

If you're using Mobx with legacy decorators, you have to enable rule mobx/missing-make-observable manually.

if you're using Mobx stores with your custom hooks, set settings.mobx.storeHooks by docs.

Supported Rules

Each rule has emojis denoting:

• ✅ if it belongs to the one of recommended configuration
• 🔧 if some problems reported by the rule are automatically fixable by the --fix command line option
• 💡 if some problems reported by the rule are manually fixable by editor suggestions

| Name | Description | ✅ | 🔧 | 💡 | |:-------------------------------------------------------------------------------------------------------------|:------------------------------------------------------------------------------|:--|:---|:---| | imports | config: recommended | | | | | imports-max-parent-depth | Limit relative imports to a maximum parent depth. | ✅ | | | | TypeScript | config: recommended | | | | | ts-named-tuple-elements | Enforce (or forbid) named tuple elements | ✅ | | | | React | config: react | | | | | jsx-no-cross-context-classes | Prevent mixing of outer and inner classes to avoid dependency on style order. | | | | | no-props-with-children-type | Disallow the use of PropsWithChildren utility type in favor explicit types. | ✅ | | | | Storybook | config: storybook | | | | | stories-export-meta | Storybook's Meta should be typed | ✅ | | | | stories-export-typed | Storybook's Stories should be typed | ✅ | | | | MobX | config: mobx | | | | | mobx-strict-observable-components-declaration | Wrapping components in observer must comply with the regulations. | ✅ | | | | mobx-require-observer | Components using the stores must be wrapped in an observer | ✅ | 🔧 | | | mobx-sync-autorun | Enforce synchronous autorun callback | ✅ | | | | mobx-sync-action | Enforce synchronous actions | ✅ | | | | mobx-no-action-bound | Enforce using arrow functions for binging this to actions | ✅ | | | | mobx-no-flow | Disallow the use of MobX flow in favor of async/await with actions | ✅ | | |

Additional helpers

parseGitIgnore

Includes patterns from .gitignore files (or any files with gitignore-style syntax) into an ESLint flat config.

function parseGitIgnore(paths?: string[]): TSESLint.FlatConfig.Config[]

Where paths is ['.gitignore'] by default.

Example

export default defineConfig([
  ...parseGitIgnore(), // or parseGitIgnore(['.gitignore', 'nested/extra/.gitignore']) 
  // ...other configs
]);

Paths are resolved relative to process.cwd().

Patterns are interpreted relative to the ignore file's location (git-style), so build/ in packages/lib/.gitignore becomes packages/lib/build/, not the root build/.

Compatibility

Works with any ESLint version supporting flat config (9.x and 10.x). Built on @eslint/config-helpers, which has no dependency on ESLint internals.

Code Reuse Policy

eslint-config-airbnb

The package has a huge number of dependencies and will not be updated for a very long time; instead, all useful code has been copied. Configs are now considered "ours" (but remember the copyright) and can be edited.

eslint-config-airbnb-typescript

Also as eslint-config-airbnb but also deprecated.

@next/eslint-plugin-next and eslint-config-next

One of the packages does not support flat config. It may be removed from the repository if support appears (which is unlikely in the next many years, however).