@jsse/eslint-config

Eslint config

• eslint flat config
• double quotes + semi
• react, react-hooks & react-refresh, OH MY!
• no vue (I don't use vue (as of 2023-10-12) don't want/need the vue plugins/parsers/etc)
• assumes you're using prettier
• Based on:
  • My old, very long, and very messy (non-flat) eslint config (.eslintrc.js)
  • antfu eslint-config eslint-config
  • sxzz eslint-config eslint-config

Usage

Install

pnpm i -D eslint @jsse/eslint-config

Create config file

This package is ESM-only. Use eslint.config.js when your package has "type": "module", or eslint.config.mjs otherwise.

// eslint.config.js
import jsse from "@jsse/eslint-config";

export default jsse({
  // options
  // typescript: {
  //     tsconfig: "tsconfig.json", // or ["tsconfig.json", "tsconfig.eslint.json", ...]
  // },
  // react: true
});

Note that .eslintignore no longer works in Flat config, see customization for more details.

Add script for package.json

For example:

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

Type Aware Rules

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

// eslint.config.js
import jsse from "@jsse/eslint-config";

export default jsse({
  typescript: {
    presets: "recommended-type-checked",
    tsconfig: "tsconfig.json", // or ["tsconfig.json", "tsconfig.eslint.json", ...]
  },
});

Common Options

| Option | Default | Notes | | ----------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | typescript | auto-detect | Enabled when typescript is installed. Accepts { presets, tsconfig, overrides }. Passing { tsconfig } enables type-aware rules unless typeAware: false is set. | | typeAware | false | Explicit override for type-aware TypeScript rules. | | react | false | Enables React rules; accepts hooks, refresh, eslintReactPreset, and overrides. TS/TSX parsing comes entirely from typescript/tsconfig. | | reactRefresh | true when react is enabled | Legacy top-level alias. Prefer react.refresh: false to disable React Refresh rules. | | antfu | true | Enables eslint-plugin-antfu; accepts topLevelFunction and overrides. | | demorgan | true | Enables eslint-plugin-de-morgan; accepts overrides. | | e18e | true | Enables @e18e/eslint-plugin. | | jsdoc | true | Enables eslint-plugin-jsdoc; accepts overrides. | | n | true | Enables Node.js rules from eslint-plugin-n; accepts overrides. | | nodeTest | false | Enables eslint-node-test (Node.js built-in test runner rules); accepts { preset, overrides }. | | unicorn | true | Enables eslint-plugin-unicorn; accepts { preset, overrides }. | | vitest | auto-detect | Enabled when vitest is installed. Enables @vitest/eslint-plugin; accepts overrides. | | prettier | true | Disables known ESLint/Prettier conflicts. This does not run Prettier. | | stylistic | true | Enables selected @stylistic rules. Supports indent, quotes, and jsx. | | jsonc | true | Enables JSON/JSONC rules. | | markdown | false | Enables Markdown processing and fenced-code linting. | | yaml | false | Enables YAML rules. | | sortImports | false | Enables import/export sorting via Perfectionist. | | sortPackageJson | true | Requires jsonc to be enabled. | | sortTsconfig | true | Requires jsonc; accepts extendTsconfigGlobs. | | tailwind | false | Deprecated. Passing it only prints a warning. |

Rule overrides belong to the corresponding config option:

jsse({
  javascript: { overrides: { "no-console": "warn" } },
  typescript: { overrides: { "@typescript-eslint/no-explicit-any": "off" } },
  jsonc: { overrides: { "jsonc/no-comments": "off" } },
  unicorn: { overrides: { "unicorn/no-null": "warn" } },
});

TypeScript Presets

The typescript.presets option selects the upstream typescript-eslint preset rules before jsse's local TypeScript rules and user overrides are applied.

jsse({
  typescript: {
    presets: ["strict-type-checked", "stylistic-type-checked"],
    tsconfig: "tsconfig.json",
  },
});

Preset names match typescript-eslint's kebab-case config names: recommended, recommended-type-checked, strict, strict-type-checked, stylistic, stylistic-type-checked, all, base, disable-type-checked, eslint-recommended, and the *-only variants.

The older typescript.strict option is still supported for compatibility, but new configs should use presets.

@eslint-react Preset

The react.eslintReactPreset option selects the upstream @eslint-react/eslint-plugin preset rules before user overrides are applied. It's named eslintReactPreset rather than preset because @eslint-react is a separate plugin from eslint-plugin-react-hooks/eslint-plugin-react-refresh (the hooks/refresh options), not "React config as a whole." It defaults to "recommended".

jsse({ react: { eslintReactPreset: "strict-type-checked" } });

By default, React rules are scoped to source files. Use react.files to override that set:

jsse({ react: { files: ["app/**/*.{jsx,tsx}"] } });

Preset names match @eslint-react's kebab-case config names: recommended, recommended-typescript, recommended-type-checked, strict, strict-typescript, and strict-type-checked. Unlike typescript.presets, this only accepts a single preset — the @eslint-react presets are mutually exclusive points on one severity/TS-awareness scale rather than composable layers (strict is already a superset of recommended's rules).

React Hooks & React Refresh Presets

react.hooks and react.refresh can each be false (disable), true (enable with the default preset), or one of that plugin's own preset names:

jsse({
  react: {
    hooks: "recommended-latest", // eslint-plugin-react-hooks; default
    refresh: "vite", // eslint-plugin-react-refresh; default is "recommended"
  },
});

eslint-plugin-react-hooks ships recommended and recommended-latest. eslint-plugin-react-refresh ships recommended, vite, and next — only recommended and vite are supported here; next's allowExportNames allowlist is Next.js-specific and out of scope for this config.

Thanks

• antfu and sxzz for their eslint-configs which this is based on
• Younger me for being more willing to spend time configuring eslint
• My fans for being my fans

FAQ

Why use prettier?

I DO NOT CARE ANYMORE... My current stance on formatters is pick one that is stable, and use it, preferably with the default config.

A younger me (jessekrubin) would take the time to configure a formatter/linter/code style to my liking, but I really don't care anymore...

License

MIT License © 2023-PRESENT jesse rubin

Changelog (NOTABLE CHANGES)