Create guides and best practices for extension authors

[daviddossett]

Feature/component description

Lets ensure extension authors have great docs, walkthroughs, and/or other resources to help them build webview extensions that look and feel native to VS Code. This could take the form of Figma files, videos, docs, sample extensions, and more!

[daviddossett]

Some early thoughts on how we could improve the experience of developing webviews (taken from offline brainstorm w/ @hawkticehurst and @misolori)

Hypotheses

• There are limited design guidelines and samples that showcase best practices and inspiration for extensions using webviews
• The cat coding guide feels intimidating as a first introduction to webviews. It also feels unrelated to a real UI.
• Developers aren’t aware that they can leverage a UI toolkit in their webviews

How could we help provide design guidance?

• More detailed higher-level patterns (sidebar, editor, both, etc.)
• Component-level documentation (do/don't, usage, examples)
• Clearly illustrate common API capabilities we see often duplicated (e.g. TreeView)
• ...

How could we improve the dev docs?

• Simplify the core VS Code webview API docs and explain concepts for less experienced developers (e.g. disposing)
• Brief summary of toolkit usage in core VS Code docs w/ link to a detailed walkthrough in the toolkit repo
• Add hello world starter templates for extension authors to clone in various permutations (vanilla js, frameworks, build systems)
• Add generalized guidelines for frameworks in toolkit docs

More to come 🤘