@clr/eslint-plugin-clarity-adoption
TypeScript icon, indicating that this package has built-in type declarations

6.9.2 • Public • Published

Clarity Adoption ESLint Plugin

Installation

npm install --save-dev @clr/eslint-plugin-clarity-adoption @typescript-eslint/parser eslint

Usage

Configure in your ESLint config file like you see below. The overrides section is important to enable it to parse HTML files as well.

.eslintrc.json

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2015
  },
  "plugins": ["@clr/clarity-adoption"],
  "rules": {
    "@clr/clarity-adoption/no-clr-accordion": "warn",
    "@clr/clarity-adoption/no-clr-alert": "warn",
    "@clr/clarity-adoption/no-clr-badge": "warn",
    "@clr/clarity-adoption/no-clr-button": "warn",
    "@clr/clarity-adoption/no-clr-card": "warn",
    "@clr/clarity-adoption/no-clr-checkbox": "warn",
    "@clr/clarity-adoption/no-clr-datalist": "warn",
    "@clr/clarity-adoption/no-clr-form": "warn",
    "@clr/clarity-adoption/no-clr-icon": "warn",
    "@clr/clarity-adoption/no-clr-input": "warn",
    "@clr/clarity-adoption/no-clr-label": "warn",
    "@clr/clarity-adoption/no-clr-list": "warn",
    "@clr/clarity-adoption/no-clr-modal": "warn",
    "@clr/clarity-adoption/no-clr-password": "warn",
    "@clr/clarity-adoption/no-clr-radio": "warn",
    "@clr/clarity-adoption/no-clr-range": "warn",
    "@clr/clarity-adoption/no-clr-select": "warn",
    "@clr/clarity-adoption/no-clr-textarea": "warn",
    "@clr/clarity-adoption/no-clr-toggle": "warn"
  },
  "overrides": [
    {
      "files": ["*.html"],
      "parser": "@clr/eslint-plugin-clarity-adoption/html-parser"
    }
  ]
}

Note: If you don't have ESLint config file, create a new file named .eslintrc.json in the root of your project and copy the content above.

Finally, you'll need to run eslint with the --ext flag to enable HTML scanning like npx eslint --ext=ts,html src/.

Testing the plugin in a local project

  1. Install the dependencies, run the watch script to build the package and watch for changes:
npm install
npm run watch
  1. Open another terminal window/tab, navigate to the dist directory and execute npm link:
cd ../../dist/lib
npm link
  1. Create a demo project, navigate to it and link the ESLint plugin:
ng new linter-test-project
cd linter-test-project
npm link @clr/eslint-plugin-clarity-adoption
  1. Install the other linter dependencies
npm i -D @typescript-eslint/parser eslint
npm i
  1. Add ESLint configuration for TypeScript and HTML.

.eslintrc.json

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2015
  },
  "plugins": ["@clr/clarity-adoption"],
  "rules": {
    "@clr/clarity-adoption/no-clr-accordion": "warn",
    "@clr/clarity-adoption/no-clr-alert": "warn",
    "@clr/clarity-adoption/no-clr-badge": "warn",
    "@clr/clarity-adoption/no-clr-button": "warn",
    "@clr/clarity-adoption/no-clr-card": "warn",
    "@clr/clarity-adoption/no-clr-checkbox": "warn",
    "@clr/clarity-adoption/no-clr-datalist": "warn",
    "@clr/clarity-adoption/no-clr-form": "warn",
    "@clr/clarity-adoption/no-clr-icon": "warn",
    "@clr/clarity-adoption/no-clr-input": "warn",
    "@clr/clarity-adoption/no-clr-label": "warn",
    "@clr/clarity-adoption/no-clr-list": "warn",
    "@clr/clarity-adoption/no-clr-modal": "warn",
    "@clr/clarity-adoption/no-clr-password": "warn",
    "@clr/clarity-adoption/no-clr-radio": "warn",
    "@clr/clarity-adoption/no-clr-range": "warn",
    "@clr/clarity-adoption/no-clr-select": "warn",
    "@clr/clarity-adoption/no-clr-textarea": "warn",
    "@clr/clarity-adoption/no-clr-toggle": "warn"
  },
  "overrides": [
    {
      "files": ["*.html"],
      "parser": "@clr/eslint-plugin-clarity-adoption/html-parser"
    }
  ]
}
  1. Lint the project
# Lint both the TypeScript and HTML files
npx eslint --ext=ts,html src/
  1. You can make changes to the plugin and then test them in the demo project without any additional steps!

Demo app

How it works

Currently, the plugin contains a single rule - no-clr-button. This rule reports the usage of <button class="btn btn-primary"></button> inside HTML files or inside inlined Angular components templates (TS files).

For parsing the TS files in the project, the plugin uses @typescript-eslint/plugin. Then, it parses the HTML within the component template with node-html-parser. Using the AST tree provided from node-html-parser it detects the usage of <button class="btn btn-primary">.

For parsing the HTML files, the plugin uses an internalized version of eslint-html-parser. The original package is patched to work with HTML files containing more than one root element, such as:

<div>...</div>
<div>...</div>

Package Sidebar

Install

npm i @clr/eslint-plugin-clarity-adoption

Weekly Downloads

10

Version

6.9.2

License

MIT

Unpacked Size

192 kB

Total Files

93

Last publish

Collaborators

  • dtsanevmw
  • clarity-service-account
  • kevinbuhmann
  • wernest
  • jinnie