diff --git a/README.md b/README.md index 6cbac4bc..6f53657a 100644 --- a/README.md +++ b/README.md @@ -41,6 +41,35 @@ The available configs are: - `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. + +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. + +```json +{ + "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 `` elements will be treated as a `p` element type. +- `` without a defined `as` prop will be treated as a `a`. +- `` will treated as an `a` element type. +- `` will be treated as a `button` element type. +- `` will be treated as the raw `Link` type because there is no configuration set for `as='summary'`. + ### Rules - [Array Foreach](./docs/rules/array-foreach.md) diff --git a/lib/configs/react.js b/lib/configs/react.js index 5845b799..c76d66d9 100644 --- a/lib/configs/react.js +++ b/lib/configs/react.js @@ -1,6 +1,9 @@ module.exports = { - env: { - browser: true + parserOptions: { + sourceType: 'module', + ecmaFeatures: { + jsx: true + } }, plugins: ['github', 'jsx-a11y'], extends: ['plugin:jsx-a11y/recommended'],