The Clarity Adoption ESLint plugin helps with the adoption of Clarity Core components. The plugin provides ESLint rules to detect and warn against the usage of Clarity Angular components. A few rules also have fixers that replace the Clarity Angular components with their Clarity Core alternatives. You can enable rules with project configuration. For example, you can start with a configuration listing only the no-clr-badge rule to warn against the usage of badges and gradually, add more rules.
The plugin is distributed as npm package - @clr/eslint-plugin-clarity-adoption. To start using it, add the following dependencies to your project.
Create an ESLint configuration file named .eslintrc.json
in the root directory of your project. Add the
following content.
The configuration above enables all rules distributed with the Clarity Adoption plugin. To turn off a rule, remove it from the rules list. The plugin uses @clr/eslint-plugin-clarity-adoption/html-parser to lint HTML files and @typescript-eslint/parser to lint inlined Angular component templates.
Finally, you'll need to run eslint with the --ext
flag to enable HTML scanning.
You can tell ESLint to fix any detected problems with the --fix
option.
Clarity component | ESLint rule name | Default error level | Provide fixer |
---|---|---|---|
{{rule.value.name}} | @clr/clarity-adoption/{{ rule.key }} |
{{ rule.value.errorLevel }} |