feat(diagnostics): add clickable links to diagnostic codes

Author: 9romise

src/providers/diagnostics/index.ts

@@ -12,7 +12,7 @@ import { checkDeprecation } from './rules/deprecation'
 import { checkReplacement } from './rules/replacement'
 import { checkVulnerability } from './rules/vulnerability'
 
-export interface NodeDiagnosticInfo extends Pick<Diagnostic, 'message' | 'severity'> {
+export interface NodeDiagnosticInfo extends Pick<Diagnostic, 'message' | 'severity' | 'code'> {
   node: ValidNode
 }
 export type DiagnosticRule = (dep: DependencyInfo, pkg: ResolvedPackument) => Awaitable<NodeDiagnosticInfo | undefined>
@@ -59,6 +59,7 @@ export function registerDiagnosticCollection(mapping: Record<string, Extractor |
                 source: displayName,
                 message: diagnostic.message,
                 severity: diagnostic.severity,
+                code: diagnostic.code,
                 range: extractor.getNodeRange(document, diagnostic.node),
               })
             }

src/providers/diagnostics/rules/deprecation.ts

@@ -1,6 +1,7 @@
 import type { DiagnosticRule } from '..'
+import { npmxPackageUrl } from '#utils/links'
 import { extractVersion } from '#utils/package'
-import { DiagnosticSeverity } from 'vscode'
+import { DiagnosticSeverity, Uri } from 'vscode'
 
 export const checkDeprecation: DiagnosticRule = (dep, pkg) => {
   const exactVersion = extractVersion(dep.version)
@@ -13,5 +14,9 @@ export const checkDeprecation: DiagnosticRule = (dep, pkg) => {
     node: dep.versionNode,
     message: `${dep.name} v${exactVersion} has been deprecated: ${versionInfo.deprecated}`,
     severity: DiagnosticSeverity.Error,
+    code: {
+      value: 'deprecation',
+      target: Uri.parse(npmxPackageUrl(dep.name, exactVersion)),
+    },
   }
 }

src/providers/diagnostics/rules/replacement.ts

@@ -1,7 +1,7 @@
 import type { ModuleReplacement } from '#utils/api/replacement'
 import type { DiagnosticRule } from '..'
 import { getReplacement } from '#utils/api/replacement'
-import { DiagnosticSeverity } from 'vscode'
+import { DiagnosticSeverity, Uri } from 'vscode'
 
 function getMdnUrl(path: string): string {
   return `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/${path}`
@@ -12,16 +12,26 @@ function getReplacementsDocUrl(path: string): string {
 }
 
 // https://github.com/npmx-dev/npmx.dev/blob/main/app/components/PackageReplacement.vue#L8-L30
-function generateMessage(replacement: ModuleReplacement) {
+function getReplacementInfo(replacement: ModuleReplacement) {
   switch (replacement.type) {
     case 'native':
-      return `This can be replaced with ${replacement.replacement}, available since Node ${replacement.nodeVersion}. Read more here: ${getMdnUrl(replacement.mdnPath)}`
+      return {
+        message: `This can be replaced with ${replacement.replacement}, available since Node ${replacement.nodeVersion}.`,
+        link: getMdnUrl(replacement.mdnPath),
+      }
     case 'simple':
-      return `The community has flagged this package as redundant, with the advice: ${replacement.replacement}.`
+      return {
+        message: `The community has flagged this package as redundant, with the advice:\n${replacement.replacement}.`,
+      }
     case 'documented':
-      return `The community has flagged this package as having more performant alternatives. Read more here: ${getReplacementsDocUrl(replacement.docPath)}`
+      return {
+        message: 'The community has flagged this package as having more performant alternatives.',
+        link: getReplacementsDocUrl(replacement.docPath),
+      }
     case 'none':
-      return 'This package has been flagged as no longer needed, and its functionality is likely available natively in all engines.'
+      return {
+        message: 'This package has been flagged as no longer needed, and its functionality is likely available natively in all engines.',
+      }
   }
 }
 
@@ -30,9 +40,12 @@ export const checkReplacement: DiagnosticRule = async (dep) => {
   if (!replacement)
     return
 
+  const { message, link } = getReplacementInfo(replacement)
+
   return {
     node: dep.nameNode,
-    message: generateMessage(replacement),
+    message,
     severity: DiagnosticSeverity.Warning,
+    code: link ? { value: 'replacement', target: Uri.parse(link) } : 'replacement',
   }
 }

src/providers/diagnostics/rules/vulnerability.ts

@@ -1,8 +1,9 @@
 import type { OsvSeverityLevel } from '#utils/api/vulnerability'
 import type { DiagnosticRule } from '..'
 import { getVulnerability, SEVERITY_LEVELS } from '#utils/api/vulnerability'
+import { npmxPackageUrl } from '#utils/links'
 import { extractVersion } from '#utils/package'
-import { DiagnosticSeverity } from 'vscode'
+import { DiagnosticSeverity, Uri } from 'vscode'
 
 const DIAGNOSTIC_MAPPING: Record<Exclude<OsvSeverityLevel, 'unknown'>, DiagnosticSeverity> = {
   critical: DiagnosticSeverity.Error,
@@ -45,5 +46,9 @@ export const checkVulnerability: DiagnosticRule = async (dep, pkg) => {
     node: dep.versionNode,
     message: `This version has ${message.join(', ')} ${message.length === 1 ? 'vulnerability' : 'vulnerabilities'}`,
     severity: DiagnosticSeverity.Error,
+    code: {
+      value: 'vulnerability',
+      target: Uri.parse(npmxPackageUrl(dep.name, exactVersion)),
+    },
   }
 }

src/utils/links.ts

@@ -0,0 +1,7 @@
+import { NPMX_DEV } from '#constants'
+
+export function npmxPackageUrl(name: string, version?: string): string {
+  return version
+    ? `${NPMX_DEV}/package/${name}/v/${version}`
+    : `${NPMX_DEV}/package/${name}`
+}