@devtools-ds/diagnostic

The Diagnostic component displays errors and warnings from code, similar to errors produced by tools like webpack. It can also be used to display errors produced by a Language Server.

Usage no npm install needed!

<script type="module">
  import devtoolsDsDiagnostic from 'https://cdn.skypack.dev/@devtools-ds/diagnostic';
</script>

README

@devtools-ds/diagnostic

The Diagnostic component displays errors and warnings from code, similar to errors produced by tools like webpack. It can also be used to display errors produced by a Language Server.

Installation

npm i @devtools-ds/diagnostic
# or with yarn
yarn add @devtools-ds/diagnostic

Accessibility Approach

The Diagnostic is a block of preformatted text that can be difficult for screen readers to read. Based on this, we followed the MDN suggestion to treat the component as a figure. There is an auto-generated caption describing the error in a screen-reader friendly way.

Usage

import { Diagnostic } from "@devtools-ds/diagnostic";

Basic Diagnostic

<Diagnostic message={message} lines={lines} severity={severity} />

Diagnostic Using Language Server

import { DiagnosticSeverity } from "vscode-languageserver-types";

<Diagnostic
  message={message}
  lines={lines}
  severity={transformLanguageServer(DiagnosticSeverity.Error)}
/>;

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Shelby Cohen
💻 🎨
Tyler Krupicka
💻 📖 🎨 🚇 💡 ⚠️
Adam Dierkens
🎨 🤔

This project follows the all-contributors specification. Contributions of any kind welcome!