Noiseless Peaceful Morning

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

    6.1.0 • 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>

    Install

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

    DownloadsWeekly Downloads

    92

    Version

    6.1.0

    License

    MIT

    Unpacked Size

    192 kB

    Total Files

    93

    Last publish

    Collaborators

    • steve-haar
    • ashleyryan
    • gnomeontherun
    • mathisscott
    • hippeelee
    • shijir
    • coryrylan
    • jinnie
    • bdryanovski
    • bbogdanov