eslint-plugin-capo
v0.1.0
Published
ESLint plugin to validate HTML <head> elements based on capo.js rules
Maintainers
Readme
eslint-plugin-capo
ESLint plugin to validate HTML <head> 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
npm install --save-dev eslint-plugin-capo @html-eslint/parserRequirements:
- ESLint >= 8.21.0
- Node.js >= 18.18.0
@html-eslint/parser>= 0.47.0
Usage
Flat Config (ESLint 9+)
Create or update your eslint.config.js:
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.
recommended (Default)
Balanced rules for production use:
import capo from 'eslint-plugin-capo';
export default [capo.configs.recommended];Other presets
Besides than the recommended preset, there are other presets available:
strict- All rules as errorsperformance- Performance-focused rules onlyaccessibility- Accessibility-focused rules onlyordering- Element ordering validation only
Custom Configuration
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 <head>.
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.
