$ npm install --save-dev eslint eslint-plugin-githubAdd 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 apelement type. <Link>without a definedasprop will be treated as aa.<Link as='a'>will treated as anaelement type.<Link as='button'>will be treated as abuttonelement type.<Link as='summary'>will be treated as the rawLinktype because there is no configuration set foras='summary'.