@component-hook/eslint-plugin

@component-hook/eslint-plugin

A opinionated ESLint config preset for JavaScript, TypeScript, Vue3, React, Prettier and oxfmt.

Features

• Support TypeScript, Vue3 and React out-of-box.
• Format with Prettier or oxfmt.
• Ignores common files like dist, node_modules, coverage, and files in .gitignore.
• Various built-in configurations can be referenced according to respective needs.
• Reasonable defaults, best practices, and just a few lines of configuration.
• Prefer oxlint? @component-hook/oxlint-config is generated from this preset.

Documentation

For detailed documentation and usage examples, please visit: Official Docs.

Installation

# Using npm
$ npm install @component-hook/eslint-plugin --save-dev

# Using yarn
$ yarn add @component-hook/eslint-plugin --dev

# Using pnpm
$ pnpm install @component-hook/eslint-plugin --save-dev

Compatibility Note:

Require ESLint >= 9.0.0

This package is ESM only because several bundled plugins are ESM only. Write your config as eslint.config.js in a "type": "module" project or as eslint.config.mjs. On Node.js 20.19+ / 22.12+ require() still works through require(esm), and the plugin is exposed on the default property.

Basic Usage

import componentHookPlugin from '@component-hook/eslint-plugin';

export default [
  ...componentHookPlugin.configs.basic,
  ...componentHookPlugin.configs.vue,
  componentHookPlugin.configs.prettier,
  ...componentHookPlugin.configs.sonarjs,
  componentHookPlugin.configs.security,
  ...componentHookPlugin.configs.markdown,
  {
    files: ['**/*.test.[jt]s?(x)'],
    ...componentHookPlugin.configs['testing-library/vue'],
  },
  {
    files: ['**/e2e/**/*.spec.[jt]s?(x)'],
    ...componentHookPlugin.configs.playwright,
  },
  // your custom config
];

See basic and ignores for more details.

React Presets Usage

Includes basic, react, markdown, prettier, sonarjs, security configs.

import { reactPreset } from '@component-hook/eslint-plugin';

export default reactPreset;

Vue Presets Usage

Includes basic, vue, markdown, prettier, sonarjs, security configs.

import { vuePreset } from '@component-hook/eslint-plugin';

export default vuePreset;

Formatting with oxfmt

Use configs.oxfmt instead of configs.prettier to format with oxfmt. It discovers .oxfmtrc.json (or other oxfmt config files) the same way as the oxfmt CLI, and turns off the stylistic rules that conflict with the formatter.

oxfmt also sorts top-level package.json keys by default (sortPackageJson), so the preset no longer orders them itself; it still sorts nested fields oxfmt leaves alone, such as exports conditions and dependency maps. If you stay on configs.prettier and still want package.json sorted, add prettier-plugin-packagejson, which uses the same sort-package-json order as oxfmt.

oxfmt >= 0.71.0 is a peer dependency. Most package managers install it automatically; otherwise add it yourself:

$ pnpm add -D oxfmt

import componentHookPlugin from '@component-hook/eslint-plugin';

export default [
  ...componentHookPlugin.configs.basic,
  ...componentHookPlugin.configs.vue,
  componentHookPlugin.configs.oxfmt,
  // your custom config
];

Configs

Reference eslint plugin

• eslint-recommended
• typescript-eslint
• eslint-plugin-eslint-comments
• eslint-plugin-import
• eslint-plugin-unicorn
• eslint-plugin-regexp/flat/recommended
• eslint-plugin-de-morgan
• eslint-plugin-jsdoc
• eslint-plugin-jsonc
• eslint-plugin-perfectionist
• eslint-plugin-yml
• eslint-plugin-prettier/recommended
• eslint-plugin-oxfmt
• eslint-plugin-react/recommended
• eslint-plugin-react-hooks/recommended
• eslint-plugin-jsx-a11y/recommended
• eslint-plugin-vue
• @eslint/markdown
• eslint-plugin-sonarjs/recommended
• eslint-plugin-security/recommended
• eslint-plugin-testing-library/dom
• eslint-plugin-testing-library/vue
• eslint-plugin-testing-library/react
• eslint-plugin-testing-library/angular
• eslint-plugin-testing-library/marko
• eslint-plugin-playwright/flat/recommended