1 | # eslint-config-react-app
|
2 |
|
3 | This package includes the shareable ESLint configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
|
4 | Please refer to its documentation:
|
5 |
|
6 | - [Getting Started](https://github.com/facebook/create-react-app/blob/master/README.md#getting-started) – How to create a new app.
|
7 | - [User Guide](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.
|
8 |
|
9 | ## Usage in Create React App Projects
|
10 |
|
11 | The easiest way to use this configuration is with [Create React App](https://github.com/facebook/create-react-app), which includes it by default.
|
12 |
|
13 | **You don’t need to install it separately in Create React App projects.**
|
14 |
|
15 | ## Usage Outside of Create React App
|
16 |
|
17 | If you want to use this ESLint configuration in a project not built with Create React App, you can install it with following steps.
|
18 |
|
19 | First, install this package, ESLint and the necessary plugins.
|
20 |
|
21 | ```sh
|
22 | npm install --save-dev eslint-config-react-app babel-eslint@9.x eslint@5.x eslint-plugin-flowtype@2.x eslint-plugin-import@2.x eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x
|
23 | ```
|
24 |
|
25 | Then create a file named `.eslintrc` with following contents in the root folder of your project:
|
26 |
|
27 | ```js
|
28 | {
|
29 | "extends": "react-app"
|
30 | }
|
31 | ```
|
32 |
|
33 | That's it! You can override the settings from `eslint-config-react-app` by editing the `.eslintrc` file. Learn more about [configuring ESLint](http://eslint.org/docs/user-guide/configuring) on the ESLint website.
|
34 |
|
35 | ## Accessibility Checks
|
36 |
|
37 | The following rules from the [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) plugin are activated:
|
38 |
|
39 | - [accessible-emoji](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/accessible-emoji.md)
|
40 | - [alt-text](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/alt-text.md)
|
41 | - [anchor-has-content](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-has-content.md)
|
42 | - [aria-activedescendant-has-tabindex](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-activedescendant-has-tabindex.md)
|
43 | - [aria-props](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-props.md)
|
44 | - [aria-proptypes](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-proptypes.md)
|
45 | - [aria-role](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-role.md)
|
46 | - [aria-unsupported-elements](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-unsupported-elements.md)
|
47 | - [heading-has-content](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/heading-has-content.md)
|
48 | - [href-no-hash](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/v5.1.1/docs/rules/href-no-hash.md)
|
49 | - [iframe-has-title](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/iframe-has-title.md)
|
50 | - [img-redundant-alt](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-redundant-alt.md)
|
51 | - [no-access-key](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md)
|
52 | - [no-distracting-elements](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-distracting-elements.md)
|
53 | - [no-redundant-roles](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-redundant-roles.md)
|
54 | - [role-has-required-aria-props](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/role-has-required-aria-props.md)
|
55 | - [role-supports-aria-props](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/role-supports-aria-props.md)
|
56 | - [scope](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/scope.md)
|
57 |
|
58 | If you want to enable even more accessibility rules, you can create an `.eslintrc` file in the root of your project with this content:
|
59 |
|
60 | ```json
|
61 | {
|
62 | "extends": ["react-app", "plugin:jsx-a11y/recommended"],
|
63 | "plugins": ["jsx-a11y"]
|
64 | }
|
65 | ```
|
66 |
|
67 | However, if you are using [Create React App](https://github.com/facebook/create-react-app) and have not ejected, any additional rules will only be displayed in the [IDE integrations](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor), but not in the browser or the terminal.
|