From 104b0cb5877c2da2ed37aaf6d90a6d1743fa85fd Mon Sep 17 00:00:00 2001 From: hamidreza kalbasi Date: Fri, 27 Aug 2021 12:53:29 +0430 Subject: [PATCH] add example for inlay hints --- .../exposed-colors/sample.js | 2 + .../inlay-hints-provider-example/sample.css | 0 .../inlay-hints-provider-example/sample.html | 1 + .../inlay-hints-provider-example/sample.js | 38 +++++++++++++++++++ 4 files changed, 41 insertions(+) create mode 100644 website/playground/new-samples/extending-language-services/inlay-hints-provider-example/sample.css create mode 100644 website/playground/new-samples/extending-language-services/inlay-hints-provider-example/sample.html create mode 100644 website/playground/new-samples/extending-language-services/inlay-hints-provider-example/sample.js diff --git a/website/playground/new-samples/customizing-the-appearence/exposed-colors/sample.js b/website/playground/new-samples/customizing-the-appearence/exposed-colors/sample.js index 24d5cc1c..f4c30492 100644 --- a/website/playground/new-samples/customizing-the-appearence/exposed-colors/sample.js +++ b/website/playground/new-samples/customizing-the-appearence/exposed-colors/sample.js @@ -107,6 +107,8 @@ monaco.editor.create(document.getElementById("container"), { 'editorLineNumber.activeForeground' // Color of editor active line number. 'editorRuler.foreground' // Color of the editor rulers. 'editorCodeLens.foreground' // Foreground color of editor code lenses +'editorInlayHint.foreground' // Foreground color of editor inlay hints +'editorInlayHint.background' // Background color of editor inlay hints 'editorBracketMatch.background' // Background color behind matching brackets 'editorBracketMatch.border' // Color for matching brackets boxes 'editorOverviewRuler.border' // Color of the overview ruler border. diff --git a/website/playground/new-samples/extending-language-services/inlay-hints-provider-example/sample.css b/website/playground/new-samples/extending-language-services/inlay-hints-provider-example/sample.css new file mode 100644 index 00000000..e69de29b diff --git a/website/playground/new-samples/extending-language-services/inlay-hints-provider-example/sample.html b/website/playground/new-samples/extending-language-services/inlay-hints-provider-example/sample.html new file mode 100644 index 00000000..b2e43e28 --- /dev/null +++ b/website/playground/new-samples/extending-language-services/inlay-hints-provider-example/sample.html @@ -0,0 +1 @@ +
diff --git a/website/playground/new-samples/extending-language-services/inlay-hints-provider-example/sample.js b/website/playground/new-samples/extending-language-services/inlay-hints-provider-example/sample.js new file mode 100644 index 00000000..d130233d --- /dev/null +++ b/website/playground/new-samples/extending-language-services/inlay-hints-provider-example/sample.js @@ -0,0 +1,38 @@ +const value = ` +const f = (a, b) => a + b; + +const result = f(2, 5); +`; + +const editor = monaco.editor.create(document.getElementById("container"), { + value, + language: "javascript" +}); + +monaco.languages.registerInlayHintsProvider('javascript', { + provideInlayHints(model, range, token) { + return [{ + kind: monaco.languages.InlayHintKind.Type, + position: { column: 13, lineNumber: 4 }, + text: `: Number`, + }, { + kind: monaco.languages.InlayHintKind.Type, + position: { column: 13, lineNumber: 2 }, + text: `: Number`, + }, { + kind: monaco.languages.InlayHintKind.Type, + position: { column: 16, lineNumber: 2 }, + text: `: Number`, + whitespaceBefore: true, // see difference between a and b parameter + }, { + kind: monaco.languages.InlayHintKind.Parameter, + position: { column: 18, lineNumber: 4 }, + text: `a:`, + }, { + kind: monaco.languages.InlayHintKind.Parameter, + position: { column: 21, lineNumber: 4 }, + text: `b:`, + whitespaceAfter: true, // similar to whitespaceBefore + }] + } +});