9ee83fa7ef | ||
---|---|---|
.. | ||
bin | ||
lib | ||
LICENSE | ||
README.md | ||
package.json |
README.md
eslint-plugin-github
Installation
npm install --save-dev eslint eslint-plugin-github
Setup
Add github
to your list of plugins in your ESLint config.
JSON ESLint config example:
{
"plugins": ["github"]
}
Extend the configs you wish to use.
JSON ESLint config example:
{
"extends": ["plugin:github/recommended"]
}
The available configs are:
internal
- Rules useful for github applications.
browser
- Useful rules when shipping your app to the browser.
react
- Recommended rules for React applications.
recommended
- Recommended rules for every application.
typescript
- Useful rules when writing TypeScript.
Component mapping (Experimental)
Note: This is experimental and subject to change.
The react
config includes rules which target specific HTML elements. You may provide a mapping of custom components to an HTML element in your eslintrc
configuration to increase linter coverage.
By default, these eslint rules will check the "as" prop for underlying element changes. If your repo uses a different prop name for polymorphic components provide the prop name in your eslintrc
configuration under polymorphicPropName
.
{
"settings": {
"github": {
"polymorphicPropName": "asChild",
"components": {
"Box": "p",
"Link": "a"
}
}
}
}
This config will be interpreted in the following way:
- All
<Box>
elements will be treated as ap
element type. <Link>
without a definedas
prop will be treated as aa
.<Link as='button'>
will be treated as abutton
element type.
Rules
💼 Configurations enabled in.
🔍 Set in the browser
configuration.
🔐 Set in the internal
configuration.
⚛️ Set in the react
configuration.
✅ Set in the recommended
configuration.
🔧 Automatically fixable by the --fix
CLI option.
❌ Deprecated.
Name | Description | 💼 | 🔧 | ❌ |
---|---|---|---|---|
a11y-aria-label-is-well-formatted | [aria-label] text should be formatted as you would visual text. | ⚛️ | ||
a11y-no-generic-link-text | disallow generic link text | ❌ | ||
a11y-no-title-attribute | Guards against developers using the title attribute | ⚛️ | ||
a11y-no-visually-hidden-interactive-element | Ensures that interactive elements are not visually hidden | ⚛️ | ||
a11y-role-supports-aria-props | Enforce that elements with explicit or implicit roles defined contain only aria-* properties supported by that role . |
⚛️ | ||
a11y-svg-has-accessible-name | SVGs must have an accessible name | ⚛️ | ||
array-foreach | enforce for..of loops over Array.forEach |
✅ | ||
async-currenttarget | disallow event.currentTarget calls inside of async functions |
🔍 | ||
async-preventdefault | disallow event.preventDefault calls inside of async functions |
🔍 | ||
authenticity-token | disallow usage of CSRF tokens in JavaScript | 🔐 | ||
get-attribute | disallow wrong usage of attribute names | 🔍 | 🔧 | |
js-class-name | enforce a naming convention for js- prefixed classes | 🔐 | ||
no-blur | disallow usage of Element.prototype.blur() |
🔍 | ||
no-d-none | disallow usage the d-none CSS class |
🔐 | ||
no-dataset | enforce usage of Element.prototype.getAttribute instead of Element.prototype.datalist |
🔍 | ||
no-dynamic-script-tag | disallow creating dynamic script tags | ✅ | ||
no-implicit-buggy-globals | disallow implicit global variables | ✅ | ||
no-inner-html | disallow Element.prototype.innerHTML in favor of Element.prototype.textContent |
🔍 | ||
no-innerText | disallow Element.prototype.innerText in favor of Element.prototype.textContent |
🔍 | 🔧 | |
no-then | enforce using async/await syntax over Promises |
✅ | ||
no-useless-passive | disallow marking a event handler as passive when it has no effect | 🔍 | 🔧 | |
prefer-observers | disallow poorly performing event listeners | 🔍 | ||
require-passive-events | enforce marking high frequency event handlers as passive | 🔍 | ||
unescaped-html-literal | disallow unescaped HTML literals | 🔍 |