Search code examples
javascripthtmlnpmnpxhtmlhint

Import JavaScript code from an npm package in order to use it programmatically

I have installed the htmlhint library that I can run in my command line over any HTML file like this:

npx htmlhint src/test-file.html

This lints the file and outputs some HTML errors (if any), for example:

   /Users/filipsavic/Documents/Programming/BM/Raven/code/src/component-library/widgets/HtmlEditor/test.html
      L1 |<html><body><div>asd <p>qw <span></span></p></div></body></html>
          ^ Doctype must be declared first. (doctype-first)

Scanned 1 files, found 1 errors in 1 files (5 ms)

I would like to use this library in my JavaScript/React files, something like this:

import htmlHint from 'htmlhint';

const parseRes = htmlHint('<html><body><span>some stuff...</span></body></html>');

How can I achieve this? Is there a general way to "convert" or "expose" the code from an npm package otherwise only/currently usable as a CLI command, so that it can be imported and the results of the CLI command used in a JavaScript program?

Solution

  • For my specific HTML linting problem, I found that the htmlhint library actually exposes a HTMLHint object that has verify method which does exactly what I was trying to achieve by invoking the CLI command programatically.

    Code for linting/verifying HTML is as follows:

    import { HTMLHint, HTMLParser } from 'htmlhint';



// somewhere in your component
const verificationResult = HTMLHint.verify('<html><body><div></body></html>');
console.log('verificationResult', verificationResult); // this logs the image below

    html verification result