Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@clr/eslint-plugin-clarity-adoption

Package Overview
Dependencies
Maintainers
0
Versions
93
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@clr/eslint-plugin-clarity-adoption

A set of ESLint rules for Clarity Core adoption.

  • 6.15.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
0
Created
Source

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

  • Angular application - https://github.com/sis0k0/clarity-linter-demo

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>

Keywords

FAQs

Package last updated on 16 Dec 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc