UNPKG

monaco-html-linter

Version:
75 lines (50 loc) 2.06 kB
# Monaco HTML Linter Monaco HTML Linter is a simple HTML Linter plugin for the [Monaco Editor](https://microsoft.github.io/monaco-editor/). It uses [HTMLHint](https://htmlhint.com/) under the hood to verify HTML Code. ## Installation ``` npm i monaco-html-linter ``` ## Usage ```ts 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 : ```ts 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](https://htmlhint.com/docs/user-guide/list-rules). #### 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](./LICENSE) file for detail.