This really simple extension provides a very small set of functionality, but I think it’s already useful for this specific purpose.
This is what it looks like to save code fragments.Īnd inserting a Code Fragment to the current cursor position. Namely, I wasn’t able to handle dragging and dropping a piece of code to the Explorer window, and also the other way around, items in the explorer tree views are not draggable.Ī piece of code can be saved as a fragment by selecting it in the editor, and then executing the “Save selection as Code Fragment” from the Command Palette (brought up with Ctrl+Shift+P) or in the context menu.Ĭlicking on an existing fragment in the list inserts its content into the editor at the current cursor position. I wanted to base the design on the experience the VS Toolbox provided, but I had to diverge due to the limitations of VSCode. (I used the term fragment in order not to confuse these with actual code snippets.) I decided to implement a VSCode extension for this specific purpose, which I called Code Fragments. But I think we can all agree that this approach is way too clunky 🙂). (The other alternative would be to just prepare all the demo code in a separate file, and copy paste the necessary chunks during the presentation. I could’ve used actual code snippets, but then I’d have to remember the alias of the snippet during the demo, and also, creating a VSCode snippet is a bit too involved for this purpose.
NET Core, I wanted to use Visual Studio Code instead of Visual Studio during my presentations, but it was a significant drawback for me that it didn’t have this feature-there is no Toolbox window where pieces of code could be easily saved. We can create such a “snippet” (not to be confused with actuala code snippets) by selecting a piece of code, and dropping it onto the Toolbox window. To make this smoother, Visual Studio has always had a really useful-although somewhat undocumented-feature, which makes it possible to save snippets of code, and easily insert them during the presentation, to save some typing. Occasionally I do tech presentations, in which I usually like to do some live code demos. Recently I started working on a simple Visual Studio Code extension I’d like to introduce in this post. visual studio visual studio code presenting.Ng1directive // creates an Angular directiveĪlternatively, press Ctrl+ Space (Windows, Linux) or Cmd+ Space (OSX) to activate snippets from within the editor.Introducing Code Fragments extension in Visual Studio Code for managing snippets during presentations ng1controller // creates an Angular controller Type part of a snippet, press enter, and the snippet unfolds. This extension for Visual Studio Code adds snippets for Angular 1 for TypeScript and JavaScript. Angular 1 TypeScript and JavaScript Snippets for VS Code Ng2service // creates an Angular 2 serviceĪlternatively, press Ctrl+ Space (Windows, Linux) or Cmd+ Space (OSX) to activate snippets from within the editor. ng2component // creates an Angular 2 component From the command palette Ctrl- Shift- P (Windows, Linux) or Cmd- Shift- P (OSX).
#VISUAL STUDIO CODE SNIPPETS EDIT EXISTING INSTALL#
0 kommentar(er)
