@tofrankie/eslint

Shared ESLint configuration built on @antfu/eslint-config.

[!IMPORTANT] Before 1.0.0, releases may include breaking changes. Read the CHANGELOG before upgrading.

Quick Start

[!NOTE]

• Node.js: 22.0.0
• ESLint: 10.2.1
• TypeScript: 6.0.3

Install dependencies:

$ pnpm add eslint @tofrankie/eslint -D

ESM (eslint.config.mjs):

import { defineConfig } from '@tofrankie/eslint'

export default defineConfig()

CJS (eslint.config.cjs):

const { defineConfig } = require('@tofrankie/eslint')

module.exports = defineConfig()

Configuration

defineConfig(options?, ...configs) follows the same shape as @antfu/eslint-config.

• The first argument is primarily compatible with the options from @antfu/eslint-config
  • This package currently extends one additional package-specific option: miniprogram
• Extra flat config objects can be passed as the remaining arguments.

import { defineConfig } from '@tofrankie/eslint'

export default defineConfig(
  {
    typescript: true,
    react: true,
  },
  {
    // extra flat config object
  }
)

• miniprogram is off by default. When enabled, it applies the recommended config from @tofrankie/eslint-plugin-miniprogram.

import { defineConfig } from '@tofrankie/eslint'

export default defineConfig({
  miniprogram: true,
})

It also supports overrides in the same style as antfu integrations:

import { defineConfig } from '@tofrankie/eslint'

export default defineConfig({
  miniprogram: {
    overrides: {
      'miniprogram/padding-line-between-members': 'off',
    },
  },
})

[!NOTE] In most cases, you only need to install eslint and @tofrankie/eslint. Unlike using @antfu/eslint-config directly, you usually do not need to install extra ESLint plugins yourself when enabling built-in options in this package.

If you want to override some built-in rules, you can usually do it in two ways:

• Use the corresponding option's overrides Rules Overrides
• Add an extra flat config object and specify the file scope you want

import { defineConfig } from '@tofrankie/eslint'

export default defineConfig({
  vue: {
    overrides: {
      'vue/operator-linebreak': ['error', 'before'],
    },
  },
  typescript: {
    overrides: {
      'ts/consistent-type-definitions': ['error', 'interface'],
    },
  },
})

import { defineConfig } from '@tofrankie/eslint'

export default defineConfig(
  {
    typescript: true,
  },
  {
    files: ['scripts/**/*.js'],
    rules: {
      'no-console': 'off',
    },
  }
)

TypeScript

1. Enable TypeScript linting without type-aware rules

export default defineConfig({
  typescript: true,
})

2. Enable type-aware rules with tsconfigPath Type Aware Rules

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

3. Override rules with overrides or overridesTypeAware

export default defineConfig({
  typescript: {
    overrides: {
      'ts/consistent-type-definitions': ['error', 'interface'],
    },
    overridesTypeAware: {
      'ts/no-floating-promises': 'error',
    },
  },
})

4. Disable TypeScript linting explicitly

export default defineConfig({
  typescript: false,
})

When typescript option is not set, behavior follows antfu's default detection.

Formatters

@antfu/eslint-config can wire formatters (CSS, HTML, Markdown, GraphQL, Astro, etc.). This preset disables those integrations by default so ESLint does not duplicate work when you already use Prettier (and optionally Stylelint). Defaults still include a formatters.prettierOptions base aligned with @tofrankie/prettier; it applies once you turn formatters on.

Behavior:

• formatters: false — all formatter integrations off
• formatters: true — enables the same subset as antfu's boolean shortcut (css, html, markdown, graphql), merged with the built-in prettierOptions base
• formatters: { ... } — deep-merged with the preset defaults (individual flags off until you set them)

export default defineConfig({
  formatters: {
    html: true,
    markdown: true,
    prettierOptions: { printWidth: 120 },
  },
})

WeChat miniprogram

MINIPROGRAM_LANGUAGE_OPTIONS exposes common miniprogram globals for an extra flat config object. Scope it with files so globals such as wx only apply to your miniprogram source files:

import { defineConfig, MINIPROGRAM_LANGUAGE_OPTIONS } from '@tofrankie/eslint'

export default defineConfig(
  { ignores: ['project.config.json', 'project.private.config.json'], miniprogram: true },
  {
    files: ['miniprogram/**/*.{js,ts}'],
    languageOptions: MINIPROGRAM_LANGUAGE_OPTIONS,
  }
)

Enable miniprogram option when you want the plugin's recommended rules. Use MINIPROGRAM_LANGUAGE_OPTIONS when you want miniprogram globals in a scoped file range. In many projects you may want both.

Raycast

If you are developing a Raycast extension, you can use @tofrankie/eslint/raycast to sort package.json.

import { defineConfig } from 'eslint/config'
import raycastConfig from '@raycast/eslint-config'
import packageJsonSortConfig from '@tofrankie/eslint/raycast'

export default defineConfig([...raycastConfig, packageJsonSortConfig])

This config already includes files: ['**/package.json'], so it only applies to package.json.

Acknowledgements

Thanks to these referenced packages:

• @antfu/eslint-config

License

MIT License © Frankie