@component-hook/eslint-plugin

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

Features

• Support TypeScript, Vue3 and React out-of-box.
• Format with Prettier.
• 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.

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

Require ESLint >= 9.0.0

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: ['**/__tests__/unit/**/*.test.[jt]s?(x)'],
    ...componentHookPlugin.configs['testing-library/vue'],
  },
  {
    files: ['**/__tests__/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;

Configs

Name	Type	Reference
basic	Linter.Config[]	eslint-recommended, typescript-eslint, eslint-plugin-eslint-comments, eslint-plugin-import, eslint-plugin-unicorn, eslint-plugin-regexp, eslint-plugin-de-morgan
vue	Linter.Config[]	eslint-plugin-vue, typescript-eslint
react	Linter.Config[]	eslint-plugin-react/recommended, eslint-plugin-react-hooks/recommended, eslint-plugin-jsx-a11y/recommended
markdown	Linter.Config[]	eslint-plugin-markdown/recommended
prettier	Linter.Config	eslint-plugin-prettier/recommended
sonarjs	Linter.Config[]	eslint-plugin-sonarjs/recommended
security	Linter.Config	eslint-plugin-security/recommended
playwright	Linter.Config	eslint-plugin-playwright/flat/recommended
testing-library/dom	Linter.Config	eslint-plugin-testing-library/dom
testing-library/vue	Linter.Config	eslint-plugin-testing-library/vue
testing-library/react	Linter.Config	eslint-plugin-testing-library/react
testing-library/angular	Linter.Config	eslint-plugin-testing-library/angular
testing-library/marko	Linter.Config	eslint-plugin-testing-library/marko

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-prettier/recommended
• eslint-plugin-react/recommended
• eslint-plugin-react-hooks/recommended
• eslint-plugin-jsx-a11y/recommended
• eslint-plugin-vue
• eslint-plugin-markdown/recommended
• 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