# monaco-html-linter

> Simple HTML Linter for the Monaco Editor.

Latest version **1.0.4** (published 2022-07-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install monaco-html-linter
pnpm add monaco-html-linter
yarn add monaco-html-linter
bun add monaco-html-linter
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2022-07-11 |
| First published | 2022-07-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 8.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Arnaud Pfundstein |
| Maintainers | arnaudpfu |
| Keywords | HTML, Linter, Monaco, Editor, HTMLHint |

## Links

- npm: https://www.npmjs.com/package/monaco-html-linter
- Repository: https://github.com/arnaudpfu/monaco-html-linter
- Homepage: https://github.com/arnaudpfu/monaco-html-linter#readme
- Issues: https://github.com/arnaudpfu/monaco-html-linter/issues
- npm.io page: https://npm.io/package/monaco-html-linter

## Dependencies (2)

- [htmlhint](https://npm.io/package/htmlhint.md) ^1.1.4
- [monaco-editor](https://npm.io/package/monaco-editor.md) ^0.33.0

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2022-07-11
- 1.0.3 — 2022-07-11
- 1.0.2 — 2022-07-11
- 1.0.1 — 2022-07-08
- 1.0.0 — 2022-07-08

## README

# 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.

---
_Source: https://npm.io/package/monaco-html-linter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._