eslint-config-sharo-scripts
This is the ESLint shareable configuration for sharo Next.js boilerplate.
Installation
npm i eslint-config-sharo-scripts --save-dev
Usage
Add into ESLint configuration (e.g. .eslintrc.json
):
{
"extends": "sharo-scripts"
}
What is included
- JavaScript support with the recommended
eslint
rules - TypeScript support with the recommended
@typescript-eslint
rules - Prettier support via
eslint-plugin-prettier
- Jest support via
eslint-plugin-jest
withrecommended
andstyle
rules - Cypress support via
eslint-plugin-cypress
andeslint-plugin-chai-friendly
- Lint some accessibility issues in JSX via
jsx-a11y
Notes
- Cypress tests should be written in JS
- Jest tests should be written in TS
jsx-a11y/anchor-is-valid
Regarding Due to how Next.js Link component API works, jsx-a11y/anchor-is-valid
will
report this as an error:
// error because <a> does not have href
<Link href="/somewhere">
<a>Link to somewhere</a>
</Link>
To work around this issue, the rule is overriden as described in this issue:
{
'jsx-a11y/anchor-is-valid': [
'error',
{
components: ['Link'],
specialLink: ['hrefLeft', 'hrefRight'],
aspects: ['invalidHref', 'preferButton']
}
]
}
However, this workaround introduces another issue: it disables the rule's check for an href attribute altogether:
<p>
This paragraph contains <a>an anchor without href</a>.
</p>
You should probably add another accessibility checker to capture these issues, such as react-axe.
License
Licensed under MIT License.