Skip to content

Optional quick start from snippet/template in empty files #145929

Closed
Closed
Optional quick start from snippet/template in empty files#145929
Assignees
digitaraldjrieken
Labels
feature-requestRequest for new features or functionalitysnippetsunder-discussionIssue is under discussion for relevance, priority, approachverification-neededVerification of issue is requestedverifiedVerification succeeded
Milestone
August 2022

Description

@digitarald
Harald Kirschner (digitarald)
opened on Mar 23, 2022

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 Steven Clarke (@stevencl) Sana Ajani (@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.

Activity

  1. ImageHarald Kirschner (digitarald)
    added
    feature-requestRequest for new features or functionality
    on Mar 23, 2022
  2. ImageHarald Kirschner (digitarald)
    added this to the Backlog milestone on Mar 23, 2022
  3. ImageHarald Kirschner (digitarald)
    self-assigned this
    on Mar 23, 2022
  4. ImageHarald Kirschner (digitarald)
    changed the title [-]Optional quick start from snippet in empty files[/-] [+]Optional quick start from snippet/template in empty files[/+] on Mar 31, 2022
  5. ImageHarald Kirschner (digitarald)
    added
    under-discussionIssue is under discussion for relevance, priority, approach
    on Mar 31, 2022
  6. ImageHarald Kirschner (digitarald)
    modified the milestones: Backlog, April 2022 on Mar 31, 2022

  7. digitarald commented on Apr 1, 2022

    @digitarald
    Harald Kirschner (digitarald)
    on Apr 1, 2022
    ContributorAuthor

    Related user feedback: #145046 (comment)

  8. ImageTylerLeonhardt
    modified the milestones: April 2022, May 2022 on Apr 29, 2022
  9. ImageJohannes Rieken (jrieken)
    self-assigned this
    on May 2, 2022
  10. ImageJohannes Rieken (jrieken)
    added
    snippets
    on May 2, 2022
  11. ImageJoão Moreno (joaomoreno)
    modified the milestones: May 2022, June 2022 on Jun 2, 2022
  12. ImageJohannes Rieken (jrieken)
    removed this from the June 2022 milestone on Jun 27, 2022

  13. 15 remaining items

  14. andreamah commented on Jul 27, 2022

    @andreamah
    Andrea Mah (andreamah)
    on Jul 27, 2022
    Contributor

    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.
    Recording 2022-07-27 at 11 14 27

  15. ImageAndrea Mah (andreamah)
    added
    verification-foundIssue verification failed
    and removed
    verifiedVerification succeeded
    on Jul 27, 2022
  16. ImageConnor Peet (connor4312)
    reopened this on Jul 27, 2022
  17. ImageAlexandru Dima (alexdima)
    self-assigned this
    on Jul 29, 2022
  18. ImageAlexandru Dima (alexdima)
    modified the milestones: July 2022, August 2022 on Jul 29, 2022
  19. ImageAlexandru Dima (alexdima)
    removed their assignment
    on Jul 29, 2022
  20. ImageJohannes Rieken (jrieken)
    closed this as completedon Aug 16, 2022

  21. jrieken commented on Aug 16, 2022

    @jrieken
    Johannes Rieken (jrieken)
    on Aug 16, 2022
    Contributor

    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

  22. rzhao271 commented on Aug 25, 2022

    @rzhao271
    Raymond Zhao (rzhao271)
    on Aug 25, 2022
    Collaborator

    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.

  23. ImageRaymond Zhao (rzhao271)
    added
    verifiedVerification succeeded
    and removed
    verification-foundIssue verification failed
    on Aug 25, 2022

  24. hinell commented on Sep 6, 2022

    @hinell
    hinell (hinell)
    on Sep 6, 2022

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

    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"
// }
  25. Imagegithub-actions
    locked and limited conversation to collaborators on Sep 30, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

feature-requestRequest for new features or functionalitysnippetsunder-discussionIssue is under discussion for relevance, priority, approachverification-neededVerification of issue is requestedverifiedVerification succeeded

Type

No type

Projects

No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions