feat(vscode): add examples to inlay hints configuration (#5068)

Author: KazariEX

extensions/vscode/README.md

@@ -257,22 +257,16 @@ Finally you need to make VS Code recognize your new extension and automatically
 
 ## Commands
 
-<!-- commands -->
-
-| Command                        | Title                                                  |
-| ------------------------------ | ------------------------------------------------------ |
-| `vue.action.restartServer`     | Vue: Restart Vue and TS servers                        |
-| `vue.action.doctor`            | Vue: Doctor                                            |
-| `vue.action.writeVirtualFiles` | Vue (Debug): Write Virtual Files                       |
-| `vue.action.splitEditors`      | Vue: Split &lt;script&gt;, <template>, <style> Editors |
-| `vue.findAllFileReferences`    | Vue: Find File References via Vue Language Server      |
-
-<!-- commands -->
+| Command                        | Title                                                   |
+| ------------------------------ | ------------------------------------------------------- |
+| `vue.action.restartServer`     | Vue: Restart Vue and TS servers                         |
+| `vue.action.doctor`            | Vue: Doctor                                             |
+| `vue.action.writeVirtualFiles` | Vue (Debug): Write Virtual Files                        |
+| `vue.action.splitEditors`      | Vue: Split `<script>`, `<template>`, `<style>` Editors  |
+| `vue.findAllFileReferences`    | Vue: Find File References via Vue Language Server       |
 
 ## Configs
 
-<!-- configs -->
-
 | Key                                   | Description                                                                                                                                                        | Type             | Default                             |
 | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------- | ----------------------------------- |
 | `vue.trace.server`                    | Traces the communication between VS Code and the language server.                                                                                                  | `string`         | `"off"`                             |
@@ -292,7 +286,7 @@ Finally you need to make VS Code recognize your new extension and automatically
 | `vue.complete.casing.props`           | Preferred attr name case.                                                                                                                                          | `string`         | `"autoKebab"`                       |
 | `vue.complete.defineAssignment`       | Auto add `const props = ` before `defineProps` when selecting the completion item `props`. (also `emit` and `slots`)                                               | `boolean`        | `true`                              |
 | `vue.autoInsert.dotValue`             | Auto-complete Ref value with `.value`.                                                                                                                             | `boolean`        | `false`                             |
-| `vue.autoInsert.bracketSpacing`       | Auto add space between double curly brackets: {{&vert;}} -&gt; {{ | }}                                                                                             | `boolean`        | `true`                              |
+| `vue.autoInsert.bracketSpacing`       | Auto add space between double curly brackets: <code>{{&vert;}}</code> -> <code>{{ &vert; }}</code>                                                                 | `boolean`        | `true`                              |
 | `vue.inlayHints.destructuredProps`    | Show inlay hints for destructured props.                                                                                                                           | `boolean`        | `false`                             |
 | `vue.inlayHints.missingProps`         | Show inlay hints for missing required props.                                                                                                                       | `boolean`        | `false`                             |
 | `vue.inlayHints.inlineHandlerLeading` | Show inlay hints for event argument in inline handlers.                                                                                                            | `boolean`        | `false`                             |
@@ -302,5 +296,3 @@ Finally you need to make VS Code recognize your new extension and automatically
 | `vue.format.style.initialIndent`      |                                                                                                                                                                    | `boolean`        | `false`                             |
 | `vue.format.script.initialIndent`     |                                                                                                                                                                    | `boolean`        | `false`                             |
 | `vue.format.wrapAttributes`           |                                                                                                                                                                    | `string`         | `"auto"`                            |
-
-<!-- configs -->

extensions/vscode/package.json

@@ -402,27 +402,27 @@
 				"vue.inlayHints.destructuredProps": {
 					"type": "boolean",
 					"default": false,
-					"description": "Show inlay hints for destructured props."
+					"markdownDescription": "Show inlay hints for destructured props:\n\n```ts\nwatch(() => /* props. */foo, () => { ... });\n```"
 				},
 				"vue.inlayHints.missingProps": {
 					"type": "boolean",
 					"default": false,
-					"description": "Show inlay hints for missing required props."
+					"markdownDescription": "Show inlay hints for missing required props:\n\n```html\n<Comp />\n<!-- ^ foo! -->\n```"
 				},
 				"vue.inlayHints.inlineHandlerLeading": {
 					"type": "boolean",
 					"default": false,
-					"description": "Show inlay hints for event argument in inline handlers."
+					"markdownDescription": "Show inlay hints for event argument in inline handlers:\n\n```html\n<Comp @foo=\"/* $event => */console.log($event)\" />\n```"
 				},
 				"vue.inlayHints.optionsWrapper": {
 					"type": "boolean",
 					"default": false,
-					"description": "Show inlay hints for component options wrapper for type support."
+					"markdownDescription": "Show inlay hints for component options wrapper for type support:\n\n```vue\n<script lang=\"ts\">\nexport default /* (await import('vue')).defineComponent( */{}/* ) */;\n</script>\n```"
 				},
 				"vue.inlayHints.vBindShorthand": {
 					"type": "boolean",
 					"default": false,
-					"description": "Show inlay hints for v-bind shorthand."
+					"markdownDescription": "Show inlay hints for v-bind shorthand:\n\n```html\n<Comp :foo />\n     <!-- ^ =\"foo\" -->\n```"
 				},
 				"vue.format.template.initialIndent": {
 					"type": "boolean",