diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml index 524ca3a..08f9d0a 100644 --- a/.github/ISSUE_TEMPLATE/bug-report.yml +++ b/.github/ISSUE_TEMPLATE/bug-report.yml @@ -42,10 +42,11 @@ body: label: Which configuration is this related to? options: - javascript - - typeScript + - typescript - node - angular - ngrx + - react - graphql - jest - vitest diff --git a/.github/ISSUE_TEMPLATE/change-request.yml b/.github/ISSUE_TEMPLATE/change-request.yml index 0cb3945..58fb73f 100644 --- a/.github/ISSUE_TEMPLATE/change-request.yml +++ b/.github/ISSUE_TEMPLATE/change-request.yml @@ -40,10 +40,11 @@ body: label: Which configuration is this related to? options: - javascript - - typeScript + - typescript - node - angular - ngrx + - react - graphql - jest - vitest diff --git a/.github/ISSUE_TEMPLATE/feature-request.yml b/.github/ISSUE_TEMPLATE/feature-request.yml index b6edd74..4a2a19c 100644 --- a/.github/ISSUE_TEMPLATE/feature-request.yml +++ b/.github/ISSUE_TEMPLATE/feature-request.yml @@ -40,10 +40,11 @@ body: label: Which configuration is this related to? options: - javascript - - typeScript + - typescript - node - angular - ngrx + - react - graphql - jest - vitest diff --git a/README.md b/README.md index 75cb59f..eccc0e1 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,7 @@ Recommended ESLint presets by [Code PushUp](https://github.com/code-pushup/cli/t | ![nodejs](./docs/icons/material/nodejs.png) | [node](./docs/node.md) | Config for **Node.js** projects. | | ![angular](./docs/icons/material/angular.png) | [angular](./docs/angular.md) | Config for **Angular** projects. | | ![ngrx](./docs/icons/other/ngrx.png) | [ngrx](./docs/ngrx.md) | Config for **Angular** projects using **NgRx** library. | +| ![react](./docs/icons/material/react.png) | [react](./docs/react.md) | Config for **React** projects. | | ![graphql](./docs/icons/material/graphql.png) | [graphql](./docs/graphql.md) | Config for **GraphQL servers** implemented in Node.js. | | ![jest](./docs/icons/material/jest.png) | [jest](./docs/jest.md) | Config for projects using **Jest** for testing. | | ![vitest](./docs/icons/material/vitest.png) | [vitest](./docs/vitest.md) | Config for projects using **Vitest** for testing. | @@ -84,8 +85,11 @@ All peer dependencies used by `@code-pushup/eslint-config` are listed below, alo | ![cypress](./docs/icons/material/cypress.png) | [eslint-plugin-cypress](https://www.npmjs.com/package/eslint-plugin-cypress) | `>=3.3.0` | | | ![jest](./docs/icons/material/jest.png) | [eslint-plugin-jest](https://www.npmjs.com/package/eslint-plugin-jest) | `^28.8.0` | | | ![test](./docs/icons/icons8/test.png) | [eslint-plugin-jest-formatting](https://www.npmjs.com/package/eslint-plugin-jest-formatting) | `^3.0.0` | | +| ![accessibility](./docs/icons/icons8/accessibility.png) | [eslint-plugin-jsx-a11y](https://www.npmjs.com/package/eslint-plugin-jsx-a11y) | `^6.10.0` | | | ![nodejs](./docs/icons/material/nodejs.png) | [eslint-plugin-n](https://www.npmjs.com/package/eslint-plugin-n) | `>=17.0.0` | | | ![playwright](./docs/icons/material/playwright.png) | [eslint-plugin-playwright](https://www.npmjs.com/package/eslint-plugin-playwright) | `^2.1.0` | | +| ![react](./docs/icons/material/react.png) | [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react) | `^7.36.0` | | +| ![react_ts](./docs/icons/material/react_ts.png) | [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks) | `>=5.0.0` | | | ![rxjs](./docs/icons/other/rxjs.png) | [eslint-plugin-rxjs-x](https://www.npmjs.com/package/eslint-plugin-rxjs-x) | `>=0.6.0` | | | ![storybook](./docs/icons/material/storybook.png) | [eslint-plugin-storybook](https://www.npmjs.com/package/eslint-plugin-storybook) | `>=0.10.0` | | | ![testing-library](./docs/icons/other/testing-library.png) | [eslint-plugin-testing-library](https://www.npmjs.com/package/eslint-plugin-testing-library) | `^7.1.1` | | diff --git a/docs/icons/icons8/accessibility.png b/docs/icons/icons8/accessibility.png new file mode 100644 index 0000000..2c78241 Binary files /dev/null and b/docs/icons/icons8/accessibility.png differ diff --git a/docs/react.md b/docs/react.md new file mode 100644 index 0000000..6ecfdd0 --- /dev/null +++ b/docs/react.md @@ -0,0 +1,136 @@ +# `react` config + +Config for **React** projects. + +## ๐Ÿ—๏ธ Setup + +1. If you haven't already, make sure to [install `@code-pushup/eslint-config` and its required peer dependencies](../README.md#๐Ÿ—๏ธ-setup). +2. Since this plugin requires additional peer dependencies, you have to install them as well: + + ```sh + npm install -D eslint-plugin-{jsx-a11y,react,react-hooks} + ``` + +3. Add to your `eslint.config.js` file: + + ```js + import react from '@code-pushup/eslint-config/react.js'; + import tseslint from 'typescript-eslint'; + + export default tseslint.config(...react); + ``` + +## ๐Ÿ“ Rules (101) + +> ๐Ÿ”ง Automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/user-guide/command-line-interface#--fix).
๐Ÿ’ก Manually fixable by [editor suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
๐Ÿงช๐Ÿšซ Disabled for [test files](../README.md#๐Ÿงช-test-overrides).
๐Ÿงชโš ๏ธ Severity lessened to warning for [test files](../README.md#๐Ÿงช-test-overrides). + +### ๐Ÿšจ Errors (72) + +| Plugin | Rule | Options | Autofix | Overrides | +| :------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-----: | :-------: | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [alt-text](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/alt-text.md)
Enforce all elements that require alternative text have meaningful information to relay back to end user. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [anchor-has-content](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/anchor-has-content.md)
Enforce all anchors to contain accessible content. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [anchor-is-valid](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/anchor-is-valid.md)
Enforce all anchors are valid, navigable elements. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [aria-activedescendant-has-tabindex](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/aria-activedescendant-has-tabindex.md)
Enforce elements with aria-activedescendant are tabbable. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [aria-props](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/aria-props.md)
Enforce all `aria-*` props are valid. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [aria-proptypes](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/aria-proptypes.md)
Enforce ARIA state and property values are valid. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [aria-role](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/aria-role.md)
Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [aria-unsupported-elements](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/aria-unsupported-elements.md)
Enforce that elements that do not support ARIA roles, states, and properties do not have those attributes. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [autocomplete-valid](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/autocomplete-valid.md)
Enforce that autocomplete attributes are used correctly. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [click-events-have-key-events](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/click-events-have-key-events.md)
Enforce a clickable non-interactive element has at least one keyboard event listener. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [heading-has-content](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/heading-has-content.md)
Enforce heading (`h1`, `h2`, etc) elements contain accessible content. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [html-has-lang](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/html-has-lang.md)
Enforce `` element has `lang` prop. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [iframe-has-title](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/iframe-has-title.md)
Enforce iframe elements have a title attribute. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [img-redundant-alt](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/img-redundant-alt.md)
Enforce `` alt prop does not contain the word "image", "picture", or "photo". | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [interactive-supports-focus](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/interactive-supports-focus.md)
Enforce that elements with interactive handlers like `onClick` must be focusable. |
tabbable: button, checkbox,...
{
  "tabbable": [
    "button",
    "checkbox",
    "link",
    "searchbox",
    "spinbutton",
    "switch",
    "textbox"
  ]
}
| | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [label-has-associated-control](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/label-has-associated-control.md)
Enforce that a `label` tag has a text label and an associated control. | | | | +| [![jsx-a11y](./icons/icons8/accessibility.png)](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme) | [media-has-caption](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/media-has-caption.md)
Enforces that `