
Security News
Node.js Moves Toward Stable TypeScript Support with Amaro 1.0
Amaro 1.0 lays the groundwork for stable TypeScript support in Node.js, bringing official .ts loading closer to reality.
eslint-plugin-github
Advanced tools
An opinionated collection of ESLint shared configs and rules used by 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.
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"
]
}
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.
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.
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.
npm install --save-dev eslint eslint-plugin-github
.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"]
}
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',
},
},
]
[!NOTE] If you configured the
filenames/match-regex
rule, please note we have adapted the match regex rule intoeslint-plugin-github
as the originaleslint-filenames-plugin
is no longer maintained and needed a flat config support update.Please update the name to
github/filenames-match-regex
, and note, the default rule is kebab case or camelCase with one hump. For custom configuration, such as matching for camelCase regex, here's an example:
'github/filenames-match-regex': ['error', '^([a-z0-9]+)([A-Z][a-z0-9]+)*$'],
The available configs are:
internal
browser
react
recommended
typescript
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:
<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.💼 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 | enforce [aria-label] text to be formatted as you would visual text. | ⚛️ | ||
a11y-no-generic-link-text | disallow generic link text | ❌ | ||
a11y-no-title-attribute | disallow using the title attribute | ⚛️ | ||
a11y-no-visually-hidden-interactive-element | enforce 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 | require SVGs to 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 | require filenames to 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 | 🔍 |
FAQs
An opinionated collection of ESLint shared configs and rules used by GitHub.
The npm package eslint-plugin-github receives a total of 168,287 weekly downloads. As such, eslint-plugin-github popularity was classified as popular.
We found that eslint-plugin-github demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 24 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Amaro 1.0 lays the groundwork for stable TypeScript support in Node.js, bringing official .ts loading closer to reality.
Research
A deceptive PyPI package posing as an Instagram growth tool collects user credentials and sends them to third-party bot services.
Product
Socket now supports pylock.toml, enabling secure, reproducible Python builds with advanced scanning and full alignment with PEP 751's new standard.