feat(vls): console error when dev

fi3ework · Jun 10, 2021 · 1f9699c · 1f9699c
1 parent fdc0360
commit 1f9699c
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 26 deletions.
diff --git a/examples/vue2-ts/src/components/HelloWorld.vue b/examples/vue2-ts/src/components/HelloWorld.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="hello">
-    <h1>{{ msg123 }}</h1>
+    <h1>{{ msg1 }}</h1>
     <p>
       For a guide and recipes on how to configure / customize this project,<br />
       check out the

diff --git a/presets/vls/src/commands/diagnostics.ts b/presets/vls/src/commands/diagnostics.ts
@@ -201,19 +201,15 @@ async function getDiagnostics(
         .filter((r) => r.severity && r.severity <= severity)
       if (res.length > 0) {
         res.forEach((d) => {
-          const location = range2Location(d.range)
-          console.log(
-            `${chalk.green('File')} : ${chalk.green(absFilePath)}:${location.start.line}:${
-              location.start.column
-            }`
-          )
+          prettyLspConsole({
+            d,
+            absFilePath,
+            fileText,
+          })
+
           if (d.severity === DiagnosticSeverity.Error) {
-            console.log(`${chalk.red('Error')}: ${d.message.trim()}`)
             errCount++
-          } else {
-            console.log(`${chalk.yellow('Warn')} : ${d.message.trim()}`)
           }
-          console.log(codeFrameColumns(fileText, location))
         })
         console.log('')
       }
@@ -224,3 +220,27 @@ async function getDiagnostics(
 
   return errCount
 }
+
+export function prettyLspConsole({
+  d,
+  absFilePath,
+  fileText,
+}: {
+  d: Diagnostic
+  absFilePath: string
+  fileText: string
+}) {
+  const location = range2Location(d.range)
+  console.log(
+    `${chalk.green('File')} : ${chalk.green(absFilePath)}:${location.start.line}:${
+      location.start.column
+    }`
+  )
+  if (d.severity === DiagnosticSeverity.Error) {
+    console.log(`${chalk.red('Error')}: ${d.message.trim()}`)
+    // errCount++
+  } else {
+    console.log(`${chalk.yellow('Warn')} : ${d.message.trim()}`)
+  }
+  console.log(codeFrameColumns(fileText, location))
+}
diff --git a/presets/vls/src/main.ts b/presets/vls/src/main.ts
@@ -1,9 +1,12 @@
 import type { UserConfig, ViteDevServer } from 'vite'
-import { CheckerFactory, CreateDiagnostic, lspDiagnosticToViteError } from 'vite-plugin-ts-checker'
+import {
+  CheckerFactory,
+  CreateDiagnostic,
+  lspDiagnosticToViteError,
+  uriToAbsPath,
+} from 'vite-plugin-ts-checker'
 
-import { codeFrameColumns } from '@babel/code-frame'
-
-import { DiagnosticOptions, diagnostics } from './commands/diagnostics'
+import { DiagnosticOptions, diagnostics, prettyLspConsole } from './commands/diagnostics'
 
 export const createDiagnostic: CreateDiagnostic = (userOptions = {}) => {
   let overlay = true // Vite defaults to true
@@ -19,22 +22,24 @@ export const createDiagnostic: CreateDiagnostic = (userOptions = {}) => {
     },
     async configureServer(server: ViteDevServer) {
       const workDir: string = userOptions.root ?? server.config.root
-      const errorCallback: DiagnosticOptions['errorCallback'] = (d) => {
-        if (!d.diagnostics.length) return
-        const firstDiagnostic = d.diagnostics[0]
-
-        codeFrameColumns(firstDiagnostic.source || 'no code', {
-          start: { line: 1, column: 1 },
-          end: { line: 1, column: 1 },
-        })
-
-        const overlayErr = lspDiagnosticToViteError(d)
+      const errorCallback: DiagnosticOptions['errorCallback'] = (diagnostics) => {
+        if (!diagnostics.diagnostics.length) return
+        const overlayErr = lspDiagnosticToViteError(diagnostics)
         if (!overlayErr) return
+
         server.ws.send({
           type: 'error',
           err: overlayErr,
         })
+        diagnostics.diagnostics.forEach((d) => {
+          prettyLspConsole({
+            d,
+            absFilePath: uriToAbsPath(diagnostics.uri),
+            fileText: overlayErr.fileText,
+          })
+        })
       }
+
       await diagnostics(workDir, 'WARN', { watch: true, errorCallback })
     },
   }

diff --git a/src/utils.ts b/src/utils.ts
@@ -84,7 +84,7 @@ export function range2Location(range: Range): SourceLocation {
 
 export function lspDiagnosticToViteError(
   diagnostics: PublishDiagnosticsParams
-): ErrorPayload['err'] | null {
+): (ErrorPayload['err'] & { fileText: string }) | null {
   if (!diagnostics.diagnostics.length) return null
 
   const d = diagnostics.diagnostics[0]
@@ -106,6 +106,7 @@ export function lspDiagnosticToViteError(
   // has detail message
   if (d.message && typeof d.range === 'object') {
     return {
+      fileText,
       message: strip(
         ts.flattenDiagnosticMessageText(d.message, formatHost.getNewLine()) +
           os.EOL +
@@ -121,6 +122,7 @@ export function lspDiagnosticToViteError(
 
   // no detail message
   return {
+    fileText,
     message: ts.flattenDiagnosticMessageText(d.message, formatHost.getNewLine()),
     stack: '',
     id: absPath,