eslint-plugin-github

What is eslint-plugin-github?

The eslint-plugin-github package provides a set of ESLint rules and configurations specifically designed to enforce coding standards and best practices for GitHub projects. It helps maintain code quality and consistency across JavaScript and TypeScript codebases.

What are eslint-plugin-github's main functionalities?

Enforce GitHub's JavaScript Style Guide

This feature allows you to extend your ESLint configuration with GitHub's recommended rules. By including `plugin:github/recommended` in your ESLint configuration, you can enforce GitHub's JavaScript style guide across your project.

{
  "extends": [
    "plugin:github/recommended"
  ]
}

Custom GitHub Rules

This feature provides custom ESLint rules specific to GitHub's coding standards. For example, `github/array-foreach` enforces the use of `for...of` instead of `Array.prototype.forEach`, and `github/no-blur` warns against the use of `Element.prototype.blur`.

{
  "rules": {
    "github/array-foreach": "error",
    "github/no-blur": "warn"
  }
}

TypeScript Support

This feature extends the ESLint configuration to support TypeScript projects. By including `plugin:github/typescript`, you can enforce GitHub's TypeScript coding standards.

{
  "extends": [
    "plugin:github/typescript"
  ]
}

Other packages similar to eslint-plugin-github

eslint-plugin-standard

The eslint-plugin-standard package provides ESLint rules based on JavaScript Standard Style. It enforces a set of coding conventions and best practices similar to eslint-plugin-github but follows the StandardJS style guide.

eslint-plugin-airbnb

The eslint-plugin-airbnb package offers a set of ESLint rules based on the Airbnb JavaScript Style Guide. It is widely used and enforces a comprehensive set of coding standards and best practices, similar to eslint-plugin-github but aligned with Airbnb's guidelines.

eslint-plugin-prettier

The eslint-plugin-prettier package integrates Prettier with ESLint. It enforces code formatting rules defined by Prettier, ensuring consistent code style. While it focuses more on formatting, it can be used alongside other style guides like eslint-plugin-github.

README

eslint-plugin-github

Installation

npm install --save-dev eslint eslint-plugin-github

Setup

Legacy Configuration (.eslintrc)

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"]
}

Flat Configuration (eslint-config.js)

Import the eslint-plugin-github, and extend any of the configurations using getFlatConfigs() as needed like so:

import github from 'eslint-plugin-github'

export default [
  github.getFlatConfigs().browser,
  github.getFlatConfigs().recommended,
  github.getFlatConfigs().react,
  ...github.getFlatConfigs().typescript,
  {
    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
    ignores: ['eslint.config.mjs'],
    rules: {
      'github/array-foreach': 'error',
      'github/async-preventdefault': 'warn',
      'github/no-then': 'error',
      'github/no-blur': 'error',
    },
  },
]

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	🔐
filenames-match-regex	ensure filenames match a regex naming convention	✅
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	🔍