Show basic TypeScript errors #120
Conversation
| /* It would be nice to use "text-decoration: red wavy underline" here, | ||
| but unfortunately it renders nothing at all for single characters. | ||
| See https://bugs.chromium.org/p/chromium/issues/detail?id=668042. */ | ||
| border-bottom: var(--playground-error-border, 2px red dashed); |
There was a problem hiding this comment.
Q: this seems to layout fine, but I wondered if outline was the correct property to use.?
There was a problem hiding this comment.
outline always applies to all 4 sides, not just the bottom. I think border doesn't mess with layout here because CodeMirror fixes the height of every line.
| @@ -203,6 +189,9 @@ export class PlaygroundCodeEditor extends LitElement { | |||
| case 'pragmas': | |||
| this._applyHideAndFoldRegions(); | |||
| break; | |||
| case 'diagnostics': | |||
| this._showDiagnostics(); | |||
| break; | |||
There was a problem hiding this comment.
I'd love to have an @observe decorator or similar for this pattern...
| * Convert a diagnostic from TypeScript format to Language Server Protocol | ||
| * format. | ||
| */ | ||
| function makeLspDiagnostic(tsDiagnostic: ts.Diagnostic): lsp.Diagnostic { |
There was a problem hiding this comment.
Interesting. You didn't see a function like this in typescript itself?
There was a problem hiding this comment.
Yeah, I don't think TypeScript has any LSP awareness. VSCode contains a similar TS->LSP converter function: https://github.com/microsoft/vscode/blob/a74ebb17cfe0e2c023b83e24ec0403ab72217a11/extensions/typescript-language-features/src/typeScriptServiceClientHost.ts#L255
google#111 renderItem is sometimes called with undefined
…irtualizer-directive Apply fix from pull request google#120 to directive implementation
Syntactic and other basic TypeScript errors are now shown with red underlines and a tooltip on hover.
We currently can't show any errors that depend on typings, because we don't fetch them (even the standard libs)! This will require some more work -- tracking separately at Fetch and import dependency and standard lib typings #119 and will send as followup.
It's using the Language Server Protocol
Diagnostictype as the interface. Should be good for other diagnostic sources we might add in the future.Sadly, we're currently displaying a
border-bottom: 2px dashed red, instead oftext-decoration: red wavy underline, becausewavydoesn't render anything for single characters (!): https://bugs.chromium.org/p/chromium/issues/detail?id=668042). Could add a custom implementation of wavy underlines as a followup.Try it out at https://polymerlabs.github.io/playground-elements/
Part of #67