Monaco HTML Linter

Monaco HTML Linter is a simple HTML Linter plugin for the Monaco Editor. It uses HTMLHint under the hood to verify HTML Code.

Installation

npm i monaco-html-linter

Usage

import monaco, { editor } from 'monaco-editor';
import HTMLMonacoLinter from 'monaco-html-linter';

// The Monaco Editor can be easily created, given an
// empty container and an options literal.
// Two members of the literal are "value" and "language".
// The editor takes the full size of its container.

const editor = monaco.editor.create(document.getElementById('container'), {
  value: 'html code here ...',
  language: 'html'
});

const linter = new HTMLMonacoLinter(editor, monaco);
linter.watch();

You can get the linter response in this way :

import { HTMLMonacoMarks } from 'monaco-html-linter';

//...

const htmlCode = editor.getValue();
const report = new HTMLMonacoMarks(htmlCode);
const response = report.getLinterResponse();

API

Class: HTMLMonacoLinter(editor: editor.IStandaloneCodeEditor, monaco: Monaco, ruleset?: Ruleset)

Attributes

• editor: editor.IStandaloneCodeEditor The object returned when you create an editor.
• monaco: typeof monaco The monaco variable.
• ruleset?: Ruleset HTMLHint ruleset options.

Methods

• lint () => void: Lint one time the editor.
• watch () => void: Lint the editor each time the onChange event is triggered.

Class: HTMLMonacoMarks(html: string, ruleset: Ruleset = defaultRuleset, model?: editor.ITextModel)

Attributes

• html: string The codoe to verify.
• ruleset: Ruleset HTMLHint ruleset options.
• linterResponse: Hint[] Value returned by HTMLHint.
• model?: editor.ITextModel

Methods

• getEditorMarks(monaco: Monaco): IMarkerData[] Return the monaco markers.
• getLinterResponse(): Hint[]
• lint(): Hint[]

License

MIT, see the LICENSE file for detail.