eslint-plugin-capo

ESLint plugin to validate HTML elements based on capo.js validation rules. This plugin helps catch common issues with metadata, performance problems, accessibility concerns, and deprecated practices in HTML head sections.

Installation

``bash
npm install --save-dev eslint-plugin-capo @html-eslint/parser
`

Requirements:

- ESLint >= 8.21.0
- Node.js >= 18.18.0
- @html-eslint/parser >= 0.47.0

Usage

$3

Create or update your eslint.config.js:

`javascript
import capo from 'eslint-plugin-capo';
import htmlParser from '@html-eslint/parser';

export default [
{
files: ['*/.html'],
languageOptions: {
parser: htmlParser,
},
},
capo.configs.recommended,
];
`

Configuration Presets

See the rules documentation for more information.

$3

Balanced rules for production use:

`javascript
import capo from 'eslint-plugin-capo';

export default [capo.configs.recommended];
`

$3

Besides than the recommended preset, there are other presets available:

- strict - All rules as errors
- performance - Performance-focused rules only
- accessibility - Accessibility-focused rules only
- ordering - Element ordering validation only

$3

`javascript
import capo from 'eslint-plugin-capo';

export default [
{
plugins: {
capo,
},
rules: {
'capo/no-invalid-head-elements': 'error',
'capo/require-title': 'error',
'capo/no-duplicate-base': 'error',
'capo/no-meta-csp': 'warn',
'capo/no-invalid-http-equiv': 'warn',
'capo/valid-meta-viewport': 'error',
'capo/valid-charset': 'error',
'capo/no-default-style': 'warn',
'capo/no-unnecessary-preload': 'warn',
'capo/require-order': 'warn', // Optional: validate element ordering
},
},
];
`

Background

This plugin implements the validation rules from capo.js, a tool for determining the optimal order of elements in the HTML `.

Contributing

Contributions are welcome! Please open an issue or PR on GitHub.

License

Apache-2.0

Credits

Based on validation rules from capo.js by Rick Viscomi.
Inspired by Harry Roberts' work on ct.css and Vitaly Friedman's Nordic.js 2022 presentation.