Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@devtools-ds/diagnostic

Package Overview
Dependencies
Maintainers
1
Versions
26
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@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](https://code.visualstudio.com/api/language-extensions/language-serve

  • 1.2.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

@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!

FAQs

Package last updated on 27 Dec 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc