$ npm install --save-dev eslint eslint-plugin-github
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.
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.
For each component, you may specify a default
and/or props
. default
may make sense if there's a 1:1 mapping between a component and an HTML element. However, if the HTML output of a component is dependent on a prop value, you can provide a mapping using the props
key. To minimize conflicts and complexity, this currently only supports the mapping of a single prop type.
{
"settings": {
"github": {
"components": {
"Box": { "default": "p" },
"Link": { "props": {"as": { "undefined": "a", "a": "a", "button": "button"}}},
}
}
}
}
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='a'>
will treated as ana
element type.<Link as='button'>
will be treated as abutton
element type.<Link as='summary'>
will be treated as the rawLink
type because there is no configuration set foras='summary'
.