@component-hook/eslint-plugin

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

Features

• Support TypeScript, Vue and React out-of-box.
• Built-in Markdown, Prettier, Sonarjs, Security, Playwright and Testing-library configs can be referenced for respective needs.
• Format with Prettier.
• Ignores common files like dist, node_modules, coverage, and files in .gitignore.
• Reasonable defaults, best practices, and just a few lines of configuration.

Installation

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

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

# or use 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.markdown,
  componentHookPlugin.configs.prettier,
  ...componentHookPlugin.configs.sonarjs,
  componentHookPlugin.configs.security,
  {
    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.

Presets Usage

import {
  reactPreset, // Includes basic, react, markdown, prettier, sonarjs, security configs
} from '@component-hook/eslint-plugin';

export default reactPreset;

import {
  vuePreset, // Includes basic, vue, markdown, prettier, sonarjs, security configs
} from '@component-hook/eslint-plugin';

export default vuePreset;

Configs

Name	Type	Reference
basic	Linter.Config[]	eslint-recommended, typescript-eslint, eslint-plugin-import, eslint-plugin-regexp
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, eslint-config-prettier
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-import
• eslint-plugin-regexp/flat/recommended
• eslint-plugin-prettier/recommended
• eslint-config-prettier
• 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