Optional quick start from snippet/template in empty files

[digitarald]

When starting a new file, I want to have the option to pick from template, so that I don't have to start from scratch and google for a boilerplate to paste in.

It happened a few times like this in user testing. Participants create a file, discover the intuitive language quick pick that the placeholder offers and are delighted 😁. With a blank file in hand they then wander off to search engines to find boilerplate to test 🤨. Some languages suffer worse than others from impossible to remember boilerplate (HTML 😭). I never saw participants using snippets or emmet as the magic fast path to fill a file quickly.

How might we apply the placeholder text that allows picking a language to also picking a template:

Starting with an untitled buffer:

1. Create untitled buffer
2. Placeholder text offers to pick a language -> Quick pick HTML
3. Placeholder text offers to start from a template --> Quick pick html!!
4. 🎉

From creating an empty file in the workspace:

1. Create new index.html file in Explorer and open it.
2. Placeholder text offers to start from a template --> Quick pick html!!
3. 🎉

Snippets could be the existing system to provide those templates. They already have a prefix and description, which can be used in the quick pick. Their placeholders can also help to quickly name a component that is being created, set a title, etc.

cc @stevencl @sana-ajani

Ideas:

• The quick pick selection could also preview the snippet as ghost text.
• Easter egg for pasting a little HTML game or spinning VS Code logo.

[digitarald]

Related user feedback: #145046 (comment)

[jrieken]

@digitarald Let's discuss but the implementation has to wail till July

[jrieken]

• for snippets add "isTopLevel": true property
• new file flow (plaintext): add to existing ghost text, "start from snippet" which shows all snippets of languages and sets both: language and snippet
• Also, automatically populate new files with configured snippets. Have user/workspace setting that links langId to snippet-source or snippet-reference
• update built-in snippets with this new feature
• ping extension authors

[jrieken]

With #155321 (a bigger PR with some other things as well)

Screen.Recording.2022-07-15.at.18.06.28.mov

Snippets that have one or more scopes (set via the JSON-property or their file-name, in case of extensions) also set the document language. Snippets without scope (rare) don't affect the language

---

@digitarald I believe we should reconsider the isTopLevel-name. Maybe be all explicit and name it "isForEmptyFile" or so 🤷

[ArturoDent]

Maybe newFileTemplate or just template.

[hahn-kev]

I like newFileSnippet or fileSnippet all snippets can be templates already (meaning they have a variable that gets substituted at evaluation time) so I'm not sure using the word template is helpful here.

[jrieken]

We went with isFileTemplate

[jrieken]

To verify:

• have a custom or contributed snippets that uses the isFileTemplate-property (see below)
• run F1 > Populate File From Snippet
• verify that it replaces the file contents the selected snipppet and that it sets the language
• verify it only sets the language when the snippets defines one (via scope for *.code-snippets files)
• invoke code actions (cmd+.) in an empty file and make sure there is a code action for each template snippet

"css-template": {
"isFileTemplate": true,
"scope": "css,javascript",
"body": [
	"* {",
	"\tcolor: ${1:green};",
	"}",
]
},

[andreamah]

I find that files that are out-of scope are also allowing for code snippets. I made a txt file for your example above and it still allowed me to paste it in.

[jrieken]

I find that files that are out-of scope are also allowing for code snippets.

It will always show all "file snippets" but it will only update the language mode if the snippets defines one. The point of the feature is to populate the (empty) file with contents and set the corresponding language. That why there is no filtering

[rzhao271]

When I insert the JS snippet in a new empty file, the language changes to JS, but then auto-detection changes it back to CSS.

[hinell]

Please, update documentation on this feature in the related documentation:

• VSCode # Userdefinedsnippets

I also request to update every new snippet header file to:

// ...
// "Print to console": {
// 	"scope": "javascript,typescript",
//     "isTopLevel": true,
// 	"prefix": "log",
// 	"body": [
// 		"console.log('$1');",
// 		"$2"
// 	],
// 	"description": "Log output to console"
// }