@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

Also can extends (if it is applicable)

• eslint-plugin-react — recommended & jsx-runtime
• @next/eslint-plugin-next — recommended & core-web-vitals
• eslint-config-next
• eslint-plugin-mobx — recommended
• eslint-plugin-storybook — recommended & csf-strict

(We also use eslint-plugin-unicorn and eslint-plugin-decorator-position but only special rules, without recommended config)

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 weel-tested).

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

3. (for React users) The package is intended for use with React New JSX Transform.

Installation

You'll first need to install ESLint and peer deps:

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

Next, also install the packages that suit your needs.

npm i -D eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y

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

npm i -D eslint-plugin-mobx

npm i -D eslint-plugin-storybook

Next, install @dartess/eslint-plugin itself.

npm i -D @dartess/eslint-plugin

Usage configs

Shared config based on eslint-config-airbnb, eslint-config-airbnb-typescript, eslint-plugin-react/recommended, eslint-plugin-react/jsx-runtime.

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

import dartessEslintPluginRecommended from '@dartess/eslint-plugin/recommended';

// 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 all `.gitignore` files
  
  {
    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,
]

Next steps

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're using Mobx with legacy decorators, you have to enable rule mobx/missing-make-observable manually.

Formatters

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

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).

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 | ✅ | 🔧 | 💡 | |:-----------------------------------------------------------------------------------------------------------|:------------------------------------------------------------------------------|:--|:---|:---| | strict-observable-components-declaration | Wrapping components in observer must comply with the regulations. | ✅ | | | | require-observer | Components using the stores must be wrapped in an observer | ✅ | 🔧 | | | prevent-mixing-external-and-internal-classes | Prevent mixing of outer and inner classes to avoid dependency on style order. | | | | | jsx-no-text-as-child | JSX elements should not have text without translation | | | | | stories-export-meta | Storybook's Meta should be typed | ✅ | | | | stories-export-typed | Storybook's Stories should be typed | ✅ | | | | max-parent-import-depth | Limit relative imports to a maximum parent depth. | ✅ | | | | ts-named-tuple-elements | Enforce (or forbid) named tuple elements | ✅ | | |

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).