Commit 7bff7154 authored by Almero Steyn's avatar Almero Steyn Committed by Dan Abramov
Browse files

ESLint Config: Upgrade eslint-plugin-jsx-a11y and activate more rules. (#2163)

* ESLint Config: Upgrade eslint-plugin-jsx-a11y and activate more rules.

* Try to fix Lerna

* Update README.md

* Remove html-has-lang

* Update README.md
parent 5ecda24f
Showing with 58 additions and 8 deletions
+58 -8
...@@ -8,7 +8,9 @@ Please refer to its documentation: ...@@ -8,7 +8,9 @@ Please refer to its documentation:
## Usage in Create React App Projects ## Usage in Create React App Projects
The easiest way to use this configuration is with [Create React App](https://github.com/facebookincubator/create-react-app), which includes it by default. **You don’t need to install it separately in Create React App projects.** The easiest way to use this configuration is with [Create React App](https://github.com/facebookincubator/create-react-app), which includes it by default.
**You don’t need to install it separately in Create React App projects.**
## Usage Outside of Create React App ## Usage Outside of Create React App
...@@ -17,7 +19,7 @@ If you want to use this ESLint configuration in a project not built with Create ...@@ -17,7 +19,7 @@ If you want to use this ESLint configuration in a project not built with Create
First, install this package, ESLint and the necessary plugins. First, install this package, ESLint and the necessary plugins.
```sh ```sh
npm install --save-dev eslint-config-react-app babel-eslint@7.1.1 eslint@3.16.1 eslint-plugin-flowtype@2.21.0 eslint-plugin-import@2.0.1 eslint-plugin-jsx-a11y@4.0.0 eslint-plugin-react@6.4.1 npm install --save-dev eslint-config-react-app babel-eslint@7.1.1 eslint@3.16.1 eslint-plugin-flowtype@2.21.0 eslint-plugin-import@2.0.1 eslint-plugin-jsx-a11y@5.0.1 eslint-plugin-react@6.4.1
``` ```
Then create a file named `.eslintrc` with following contents in the root folder of your project: Then create a file named `.eslintrc` with following contents in the root folder of your project:
...@@ -29,3 +31,37 @@ Then create a file named `.eslintrc` with following contents in the root folder ...@@ -29,3 +31,37 @@ Then create a file named `.eslintrc` with following contents in the root folder
``` ```
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. 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.
## Accessibility Checks
The following rules from the [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) plugin are activated:
- [accessible-emoji](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/accessible-emoji.md)
- [alt-text](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/alt-text.md)
- [anchor-has-content](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-has-content.md)
- [aria-activedescendant-has-tabindex](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-activedescendant-has-tabindex.md)
- [aria-props](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-props.md)
- [aria-proptypes](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-proptypes.md)
- [aria-role](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-role.md)
- [aria-unsupported-elements](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-unsupported-elements.md)
- [heading-has-content](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/heading-has-content.md)
- [href-no-hash](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/href-no-hash.md)
- [iframe-has-title](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/iframe-has-title.md)
- [img-redundant-alt](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-redundant-alt.md)
- [no-access-key](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md)
- [no-distracting-elements](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-distracting-elements.md)
- [no-redundant-roles](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-redundant-roles.md)
- [role-has-required-aria-props](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/role-has-required-aria-props.md)
- [role-supports-aria-props](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/role-supports-aria-props.md)
- [scope](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/scope.md)
If you want to enable even more accessibility rules, you can create an `.eslintrc` file in the root of your project with this content:
```json
{
"extends": ["react-app", "plugin:jsx-a11y/recommended"],
"plugins": ["jsx-a11y"]
}
```
However, if you are using [Create React App](https://github.com/facebookincubator/create-react-app) and have not ejected, any additional rules will only be displayed in the [IDE integrations](https://github.com/facebookincubator/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.
...@@ -294,10 +294,24 @@ module.exports = { ...@@ -294,10 +294,24 @@ module.exports = {
'react/style-prop-object': 'warn', 'react/style-prop-object': 'warn',
// https://github.com/evcohen/eslint-plugin-jsx-a11y/tree/master/docs/rules // https://github.com/evcohen/eslint-plugin-jsx-a11y/tree/master/docs/rules
'jsx-a11y/accessible-emoji': 'warn',
'jsx-a11y/alt-text': 'warn',
'jsx-a11y/anchor-has-content': 'warn',
'jsx-a11y/aria-activedescendant-has-tabindex': 'warn',
'jsx-a11y/aria-props': 'warn',
'jsx-a11y/aria-proptypes': 'warn',
'jsx-a11y/aria-role': 'warn', 'jsx-a11y/aria-role': 'warn',
'jsx-a11y/img-has-alt': 'warn', 'jsx-a11y/aria-unsupported-elements': 'warn',
'jsx-a11y/heading-has-content': 'warn',
'jsx-a11y/href-no-hash': 'warn',
'jsx-a11y/iframe-has-title': 'warn',
'jsx-a11y/img-redundant-alt': 'warn', 'jsx-a11y/img-redundant-alt': 'warn',
'jsx-a11y/no-access-key': 'warn', 'jsx-a11y/no-access-key': 'warn',
'jsx-a11y/no-distracting-elements': 'warn',
'jsx-a11y/no-redundant-roles': 'warn',
'jsx-a11y/role-has-required-aria-props': 'warn',
'jsx-a11y/role-supports-aria-props': 'warn',
'jsx-a11y/scope': 'warn',
// https://github.com/gajus/eslint-plugin-flowtype // https://github.com/gajus/eslint-plugin-flowtype
'flowtype/define-flow-type': 'warn', 'flowtype/define-flow-type': 'warn',
......
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
"eslint": "^3.16.1", "eslint": "^3.16.1",
"eslint-plugin-flowtype": "^2.21.0", "eslint-plugin-flowtype": "^2.21.0",
"eslint-plugin-import": "^2.0.1", "eslint-plugin-import": "^2.0.1",
"eslint-plugin-jsx-a11y": "^2.0.0 || ^3.0.0 || ^4.0.0", "eslint-plugin-jsx-a11y": "^5.0.0",
"eslint-plugin-react": "^6.4.1" "eslint-plugin-react": "^6.4.1"
} }
} }
...@@ -39,13 +39,13 @@ ...@@ -39,13 +39,13 @@
"devDependencies": { "devDependencies": {
"babel-cli": "^6.24.1", "babel-cli": "^6.24.1",
"babel-eslint": "7.x", "babel-eslint": "7.x",
"babel-preset-react-app": "^2.2.0", "babel-preset-react-app": "^2.1.1",
"cross-env": "^4.0.0", "cross-env": "^4.0.0",
"eslint": "^3.16.1", "eslint": "^3.16.1",
"eslint-config-react-app": "^0.6.2", "eslint-config-react-app": "^0.6.1",
"eslint-plugin-flowtype": "^2.21.0", "eslint-plugin-flowtype": "^2.21.0",
"eslint-plugin-import": "^2.0.1", "eslint-plugin-import": "^2.0.1",
"eslint-plugin-jsx-a11y": "^4.0.0", "eslint-plugin-jsx-a11y": "^5.0.0",
"eslint-plugin-react": "^6.4.1", "eslint-plugin-react": "^6.4.1",
"flow-bin": "^0.46.0", "flow-bin": "^0.46.0",
"jest": "19.x", "jest": "19.x",
......
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
"eslint-loader": "1.7.1", "eslint-loader": "1.7.1",
"eslint-plugin-flowtype": "2.21.0", "eslint-plugin-flowtype": "2.21.0",
"eslint-plugin-import": "2.0.1", "eslint-plugin-import": "2.0.1",
"eslint-plugin-jsx-a11y": "4.0.0", "eslint-plugin-jsx-a11y": "5.0.1",
"eslint-plugin-react": "6.4.1", "eslint-plugin-react": "6.4.1",
"extract-text-webpack-plugin": "2.1.0", "extract-text-webpack-plugin": "2.1.0",
"file-loader": "0.11.1", "file-loader": "0.11.1",
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment