Skip to content

Latest commit

 

History

History
111 lines (88 loc) · 8.41 KB

README.md

File metadata and controls

111 lines (88 loc) · 8.41 KB

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 a p element type.
  • <Link> without a defined as prop will be treated as a a.
  • <Link as='button'> will be treated as a button 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 🔍