VSCode to Visual Studio IDE code snippet conversion - visual-studio

Consider the following VSCode code snippet taken from here:
"var set get f m_":{
"prefix": "varsetgetfm",
"body":[
"${1:int} ${2:VARNM};",
"$1 ${2/^(?:f|m)_?([A-Za-z])(.*)|([A-Z].*)$/${1:/downcase}$2${3:/downcase}/}(){return $2;}",
"void ${2/^(?:f|m)_?([A-Za-z])(.*)|([A-Z].*)$/${1:/downcase}$2${3:/downcase}/}($1 val){$2 = val;}"
]
}
Is there a way to convert this and other snippets from VSCode to a format usable in Visual Studio IDE automatically without having to manually figure out the equivalent? Visual Studio IDE seems to have xml based snippets and not json based snippets like VSCode does.

There’s no existing way. There’s however a way and it involves parsing the json and creating the xml needed.
You can use the schema reference link to see json <-> xml, snippet, equivalent.
In other words, make it yourself. Should be fairly easy given that all the details are already documented by Microsoft.
Next day edit:
Take a look at this gif I made . It replicates partially replicates the vscode snippet inside visual studio.
Also, the snippet xml code:
<?xml version="1.0" encoding="utf-8" ?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
<CodeSnippet Format="1.0.0">
<Header>
<Title>varsetget</Title>
<Shortcut>varsetget</Shortcut>
<Description>Code snippet testing</Description>
<Author>Dorian</Author>
</Header>
<Snippet>
<Declarations>
<Literal>
<ID>type</ID>
<ToolTip>the var type</ToolTip>
<Default>int</Default>
</Literal>
<Literal>
<ID>VARNM</ID>
<ToolTip>the var name</ToolTip>
<Default>VARNM</Default>
</Literal>
</Declarations>
<Code Language="csharp"><![CDATA[
$selected$$type$$end$ $VARNM$;
$type$ $VARNM$(){return $VARNM$;}
void $VARNM$($type$ val){$VARNM$ = val;}
]]>
</Code>
</Snippet>
</CodeSnippet>
</CodeSnippets>
To be able to use it, create a *.snippet file wherever you want on your machine with the code above, then:
Navigate and open the *.snippet file you created
You can now test out the snippet
NOTE: In Visual Studio 2019 the default of inserting a code snippet or moving to the next Declaration Literal is pressing Tab twice as opposed to Visual Studio Code, where only one Tab is needed.
Everything I wrote is from the msdocs or deducted from the examples there.
My last edit:
It looks like you're not out of luck. But I do not have the time to investigate/test further, sadly. https://learn.microsoft.com/en-us/dotnet/api/microsoft.visualstudio.package.expansionfunction?view=visualstudiosdk-2019
Also, according to this SO post you basically would have to create your own language, which I personally doubt.
PS: How come the guys at MS q&a didn't suggest this I do not understand...

Related

how to add custom code snippets for Razor pages (cshtml) in VS

Is it possible to add custom code snippets for Razor pages using the Code Snippets Manager in Visual Studio?
I can add snippets for HTML, but I can't find CSHTML anywhere.
I'm using Visual Studio Community 2019 16.4.1
That is because there are no dedicated Cshtml snippets. The Razor code is either C# or VB, so those snippets will be valid in a code block.
To use those snippets you simply have to open a code-block:
Either type # or #( to open an explicit statement
type foreach
type tab twice to activate the snippet
To edit the snippets, press Ctrl+K, Ctrl+B
This worked for me in Visual Studio 2019
Create and save your XML .snippet file. Example template:
<CodeSnippet Format="1.1.0">
<Header>
<Title>NameOfSnippet</Title>
<Author>YourName</Author>
<Shortcut>ShortCutName</Shortcut>
<Description>Description</Description>
<SnippetTypes>
<SnippetType>Expansion</SnippetType>
</SnippetTypes>
</Header>
<Snippet>
<Declarations>
<Literal>
<ID>Id</ID>
<ToolTip>Please add an ID</ToolTip>
<Default>REPLACE_ID</Default>
</Literal>
</Declarations>
<Code Language="html"><![CDATA[<div id="$Id$">Example HTML Snippet</div>$end$]]></Code>
</Snippet>
Tools > Code Snippet Manager > Language Dropdown: html > Import
Navigation to your .snippet file and open
Select both My HTML Snippets & HTML
Select Finish and OK
Open a cshtml file and type in your ShortCutName > hit tab
You should see your snippet in the cshtml, since language is html, and not CSharp, no need to open a code block
When I was trying to tackle this problem, the thing that was missing in my mental model was that a .cshtml file consists of multiple parts that are in their own language context. For example, you could have:
a <style></style> block that its contents would be css and VS would recognize CSS snippets in there,
a <script></script> block that has javascript content and VS would recognize javascript snippets
a # block where vs could recognize either CSharp or Basic snippets
If you aren't in one of the other spots, html snippets are recognized.
In my case, I wanted to add a javascript snippet but I thought that the available snippets were tied directly with my file type so I was trying to add them as HTML snippets (and then was disappointed when they didn't show up in my script tag).
ALSO, its important to note that at least with VS 2017, you may need to restart VS to get the editor to recognize any new snippets.

How do I change the suggestion that displays when I type part of command?

I do a lot of JavaScript in Visual Studio and I would often type the letters cl which would then cause a popup to display. In that popup "console.log" would highlight and I would hit tab and it would put that command in my editor.
Something happened however in that now when I type cl the word "class" is highlighted. I don't know what happened but how do I make it go back to showing/highlighting console.log?
Thanks.
Check your Code Snippets Manager (Tools > Code Snippets Manager...)
Under the JavaScript language you should see the cl snippet you use.
If you need to recreate the snippet file, create a new cl.snippet file in your snippets location with this content, then add it from the Code Snippets Manager.
<CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
<Header>
<Title>cl</Title>
<Author>Microsoft Corporation</Author>
<Shortcut>cl</Shortcut>
<Description>Code snippet for console.log</Description>
<SnippetTypes>
<SnippetType>Expansion</SnippetType>
</SnippetTypes>
</Header>
<Snippet>
<Code Language="JavaScript"><![CDATA[console.log($end$);]]></Code>
</Snippet>
</CodeSnippet>
EDIT
To have your console.log() functionality work in .html and .cshtml files, create a new code snippet file like above, but change the Code Language from JavaScript to HTML. Save the file in your My HTML Snippets file location.
(To find it, in Code Snippets Manager, select Language: HTML, and highlight My HTML Snippets. The Location is displayed. For me it is C:\Users{user.name}\Documents\Visual Studio 2017\Code Snippets\Visual Web Developer\My HTML Snippets.)
Now typing CLTab should populate with console.log();.

Visual Studio - Is there a shortcut to insert parentheses around a selection?

I am playing with Atom and I really like how I can select an expression and press Shift+9 to insert ( and ) outside it. This is convenient for Haskell and I would like the same for F#. Is there a shortcut for this?
This is an in-built option in Visual Studio 2017. Go to Tools -> Options -> C / C++ -> Advanced, then navigate within the options dialog as shown on the screenshot below.
Set the Enable Surround with Parentheses option to True.
This works for C++, but the process ought to be similar for other languages.
Once you click OK, you should be able to automatically insert parentheses around any selected text by typing only the first (
Stumbled upon this when searching parenthesis surrounding for C# in VS2022. Another free method (non-hacky) to add in Dan Cundy's list: Auto Surround extension available for Visual studio 2022
Paid Method
You should check out a third party add-in like Resharper. They bundle a such abilities.
Resharper
Free Method
There is another method noted by #Igor Zevaka.
Here: Any way to surround code block with Curly Braces {} in VS2008?
This allows you to create a snippet, and use a shortcut to use it.
Here is a quick and dirty snippet to do just that.
To Install:
Save the code as SurroundWithBraces.snippet into "\Visual Studio Version\Code Snippets\Visual C#\My Code
Snippets"
To use:
Select block of text. Press Ctrl+K, Ctrl+S Chose My Code Snippets,
braces
<?xml version="1.0" encoding="utf-8" ?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
<CodeSnippet Format="1.0.0">
<Header>
<Title>braces</Title>
<Shortcut>braces</Shortcut>
<Description>Code snippet to surround a block of code with braces</Description>
<Author>Igor Zevaka</Author>
<SnippetTypes>
<SnippetType>Expansion</SnippetType>
<SnippetType>SurroundsWith</SnippetType>
</SnippetTypes>
</Header>
<Snippet>
<Code Language="csharp">
<![CDATA[{
$selected$ $end$
}]]>
</Code>
</Snippet>
</CodeSnippet>
</CodeSnippets>

Visual Studio Code Snippets From Snippet Designer All Fail To Import

So i have created a handful of SQL snippets from some common scripts i run here.
I am using Snippet Designer and Visual Studio 2013.
Every time i try to import them i get the message "Selected snippets are not valid".
being that some of them are fairly large I did a little bit of digging looking for invalid chars (very new to snippets so could have easily missed some). This still did not work.
So I decided, lets make a VERY simple snippet.
<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
<CodeSnippet Format="1.0.0">
<Header>
<Keywords>
<Keyword>Why</Keyword>
<Keyword>Does</Keyword>
<Keyword>This</Keyword>
<Keyword>Not</Keyword>
<Keyword>Work</Keyword>
</Keywords>
<SnippetTypes>
<SnippetType>Expansion</SnippetType>
</SnippetTypes>
<Title>SimpleSnipThantShouldNotFailAndDoes</Title>
<Author>I am</Author>
<Description>some thing in here</Description>
<HelpUrl>
</HelpUrl>
<Shortcut>simplesnip</Shortcut>
</Header>
<Snippet>
<Declarations>
</Declarations>
<Code Language="sql"><![CDATA[select *
from sometable]]></Code>
</Snippet>
</CodeSnippet>
</CodeSnippets>
still manages to throw the error, Im hoping that one of you snippet gurus out there can point out the issue here and that may let me identify the issue for the others.
Thanks in advance!
Maybe a bit late, but I will answer anyway, maybe it will be useful for others coming here.
The problem is, that you defined a Code Snippet for SQL and try to import it into Visual Studio. However, your VS does not have the ability to "write SQL".
If you change the Code Language tag to e.g. <Code Language="CSHARP"> the snippet will import correctly and will be available in C# files.
(see HERE for more language values)
As is see it, you can only add snippets for the language that are available in the dropdown menu in the upper left of the Code Snippet Manager (CTRL + K, CTRL + B).
If you want TSQL Code as a snippet in your C# code, simply change it, as the snippet will not be parsed against compiler rules (it will, after you inserted it).
Otherwise, your xml imports into SMSS just fine.

How do I wrap a selection with an HTML tag in Visual Studio?

This seems like the most basic question in the world, but damned if I can find an answer.
Is there a keyboard shortcut, either native to Visual Studio or through Code Rush or other third-party plug-in, to wrap the current selection with an HTML tag? I'm tired of typing the opening tag, cutting the misplaced closing tag to the clipboard, moving the cursor, and pasting it at the end where it belongs.
Update: This is how TextMate handles surrounding a selection with a tag. Frankly, I'm stunned that Visual Studio doesn't seem to have a similar feature. Creating a macro or snippet for every conceivable tag I might want to use seems absurd.
Visual Studio 2015 comes with a new shortcut, Shift+Alt+W, that wraps the current selection with a div. This shortcut leaves the text "div" selected, making it seamlessly changeable to any desired tag. This coupled with the automatic end tag replacement makes for a quick solution.
UPDATE
This shortcut is available in Visual Studio 2017 as well, but you must have the "ASP.NET and Web Development" workload installed.
Example
Shift+Alt+W > p > Enter
I know this is old and you have probably found the answer by now but I would just like to add for the sake of those who might not know it that this is possible in VS 2010:
Select the code you would like to surround.
Do ctrl-k ctrl-s (or right-click and select Surround with....
There are a variety of HTML snippets to choose from.
You can create your own SurroundsWith snippets if you do not find what you are looking for:
Click File and then click New, and choose a file type of XML.
On the File menu, click Save .
In the Save as box, select All Files (*.*).
In the File name box, enter a file name with the .snippet file name extension.
Click Save.
Enter something like the following sample in the XML file:
<CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
<Header>
<Title>ul-div</Title>
<Author>Microsoft Corporation</Author>
<Shortcut>ul>li</Shortcut>
<Description>Wrap in a ul and then an li</Description>
<SnippetTypes>
<SnippetType>Expansion</SnippetType>
<SnippetType>SurroundsWith</SnippetType>
</SnippetTypes>
</Header>
<Snippet>
<Declarations>
<Literal>
<ID>selected</ID>
<ToolTip>content</ToolTip>
<Default>content</Default>
</Literal>
</Declarations>
<Code Language="html"><![CDATA[<ul><li>$selected$</li></ul>$end$]]></Code>
</Snippet>
</CodeSnippet>
Open Tools > Code Snippets Manager.
Click Import and browse to the snippet you just created.
Check My HTML Snippets and click Finish and then OK.
You will then have your shiny new HTML snippet available for wrapping stuff in!
Ctrl-X -> Type tags -> Ctrl-V is still the fastest solution I've seen as mentioned in this answer: https://stackoverflow.com/a/5109994/486325.
If you have Web Essentials installed, you can use Shift+Alt+W to surround a selection with a tag.
For those who use Visual Studio 2017: Right click on an html/cshtml area, or select some elements to wrap, there is a Wrap With <div> button on the list.
I know this is an ancient thread but having come up against the issue I finally got round to making my own and as this is one of the first results in Google I figured people might find this useful.
Actually it was pretty easy, I just copied from an existing HTML snippet and moved around the literals. The following snippet will surround with a generic HTML tag, it prompts for the tag and will put it in both the opening and closing tags.
<CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
<!-- Generic HTML Snippet -->
<Header>
<Title>Html</Title>
<Author>Liam Slater</Author>
<Shortcut>h</Shortcut>
<Description>Markup snippet for HTML</Description>
<SnippetTypes>
<SnippetType>SurroundsWith</SnippetType>
</SnippetTypes>
</Header>
<Snippet>
<Declarations>
<Literal>
<ID>tag</ID>
<ToolTip>tag</ToolTip>
<Default></Default>
</Literal>
<Literal>
<ID>selected</ID>
<ToolTip>content</ToolTip>
<Default>content</Default>
</Literal>
</Declarations>
<Code Language="html"><![CDATA[<$tag$>$selected$</$tag$>$end$]]></Code>
</Snippet>
</CodeSnippet>
When faced with this situation, I often type the closing tag first, then the opening tag. This prevents the IDE from "helping" by inserting the closing tag where I don't want it. I'm also interested in a better solution, though.
Nothing I'm aware of, but writing a macro to wrap it in whatever tag you want shouldn't be hard. I have a similar one that will wrap my selection in a region block.
I know this is an old question but I was just struggling with the same thing. You can install the Emmet Keybindings extension by Andrés Gutiérrez. Once installed you can highlight text then use control + MW to wrap with any tag you'd like. To give each line an opening and closing tag include an * after the tag.

Resources