Adoption tooling

Clarity Adoption ESLint plugin

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.

Installation

The plugin is distributed as npm package - @clr/eslint-plugin-clarity-adoption. To start using it, add the following dependencies to your project.

Configuration

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.

Rules

Rules distributed with the Clarity Adoption ESLint plugin.
Clarity component ESLint rule name Default error level Provide fixer
{{rule.value.name}} @clr/clarity-adoption/{{ rule.key }} {{ rule.value.errorLevel }}