Monaco HTML Linter is a simple HTML Linter plugin for the Monaco Editor. It uses HTMLHint under the hood to verify HTML Code.
npm i monaco-html-linter
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();
editor: editor.IStandaloneCodeEditor
The object returned when you create an editor.monaco: typeof monaco
The monaco variable.ruleset?: Ruleset
HTMLHint ruleset options.
lint
() => void: Lint one time theeditor
.watch
() => void: Lint theeditor
each time theonChange
event is triggered.
html: string
The codoe to verify.ruleset: Ruleset
HTMLHint ruleset options.linterResponse: Hint[]
Value returned by HTMLHint.model?: editor.ITextModel
getEditorMarks(monaco: Monaco): IMarkerData[]
Return the monaco markers.getLinterResponse(): Hint[]
lint(): Hint[]
MIT, see the LICENSE file for detail.