mirror of
https://github.com/airbnb/javascript.git
synced 2026-01-09 17:07:54 -05:00
[readme] update eslint plugin repo URLs
This commit is contained in:
10
README.md
10
README.md
@@ -1373,7 +1373,7 @@ Other Style Guides
|
||||
|
||||
<a name="modules--no-mutable-exports"></a>
|
||||
- [10.5](#modules--no-mutable-exports) Do not export mutable bindings.
|
||||
eslint: [`import/no-mutable-exports`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-mutable-exports.md)
|
||||
eslint: [`import/no-mutable-exports`](https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-mutable-exports.md)
|
||||
> Why? Mutation should be avoided in general, but in particular when exporting mutable bindings. While this technique may be needed for some special cases, in general, only constant references should be exported.
|
||||
|
||||
```javascript
|
||||
@@ -1388,7 +1388,7 @@ Other Style Guides
|
||||
|
||||
<a name="modules--prefer-default-export"></a>
|
||||
- [10.6](#modules--prefer-default-export) In modules with a single export, prefer default export over named export.
|
||||
eslint: [`import/prefer-default-export`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/prefer-default-export.md)
|
||||
eslint: [`import/prefer-default-export`](https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/prefer-default-export.md)
|
||||
> Why? To encourage more files that only ever export one thing, which is better for readability and maintainability.
|
||||
|
||||
```javascript
|
||||
@@ -1401,7 +1401,7 @@ Other Style Guides
|
||||
|
||||
<a name="modules--imports-first"></a>
|
||||
- [10.7](#modules--imports-first) Put all `import`s above non-import statements.
|
||||
eslint: [`import/first`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/first.md)
|
||||
eslint: [`import/first`](https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/first.md)
|
||||
> Why? Since `import`s are hoisted, keeping them all at the top prevents surprising behavior.
|
||||
|
||||
```javascript
|
||||
@@ -1440,7 +1440,7 @@ Other Style Guides
|
||||
|
||||
<a name="modules--no-webpack-loader-syntax"></a>
|
||||
- [10.9](#modules--no-webpack-loader-syntax) Disallow Webpack loader syntax in module import statements.
|
||||
eslint: [`import/no-webpack-loader-syntax`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-webpack-loader-syntax.md)
|
||||
eslint: [`import/no-webpack-loader-syntax`](https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-webpack-loader-syntax.md)
|
||||
> Why? Since using Webpack syntax in the imports couples the code to a module bundler. Prefer using the loader syntax in `webpack.config.js`.
|
||||
|
||||
```javascript
|
||||
@@ -1455,7 +1455,7 @@ Other Style Guides
|
||||
|
||||
<a name="modules--import-extensions"></a>
|
||||
- [10.10](#modules--import-extensions) Do not include JavaScript filename extensions
|
||||
eslint: [`import/extensions`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/extensions.md)
|
||||
eslint: [`import/extensions`](https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/extensions.md)
|
||||
> Why? Including extensions inhibits refactoring, and inappropriately hardcodes implementation details of the module you're importing in every consumer.
|
||||
|
||||
```javascript
|
||||
|
||||
@@ -53,7 +53,7 @@ module.exports = {
|
||||
|
||||
// disallow importing from the same path more than once
|
||||
// https://eslint.org/docs/rules/no-duplicate-imports
|
||||
// replaced by https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-duplicates.md
|
||||
// replaced by https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-duplicates.md
|
||||
'no-duplicate-imports': 'off',
|
||||
|
||||
// disallow symbol constructor
|
||||
|
||||
@@ -33,40 +33,40 @@ module.exports = {
|
||||
// Static analysis:
|
||||
|
||||
// ensure imports point to files/modules that can be resolved
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-unresolved.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-unresolved.md
|
||||
'import/no-unresolved': ['error', { commonjs: true, caseSensitive: true }],
|
||||
|
||||
// ensure named imports coupled with named exports
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/named.md#when-not-to-use-it
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/named.md#when-not-to-use-it
|
||||
'import/named': 'error',
|
||||
|
||||
// ensure default import coupled with default export
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/default.md#when-not-to-use-it
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/default.md#when-not-to-use-it
|
||||
'import/default': 'off',
|
||||
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/namespace.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/namespace.md
|
||||
'import/namespace': 'off',
|
||||
|
||||
// Helpful warnings:
|
||||
|
||||
// disallow invalid exports, e.g. multiple defaults
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/export.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/export.md
|
||||
'import/export': 'error',
|
||||
|
||||
// do not allow a default import name to match a named export
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-named-as-default.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-named-as-default.md
|
||||
'import/no-named-as-default': 'error',
|
||||
|
||||
// warn on accessing default export property names that are also named exports
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-named-as-default-member.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-named-as-default-member.md
|
||||
'import/no-named-as-default-member': 'error',
|
||||
|
||||
// disallow use of jsdoc-marked-deprecated imports
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-deprecated.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-deprecated.md
|
||||
'import/no-deprecated': 'off',
|
||||
|
||||
// Forbid the use of extraneous packages
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-extraneous-dependencies.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-extraneous-dependencies.md
|
||||
// paths are treated both as absolute paths, and relative to process.cwd()
|
||||
'import/no-extraneous-dependencies': ['error', {
|
||||
devDependencies: [
|
||||
@@ -97,46 +97,46 @@ module.exports = {
|
||||
}],
|
||||
|
||||
// Forbid mutable exports
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-mutable-exports.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-mutable-exports.md
|
||||
'import/no-mutable-exports': 'error',
|
||||
|
||||
// Module systems:
|
||||
|
||||
// disallow require()
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-commonjs.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-commonjs.md
|
||||
'import/no-commonjs': 'off',
|
||||
|
||||
// disallow AMD require/define
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-amd.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-amd.md
|
||||
'import/no-amd': 'error',
|
||||
|
||||
// No Node.js builtin modules
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-nodejs-modules.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-nodejs-modules.md
|
||||
// TODO: enable?
|
||||
'import/no-nodejs-modules': 'off',
|
||||
|
||||
// Style guide:
|
||||
|
||||
// disallow non-import statements appearing before import statements
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/first.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/first.md
|
||||
'import/first': 'error',
|
||||
|
||||
// disallow non-import statements appearing before import statements
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/imports-first.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/imports-first.md
|
||||
// deprecated: use `import/first`
|
||||
'import/imports-first': 'off',
|
||||
|
||||
// disallow duplicate imports
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-duplicates.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-duplicates.md
|
||||
'import/no-duplicates': 'error',
|
||||
|
||||
// disallow namespace imports
|
||||
// TODO: enable?
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-namespace.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-namespace.md
|
||||
'import/no-namespace': 'off',
|
||||
|
||||
// Ensure consistent use of file extension within the import path
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/extensions.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/extensions.md
|
||||
'import/extensions': ['error', 'ignorePackages', {
|
||||
js: 'never',
|
||||
mjs: 'never',
|
||||
@@ -144,62 +144,62 @@ module.exports = {
|
||||
}],
|
||||
|
||||
// ensure absolute imports are above relative imports and that unassigned imports are ignored
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/order.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/order.md
|
||||
// TODO: enforce a stricter convention in module import order?
|
||||
'import/order': ['error', { groups: [['builtin', 'external', 'internal']] }],
|
||||
|
||||
// Require a newline after the last import/require in a group
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/newline-after-import.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/newline-after-import.md
|
||||
'import/newline-after-import': 'error',
|
||||
|
||||
// Require modules with a single export to use a default export
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/prefer-default-export.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/prefer-default-export.md
|
||||
'import/prefer-default-export': 'error',
|
||||
|
||||
// Restrict which files can be imported in a given folder
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-restricted-paths.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-restricted-paths.md
|
||||
'import/no-restricted-paths': 'off',
|
||||
|
||||
// Forbid modules to have too many dependencies
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/max-dependencies.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/max-dependencies.md
|
||||
'import/max-dependencies': ['off', { max: 10 }],
|
||||
|
||||
// Forbid import of modules using absolute paths
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-absolute-path.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-absolute-path.md
|
||||
'import/no-absolute-path': 'error',
|
||||
|
||||
// Forbid require() calls with expressions
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-dynamic-require.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-dynamic-require.md
|
||||
'import/no-dynamic-require': 'error',
|
||||
|
||||
// prevent importing the submodules of other modules
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-internal-modules.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-internal-modules.md
|
||||
'import/no-internal-modules': ['off', {
|
||||
allow: [],
|
||||
}],
|
||||
|
||||
// Warn if a module could be mistakenly parsed as a script by a consumer
|
||||
// leveraging Unambiguous JavaScript Grammar
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/unambiguous.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/unambiguous.md
|
||||
// this should not be enabled until this proposal has at least been *presented* to TC39.
|
||||
// At the moment, it's not a thing.
|
||||
'import/unambiguous': 'off',
|
||||
|
||||
// Forbid Webpack loader syntax in imports
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-webpack-loader-syntax.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-webpack-loader-syntax.md
|
||||
'import/no-webpack-loader-syntax': 'error',
|
||||
|
||||
// Prevent unassigned imports
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-unassigned-import.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-unassigned-import.md
|
||||
// importing for side effects is perfectly acceptable, if you need side effects.
|
||||
'import/no-unassigned-import': 'off',
|
||||
|
||||
// Prevent importing the default as if it were named
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-named-default.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-named-default.md
|
||||
'import/no-named-default': 'error',
|
||||
|
||||
// Reports if a module's default export is unnamed
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/d9b712ac7fd1fddc391f7b234827925c160d956f/docs/rules/no-anonymous-default-export.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/d9b712ac7fd1fddc391f7b234827925c160d956f/docs/rules/no-anonymous-default-export.md
|
||||
'import/no-anonymous-default-export': ['off', {
|
||||
allowArray: false,
|
||||
allowArrowFunction: false,
|
||||
@@ -210,49 +210,49 @@ module.exports = {
|
||||
}],
|
||||
|
||||
// This rule enforces that all exports are declared at the bottom of the file.
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/98acd6afd04dcb6920b81330114e146dc8532ea4/docs/rules/exports-last.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/98acd6afd04dcb6920b81330114e146dc8532ea4/docs/rules/exports-last.md
|
||||
// TODO: enable?
|
||||
'import/exports-last': 'off',
|
||||
|
||||
// Reports when named exports are not grouped together in a single export declaration
|
||||
// or when multiple assignments to CommonJS module.exports or exports object are present
|
||||
// in a single file.
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/44a038c06487964394b1e15b64f3bd34e5d40cde/docs/rules/group-exports.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/44a038c06487964394b1e15b64f3bd34e5d40cde/docs/rules/group-exports.md
|
||||
'import/group-exports': 'off',
|
||||
|
||||
// forbid default exports. this is a terrible rule, do not use it.
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/44a038c06487964394b1e15b64f3bd34e5d40cde/docs/rules/no-default-export.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/44a038c06487964394b1e15b64f3bd34e5d40cde/docs/rules/no-default-export.md
|
||||
'import/no-default-export': 'off',
|
||||
|
||||
// Prohibit named exports. this is a terrible rule, do not use it.
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/1ec80fa35fa1819e2d35a70e68fb6a149fb57c5e/docs/rules/no-named-export.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/1ec80fa35fa1819e2d35a70e68fb6a149fb57c5e/docs/rules/no-named-export.md
|
||||
'import/no-named-export': 'off',
|
||||
|
||||
// Forbid a module from importing itself
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/44a038c06487964394b1e15b64f3bd34e5d40cde/docs/rules/no-self-import.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/44a038c06487964394b1e15b64f3bd34e5d40cde/docs/rules/no-self-import.md
|
||||
'import/no-self-import': 'error',
|
||||
|
||||
// Forbid cyclical dependencies between modules
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/d81f48a2506182738409805f5272eff4d77c9348/docs/rules/no-cycle.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/d81f48a2506182738409805f5272eff4d77c9348/docs/rules/no-cycle.md
|
||||
'import/no-cycle': ['error', { maxDepth: '∞' }],
|
||||
|
||||
// Ensures that there are no useless path segments
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/ebafcbf59ec9f653b2ac2a0156ca3bcba0a7cf57/docs/rules/no-useless-path-segments.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/ebafcbf59ec9f653b2ac2a0156ca3bcba0a7cf57/docs/rules/no-useless-path-segments.md
|
||||
'import/no-useless-path-segments': ['error', { commonjs: true }],
|
||||
|
||||
// dynamic imports require a leading comment with a webpackChunkName
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/ebafcbf59ec9f653b2ac2a0156ca3bcba0a7cf57/docs/rules/dynamic-import-chunkname.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/ebafcbf59ec9f653b2ac2a0156ca3bcba0a7cf57/docs/rules/dynamic-import-chunkname.md
|
||||
'import/dynamic-import-chunkname': ['off', {
|
||||
importFunctions: [],
|
||||
webpackChunknameFormat: '[0-9a-zA-Z-_/.]+',
|
||||
}],
|
||||
|
||||
// Use this rule to prevent imports to folders in relative parent paths.
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/c34f14f67f077acd5a61b3da9c0b0de298d20059/docs/rules/no-relative-parent-imports.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/c34f14f67f077acd5a61b3da9c0b0de298d20059/docs/rules/no-relative-parent-imports.md
|
||||
'import/no-relative-parent-imports': 'off',
|
||||
|
||||
// Reports modules without any exports, or with unused exports
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/f63dd261809de6883b13b6b5b960e6d7f42a7813/docs/rules/no-unused-modules.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/f63dd261809de6883b13b6b5b960e6d7f42a7813/docs/rules/no-unused-modules.md
|
||||
// TODO: enable once it supports CJS
|
||||
'import/no-unused-modules': ['off', {
|
||||
ignoreExports: [],
|
||||
@@ -261,13 +261,13 @@ module.exports = {
|
||||
}],
|
||||
|
||||
// Reports the use of import declarations with CommonJS exports in any module except for the main module.
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/1012eb951767279ce3b540a4ec4f29236104bb5b/docs/rules/no-import-module-exports.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/1012eb951767279ce3b540a4ec4f29236104bb5b/docs/rules/no-import-module-exports.md
|
||||
'import/no-import-module-exports': ['error', {
|
||||
exceptions: [],
|
||||
}],
|
||||
|
||||
// Use this rule to prevent importing packages through relative paths.
|
||||
// https://github.com/benmosher/eslint-plugin-import/blob/1012eb951767279ce3b540a4ec4f29236104bb5b/docs/rules/no-relative-packages.md
|
||||
// https://github.com/import-js/eslint-plugin-import/blob/1012eb951767279ce3b540a4ec4f29236104bb5b/docs/rules/no-relative-packages.md
|
||||
'import/no-relative-packages': 'error',
|
||||
|
||||
// enforce a consistent style for type specifiers (inline or top-level)
|
||||
|
||||
@@ -12,12 +12,12 @@ module.exports = {
|
||||
|
||||
rules: {
|
||||
// ensure emoji are accessible
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/accessible-emoji.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/accessible-emoji.md
|
||||
// disabled; rule is deprecated
|
||||
'jsx-a11y/accessible-emoji': 'off',
|
||||
|
||||
// Enforce that all elements that require alternative text have meaningful information
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/alt-text.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/alt-text.md
|
||||
'jsx-a11y/alt-text': ['error', {
|
||||
elements: ['img', 'object', 'area', 'input[type="image"]'],
|
||||
img: [],
|
||||
@@ -27,11 +27,11 @@ module.exports = {
|
||||
}],
|
||||
|
||||
// Enforce that anchors have content
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-has-content.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-has-content.md
|
||||
'jsx-a11y/anchor-has-content': ['error', { components: [] }],
|
||||
|
||||
// ensure <a> tags are valid
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/0745af376cdc8686d85a361ce36952b1fb1ccf6e/docs/rules/anchor-is-valid.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/0745af376cdc8686d85a361ce36952b1fb1ccf6e/docs/rules/anchor-is-valid.md
|
||||
'jsx-a11y/anchor-is-valid': ['error', {
|
||||
components: ['Link'],
|
||||
specialLink: ['to'],
|
||||
@@ -39,24 +39,24 @@ module.exports = {
|
||||
}],
|
||||
|
||||
// elements with aria-activedescendant must be tabbable
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-activedescendant-has-tabindex.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-activedescendant-has-tabindex.md
|
||||
'jsx-a11y/aria-activedescendant-has-tabindex': 'error',
|
||||
|
||||
// Enforce all aria-* props are valid.
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-props.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-props.md
|
||||
'jsx-a11y/aria-props': 'error',
|
||||
|
||||
// Enforce ARIA state and property values are valid.
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-proptypes.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-proptypes.md
|
||||
'jsx-a11y/aria-proptypes': 'error',
|
||||
|
||||
// Require ARIA roles to be valid and non-abstract
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-role.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-role.md
|
||||
'jsx-a11y/aria-role': ['error', { ignoreNonDOM: false }],
|
||||
|
||||
// Enforce that elements that do not support ARIA roles, states, and
|
||||
// properties do not have those attributes.
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-unsupported-elements.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-unsupported-elements.md
|
||||
'jsx-a11y/aria-unsupported-elements': 'error',
|
||||
|
||||
// Ensure the autocomplete attribute is correct and suitable for the form field it is used with
|
||||
@@ -66,11 +66,11 @@ module.exports = {
|
||||
}],
|
||||
|
||||
// require onClick be accompanied by onKeyUp/onKeyDown/onKeyPress
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/click-events-have-key-events.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/click-events-have-key-events.md
|
||||
'jsx-a11y/click-events-have-key-events': 'error',
|
||||
|
||||
// Enforce that a control (an interactive element) has a text label.
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/control-has-associated-label.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/control-has-associated-label.md
|
||||
'jsx-a11y/control-has-associated-label': ['error', {
|
||||
labelAttributes: ['label'],
|
||||
controlComponents: [],
|
||||
@@ -99,27 +99,27 @@ module.exports = {
|
||||
}],
|
||||
|
||||
// ensure <hX> tags have content and are not aria-hidden
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/heading-has-content.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/heading-has-content.md
|
||||
'jsx-a11y/heading-has-content': ['error', { components: [''] }],
|
||||
|
||||
// require HTML elements to have a "lang" prop
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/html-has-lang.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/html-has-lang.md
|
||||
'jsx-a11y/html-has-lang': 'error',
|
||||
|
||||
// ensure iframe elements have a unique title
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/iframe-has-title.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/iframe-has-title.md
|
||||
'jsx-a11y/iframe-has-title': 'error',
|
||||
|
||||
// Prevent img alt text from containing redundant words like "image", "picture", or "photo"
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-redundant-alt.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-redundant-alt.md
|
||||
'jsx-a11y/img-redundant-alt': 'error',
|
||||
|
||||
// Elements with an interactive role and interaction handlers must be focusable
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/interactive-supports-focus.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/interactive-supports-focus.md
|
||||
'jsx-a11y/interactive-supports-focus': 'error',
|
||||
|
||||
// Enforce that a label tag has a text label and an associated control.
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/b800f40a2a69ad48015ae9226fbe879f946757ed/docs/rules/label-has-associated-control.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/b800f40a2a69ad48015ae9226fbe879f946757ed/docs/rules/label-has-associated-control.md
|
||||
'jsx-a11y/label-has-associated-control': ['error', {
|
||||
labelComponents: [],
|
||||
labelAttributes: [],
|
||||
@@ -129,11 +129,11 @@ module.exports = {
|
||||
}],
|
||||
|
||||
// require HTML element's lang prop to be valid
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/lang.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/lang.md
|
||||
'jsx-a11y/lang': 'error',
|
||||
|
||||
// media elements must have captions
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/media-has-caption.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/media-has-caption.md
|
||||
'jsx-a11y/media-has-caption': ['error', {
|
||||
audio: [],
|
||||
video: [],
|
||||
@@ -141,31 +141,31 @@ module.exports = {
|
||||
}],
|
||||
|
||||
// require that mouseover/out come with focus/blur, for keyboard-only users
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
|
||||
'jsx-a11y/mouse-events-have-key-events': 'error',
|
||||
|
||||
// Prevent use of `accessKey`
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md
|
||||
'jsx-a11y/no-access-key': 'error',
|
||||
|
||||
// prohibit autoFocus prop
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md
|
||||
'jsx-a11y/no-autofocus': ['error', { ignoreNonDOM: true }],
|
||||
|
||||
// prevent distracting elements, like <marquee> and <blink>
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-distracting-elements.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-distracting-elements.md
|
||||
'jsx-a11y/no-distracting-elements': ['error', {
|
||||
elements: ['marquee', 'blink'],
|
||||
}],
|
||||
|
||||
// WAI-ARIA roles should not be used to convert an interactive element to non-interactive
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-interactive-element-to-noninteractive-role.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-interactive-element-to-noninteractive-role.md
|
||||
'jsx-a11y/no-interactive-element-to-noninteractive-role': ['error', {
|
||||
tr: ['none', 'presentation'],
|
||||
}],
|
||||
|
||||
// A non-interactive element does not support event handlers (mouse and key handlers)
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-noninteractive-element-interactions.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-noninteractive-element-interactions.md
|
||||
'jsx-a11y/no-noninteractive-element-interactions': ['error', {
|
||||
handlers: [
|
||||
'onClick',
|
||||
@@ -178,7 +178,7 @@ module.exports = {
|
||||
}],
|
||||
|
||||
// WAI-ARIA roles should not be used to convert a non-interactive element to interactive
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-noninteractive-element-to-interactive-role.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-noninteractive-element-to-interactive-role.md
|
||||
'jsx-a11y/no-noninteractive-element-to-interactive-role': ['error', {
|
||||
ul: ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'],
|
||||
ol: ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'],
|
||||
@@ -188,22 +188,22 @@ module.exports = {
|
||||
}],
|
||||
|
||||
// Tab key navigation should be limited to elements on the page that can be interacted with.
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-noninteractive-tabindex.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-noninteractive-tabindex.md
|
||||
'jsx-a11y/no-noninteractive-tabindex': ['error', {
|
||||
tags: [],
|
||||
roles: ['tabpanel'],
|
||||
}],
|
||||
|
||||
// require onBlur instead of onChange
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-onchange.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-onchange.md
|
||||
'jsx-a11y/no-onchange': 'off',
|
||||
|
||||
// ensure HTML elements do not specify redundant ARIA roles
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-redundant-roles.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-redundant-roles.md
|
||||
'jsx-a11y/no-redundant-roles': 'error',
|
||||
|
||||
// Enforce that DOM elements without semantic behavior not have interaction handlers
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md
|
||||
'jsx-a11y/no-static-element-interactions': ['error', {
|
||||
handlers: [
|
||||
'onClick',
|
||||
@@ -217,20 +217,20 @@ module.exports = {
|
||||
|
||||
// Enforce that elements with ARIA roles must have all required attributes
|
||||
// for that role.
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/role-has-required-aria-props.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/role-has-required-aria-props.md
|
||||
'jsx-a11y/role-has-required-aria-props': 'error',
|
||||
|
||||
// Enforce that elements with explicit or implicit roles defined contain
|
||||
// only aria-* properties supported by that role.
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/role-supports-aria-props.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/role-supports-aria-props.md
|
||||
'jsx-a11y/role-supports-aria-props': 'error',
|
||||
|
||||
// only allow <th> to have the "scope" attr
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/scope.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/scope.md
|
||||
'jsx-a11y/scope': 'error',
|
||||
|
||||
// Enforce tabIndex value is not greater than zero.
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/tabindex-no-positive.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/tabindex-no-positive.md
|
||||
'jsx-a11y/tabindex-no-positive': 'error',
|
||||
|
||||
// ----------------------------------------------------
|
||||
@@ -238,7 +238,7 @@ module.exports = {
|
||||
// ----------------------------------------------------
|
||||
|
||||
// require that JSX labels use "htmlFor"
|
||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-for.md
|
||||
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-for.md
|
||||
// deprecated: replaced by `label-has-associated-control` rule
|
||||
'jsx-a11y/label-has-for': ['off', {
|
||||
components: [],
|
||||
|
||||
@@ -25,14 +25,14 @@ This style guide is mostly based on the standards that are currently prevalent i
|
||||
## Basic Rules
|
||||
|
||||
- Only include one React component per file.
|
||||
- However, multiple [Stateless, or Pure, Components](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions) are allowed per file. eslint: [`react/no-multi-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md#ignorestateless).
|
||||
- However, multiple [Stateless, or Pure, Components](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions) are allowed per file. eslint: [`react/no-multi-comp`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md#ignorestateless).
|
||||
- Always use JSX syntax.
|
||||
- Do not use `React.createElement` unless you’re initializing the app from a file that is not JSX.
|
||||
- [`react/forbid-prop-types`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-prop-types.md) will allow `arrays` and `objects` only if it is explicitly noted what `array` and `object` contains, using `arrayOf`, `objectOf`, or `shape`.
|
||||
- [`react/forbid-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-prop-types.md) will allow `arrays` and `objects` only if it is explicitly noted what `array` and `object` contains, using `arrayOf`, `objectOf`, or `shape`.
|
||||
|
||||
## Class vs `React.createClass` vs stateless
|
||||
|
||||
- If you have internal state and/or refs, prefer `class extends React.Component` over `React.createClass`. eslint: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md) [`react/prefer-stateless-function`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md)
|
||||
- If you have internal state and/or refs, prefer `class extends React.Component` over `React.createClass`. eslint: [`react/prefer-es6-class`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md) [`react/prefer-stateless-function`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md)
|
||||
|
||||
```jsx
|
||||
// bad
|
||||
@@ -81,9 +81,9 @@ This style guide is mostly based on the standards that are currently prevalent i
|
||||
|
||||
## Naming
|
||||
|
||||
- **Extensions**: Use `.jsx` extension for React components. eslint: [`react/jsx-filename-extension`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md)
|
||||
- **Extensions**: Use `.jsx` extension for React components. eslint: [`react/jsx-filename-extension`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md)
|
||||
- **Filename**: Use PascalCase for filenames. E.g., `ReservationCard.jsx`.
|
||||
- **Reference Naming**: Use PascalCase for React components and camelCase for their instances. eslint: [`react/jsx-pascal-case`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md)
|
||||
- **Reference Naming**: Use PascalCase for React components and camelCase for their instances. eslint: [`react/jsx-pascal-case`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md)
|
||||
|
||||
```jsx
|
||||
// bad
|
||||
@@ -172,7 +172,7 @@ This style guide is mostly based on the standards that are currently prevalent i
|
||||
|
||||
## Alignment
|
||||
|
||||
- Follow these alignment styles for JSX syntax. eslint: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md) [`react/jsx-closing-tag-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-tag-location.md)
|
||||
- Follow these alignment styles for JSX syntax. eslint: [`react/jsx-closing-bracket-location`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md) [`react/jsx-closing-tag-location`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-closing-tag-location.md)
|
||||
|
||||
```jsx
|
||||
// bad
|
||||
@@ -259,7 +259,7 @@ This style guide is mostly based on the standards that are currently prevalent i
|
||||
|
||||
## Spacing
|
||||
|
||||
- Always include a single space in your self-closing tag. eslint: [`no-multi-spaces`](https://eslint.org/docs/rules/no-multi-spaces), [`react/jsx-tag-spacing`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-tag-spacing.md)
|
||||
- Always include a single space in your self-closing tag. eslint: [`no-multi-spaces`](https://eslint.org/docs/rules/no-multi-spaces), [`react/jsx-tag-spacing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-tag-spacing.md)
|
||||
|
||||
```jsx
|
||||
// bad
|
||||
@@ -276,7 +276,7 @@ This style guide is mostly based on the standards that are currently prevalent i
|
||||
<Foo />
|
||||
```
|
||||
|
||||
- Do not pad JSX curly braces with spaces. eslint: [`react/jsx-curly-spacing`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md)
|
||||
- Do not pad JSX curly braces with spaces. eslint: [`react/jsx-curly-spacing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md)
|
||||
|
||||
```jsx
|
||||
// bad
|
||||
@@ -305,7 +305,7 @@ This style guide is mostly based on the standards that are currently prevalent i
|
||||
/>
|
||||
```
|
||||
|
||||
- Omit the value of the prop when it is explicitly `true`. eslint: [`react/jsx-boolean-value`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md)
|
||||
- Omit the value of the prop when it is explicitly `true`. eslint: [`react/jsx-boolean-value`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md)
|
||||
|
||||
```jsx
|
||||
// bad
|
||||
@@ -322,7 +322,7 @@ This style guide is mostly based on the standards that are currently prevalent i
|
||||
<Foo hidden />
|
||||
```
|
||||
|
||||
- Always include an `alt` prop on `<img>` tags. If the image is presentational, `alt` can be an empty string or the `<img>` must have `role="presentation"`. eslint: [`jsx-a11y/alt-text`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/alt-text.md)
|
||||
- Always include an `alt` prop on `<img>` tags. If the image is presentational, `alt` can be an empty string or the `<img>` must have `role="presentation"`. eslint: [`jsx-a11y/alt-text`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/alt-text.md)
|
||||
|
||||
```jsx
|
||||
// bad
|
||||
@@ -338,7 +338,7 @@ This style guide is mostly based on the standards that are currently prevalent i
|
||||
<img src="hello.jpg" role="presentation" />
|
||||
```
|
||||
|
||||
- Do not use words like "image", "photo", or "picture" in `<img>` `alt` props. eslint: [`jsx-a11y/img-redundant-alt`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-redundant-alt.md)
|
||||
- Do not use words like "image", "photo", or "picture" in `<img>` `alt` props. eslint: [`jsx-a11y/img-redundant-alt`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-redundant-alt.md)
|
||||
|
||||
> Why? Screenreaders already announce `img` elements as images, so there is no need to include this information in the alt text.
|
||||
|
||||
@@ -350,7 +350,7 @@ This style guide is mostly based on the standards that are currently prevalent i
|
||||
<img src="hello.jpg" alt="Me waving hello" />
|
||||
```
|
||||
|
||||
- Use only valid, non-abstract [ARIA roles](https://www.w3.org/TR/wai-aria/#usage_intro). eslint: [`jsx-a11y/aria-role`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-role.md)
|
||||
- Use only valid, non-abstract [ARIA roles](https://www.w3.org/TR/wai-aria/#usage_intro). eslint: [`jsx-a11y/aria-role`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-role.md)
|
||||
|
||||
```jsx
|
||||
// bad - not an ARIA role
|
||||
@@ -363,7 +363,7 @@ This style guide is mostly based on the standards that are currently prevalent i
|
||||
<div role="button" />
|
||||
```
|
||||
|
||||
- Do not use `accessKey` on elements. eslint: [`jsx-a11y/no-access-key`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md)
|
||||
- Do not use `accessKey` on elements. eslint: [`jsx-a11y/no-access-key`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md)
|
||||
|
||||
> Why? Inconsistencies between keyboard shortcuts and keyboard commands used by people using screenreaders and keyboards complicate accessibility.
|
||||
|
||||
@@ -375,7 +375,7 @@ This style guide is mostly based on the standards that are currently prevalent i
|
||||
<div />
|
||||
```
|
||||
|
||||
- Avoid using an array index as `key` prop, prefer a stable ID. eslint: [`react/no-array-index-key`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-array-index-key.md)
|
||||
- Avoid using an array index as `key` prop, prefer a stable ID. eslint: [`react/no-array-index-key`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-array-index-key.md)
|
||||
|
||||
> Why? Not using a stable ID [is an anti-pattern](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318) because it can negatively impact performance and cause issues with component state.
|
||||
|
||||
@@ -483,7 +483,7 @@ We don’t recommend using indexes for keys if the order of items may change.
|
||||
|
||||
## Refs
|
||||
|
||||
- Always use ref callbacks. eslint: [`react/no-string-refs`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-string-refs.md)
|
||||
- Always use ref callbacks. eslint: [`react/no-string-refs`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-string-refs.md)
|
||||
|
||||
```jsx
|
||||
// bad
|
||||
@@ -499,7 +499,7 @@ We don’t recommend using indexes for keys if the order of items may change.
|
||||
|
||||
## Parentheses
|
||||
|
||||
- Wrap JSX tags in parentheses when they span more than one line. eslint: [`react/jsx-wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-wrap-multilines.md)
|
||||
- Wrap JSX tags in parentheses when they span more than one line. eslint: [`react/jsx-wrap-multilines`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-wrap-multilines.md)
|
||||
|
||||
```jsx
|
||||
// bad
|
||||
@@ -527,7 +527,7 @@ We don’t recommend using indexes for keys if the order of items may change.
|
||||
|
||||
## Tags
|
||||
|
||||
- Always self-close tags that have no children. eslint: [`react/self-closing-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md)
|
||||
- Always self-close tags that have no children. eslint: [`react/self-closing-comp`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md)
|
||||
|
||||
```jsx
|
||||
// bad
|
||||
@@ -537,7 +537,7 @@ We don’t recommend using indexes for keys if the order of items may change.
|
||||
<Foo variant="stuff" />
|
||||
```
|
||||
|
||||
- If your component has multiline properties, close its tag on a new line. eslint: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md)
|
||||
- If your component has multiline properties, close its tag on a new line. eslint: [`react/jsx-closing-bracket-location`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md)
|
||||
|
||||
```jsx
|
||||
// bad
|
||||
@@ -571,7 +571,7 @@ We don’t recommend using indexes for keys if the order of items may change.
|
||||
}
|
||||
```
|
||||
|
||||
- Bind event handlers for the render method in the constructor. eslint: [`react/jsx-no-bind`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md)
|
||||
- Bind event handlers for the render method in the constructor. eslint: [`react/jsx-no-bind`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md)
|
||||
|
||||
> Why? A bind call in the render path creates a brand new function on every single render. Do not use arrow functions in class fields, because it makes them [challenging to test and debug, and can negatively impact performance](https://medium.com/@charpeni/arrow-functions-in-class-properties-might-not-be-as-great-as-we-think-3b3551c440b1), and because conceptually, class fields are for data, not logic.
|
||||
|
||||
@@ -639,7 +639,7 @@ We don’t recommend using indexes for keys if the order of items may change.
|
||||
}
|
||||
```
|
||||
|
||||
- Be sure to return a value in your `render` methods. eslint: [`react/require-render-return`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/require-render-return.md)
|
||||
- Be sure to return a value in your `render` methods. eslint: [`react/require-render-return`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/require-render-return.md)
|
||||
|
||||
```jsx
|
||||
// bad
|
||||
@@ -705,7 +705,7 @@ We don’t recommend using indexes for keys if the order of items may change.
|
||||
export default Link;
|
||||
```
|
||||
|
||||
- Ordering for `React.createClass`: eslint: [`react/sort-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md)
|
||||
- Ordering for `React.createClass`: eslint: [`react/sort-comp`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/sort-comp.md)
|
||||
|
||||
1. `displayName`
|
||||
1. `propTypes`
|
||||
@@ -731,7 +731,7 @@ We don’t recommend using indexes for keys if the order of items may change.
|
||||
|
||||
## `isMounted`
|
||||
|
||||
- Do not use `isMounted`. eslint: [`react/no-is-mounted`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md)
|
||||
- Do not use `isMounted`. eslint: [`react/no-is-mounted`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md)
|
||||
|
||||
> Why? [`isMounted` is an anti-pattern][anti-pattern], is not available when using ES6 classes, and is on its way to being officially deprecated.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user