原文 : A Visual Studio to Visual Studio Code Snippet Converter

作者 : Rick Strahl

译者 : 张蘅水

导语

和原文作者一样,水弟我现在也是使用 VS Code 和 Rider 作为主力开发工具,尤其是 VS Code 可以跨平台,又有丰富的插件支持和多种编程语言支持。当我从 VS 转移到以 VS Code 的开发过程中,遇到的最大问题就是代码提示的不完善(被 VS 和 R# 调教坏了,总想按 tab 键)。当我看到原文作者通过从 VS 中导出代码片段到 VS Code 时,瞬间被吸引到了。 虽然在不知不觉中用了 VS 自带的代码片段,但我从来没有想过要自定义专属的代码片段,最多也是制作用于项目的模板(方便创建特定的类型文件)。虽然导出到 Rider 不是很完美,但 Rider 自带了 R#,对这方面的需求还是很少的。


译文:

Visual Studio 内置了非常好用的代码片段工具,多年来我一直在使用它来创建大量有用的扩展片段,使我的日常开发更容易。我有很多 C# 代码片段,但更多的是用于 HTML 、自定义的 Bootstrap 代码片段,乃至复杂的 HTML 控件代码段。偶尔也会用到 JavaScript 、XAML 甚至Powershell 。

在过去的几年里,我越来越多地使用其他工具与 Visual Studio 结合使用。特别是Visual Studio CodeJetBrains Rider

在多年的使用 Visual Studio 中,我已经累积了 130 多个代码片段。每当我在其他开发环境中工作时 ( VS Code 或者 Rider),我真的很需要他们,特别是要写一大段 HTML的时候,总是要去痛苦地去对应的文档站点查找。使用代码片段功能,只需几次击键就会自动填充我自定义的特定代码,每天可节省大量时间。

所以我很需要代码片段功能,有时我打开 Visual Studio 只是为了找到需要的 HTML 的代码片段,然后将它们粘贴回 VS Code 或 Rider。虽然繁琐,但是仍然从文档网站中复制代码,然后手动修改代码来得便捷。如果能在每个对应的开发环境中直接执行代码片段的功能,那就太好了!

因此,在过去的几个周末,我做了一个将 Visual Studio 中的代码片段导出到 VS Code 中的小工具,同时尽量能导出到 JetBrains Rider 。

如果你感兴趣,可以在GitHub上找到代码:

另外说一句,这还只是一个菜鸟项目,并不能保证它支持所有类型的的代码片段。只是我自己拥有的 137 个代码片段都完美地移植到 VS Code,并且能够运行。同时我还可以重新导出, 轻松地导出新创建的代码片段,这样就可以对比和更新了。

对于 Rider 而言,操作起来更为复杂,因为 Rider 有一种疯狂的机制,可以将模板存储在内部的单个配置文件中。它还为 .NET相关的片段 (C#、VB、F#、Razor、ASP.NET )和 基于 Web ( html、css、js 等)的代码片段使用了多个完全不同的存储引擎。所以工具目前仅支持一次性导出 .NET 相关代码段,因为 Rider 中基于 GUID 的密钥系统不允许在没有 GUID 的情况下查找现有代码段。后面我们再详细介绍。

代码片段转换器

你可以通过借助 .NET 全局工具 (.NET Global SDK Tool ),使用 Nuget 下载和运行代码片段转换器:

dotnet tool install --global dotnet-snippetconverter

如果您不想安装并只运行该工具,您可以克隆或下载Github仓库,然后:

cd .\SnippetConverter\
dotnet run

安装后, 可以通过指向文件夹或单个文件将 Visual Studio 中的代码片段批量或单独转换为 VS Code 支持的代码片段。

snippetconverter ~2017 -r -d

或者,您可以像下面这张屏幕截图那样指定输出文件:

有几个选项可用于转换单个片段和文件夹,使用前缀,递归文件夹,输出生成文件的路径等:

Syntax:
-------
SnippetConverter <sourceFileOrDirectory> -o <outputFile>
--mode --prefix --recurse --display Commands:
---------
HELP || /? This help display Options:
--------
sourceFileOrDirectory Either an individual snippet file, or a source folder
Optional special start syntax using `~` to point at User Code Snippets folder:
~ - Visual Studio User Code Snippets folder (latest version installed)
~2017 - Visual Studio User Code Snippets folder (specific VS version 2019-2012) -o <outputFile> Output file where VS Code snippets are generated into (ignored by Rider)
Optional special start syntax using `~` to point at User Code Snippets folder:
%APPDATA%\Code\User\snippets\ww-my-codesnippets.code-snippets
~\ww-my-codesnippets.code-snippets
if omitted generates `~\exported-visualstudio.code-snippets` -m,--mode vs-vscode (default)
vs-rider experimental - (C#,VB.NET,html only)
-d display the target file in Explorer
-r if specifying a source folder recurses into child folders
-p,--prefix snippet prefix generate for all snippets exported
Example: `ww-` on a snippet called `ifempty` produces `ww-ifempty` Examples:
---------
# vs-vscode: Individual Visual Studio Snippet
SnippetConverter "~2017\Visual C#\My Code Snippets\proIPC.snippet"
-o "~\ww-csharp.code-snippets" -d # vs-vscode: All snippets in a folder user VS Snippets and in recursive child folers
SnippetConverter "~2017\Visual C#\My Code Snippets" -o "~\ww-csharp.code-snippets" -r -d # vs-vscode: All the user VS Snippets and in recursive child folders
SnippetConverter ~2017\ -o "~\ww-all.code-snippets" -r -d # vs-vscode: All defaults: Latest version of VS, all snippets export to ~\visualstudio-export.code-snippets
SnippetConverter ~ -r -d --prefix ww- # vs-rider: Individual VS Snippet
SnippetConverter "~2017\proIPC.snippet" -m vs-rider -d # vs-rider: All VS Snippets in a folder
SnippetConverter "~2017\Visual C#\My Code Snippets" -m vs-rider -d

上面的用例应该足够说明用途了。如果还想要了解更多信息,请接着往下看......

什么是 VS Code 的代码片段

如果您不熟悉或不使用代码片段,那您并不是少数人。它们在 Visual Studio 中几乎是一个隐藏的功能,这是一个耻辱,因为它们是非常有用的生产力工具。不幸的是,Visual Studio 没有任何有用的内置UI来创建这些片段,因此大多数开发人员都没有充分利用此功能。Visual Studio 只能蹩脚地点击 ** 工具 - > 代码片段管理器 ** 菜单 ,除了一个查看器之外,它没有其他管理功能,仅仅是查看哪些片段是可用的,没有内置的方法来创建或编辑片段,甚至跳转到并查看代码片段。

但是,代码片段仅仅只是位于用户目录的 Documents 文件夹下的 XML 文件。它们非常容易创建和更新,仅仅是原始的 XML 文件,用 VS Code 等文本编辑器去做代码片段和高亮实在是非常简单。尽管在 Visual Studio 中有一些提供 UI 操作的劣质插件,但它们往往比原始的代码片段文件更麻烦。

创建新代码段的最佳方法是复制现有代码段并对其进行修改以满足您的需求。

一般来说,代码片段位于 (水弟我是直接用 Everything搜索的):

<Documents>\Visual Studio 2017\Code Snippets

每种语言技术都有自己的子文件夹进行分组,但仅仅是文件夹上的区分而已。代码片段实际上通过 XML中的 Language 属性确定它们适用的语言。

Visual Studio在此位置附带了许多代码段,您可以使用这些代码段作为新代码段的模板进行学习。

<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
<CodeSnippet Format="1.0.0">
<Header>
<Title>Property with INotifyPropertyChange raised</Title>
<Description>Control Property with Attributes</Description>
<SnippetTypes>
<SnippetType>Expansion</SnippetType>
</SnippetTypes>
<Shortcut>proIPC</Shortcut>
</Header>
<Snippet>
<References />
<Imports />
<Declarations>
<Literal Editable="true">
<ID>name</ID>
<Type></Type>
<ToolTip>Property Name</ToolTip>
<Default>MyProperty</Default>
<Function></Function>
</Literal>
<Literal Editable="true">
<ID>type</ID>
<Type></Type>
<ToolTip>Property Type</ToolTip>
<Default>string</Default>
<Function></Function>
</Literal>
</Declarations>
<Code Language="csharp" Kind="method decl" Delimiter="$"><![CDATA[public $type$ $name$
{
get { return _$name$; }
set
{
if (value == _$name$) return;
_$name$ = value;
OnPropertyChanged(nameof($name$));
}
}
private $type$ _$name$;
]]></Code>
</Snippet>
</CodeSnippet>
</CodeSnippets>

一旦文件存在或更新了,Visual Studio 无需重启,就能立即发现并使用。在相关的 (如 C#) 编辑器中,立马就能看到智能提示中的代码段:

它插入对应的模板并允许您编辑在模板中声明的 $expr$ 占位符:

这个 C# 代码片段示例, 是 VS 中最常见的语言。如您所见, XML文件中的 <Code> 节点定义模板文本,Shortcut 节点定义触发提示的按键,你可以使用在 <Declaration> 节点中使用类似 $txt$ 占位符来定义参数,同样的占位符在多个地方出现也能同步更改。

对于我来说,最有用和最常用的代码片段时用于插入 HTML 代码,特别是在定义 Bootstrap 结构或其他很难记住语法的自定义控件。我喜欢在浏览文档网站后创建一个对应的片段,这样就很方便使用。用多几次,省下来的时间就赚翻了。花费几分钟设置模板可以节省大量时间去输入重复代码,尤其是您每次都要浪费时间查找相同的 Bootstrap 代码时。

[搬运] 将 Visual Studio 的代码片段导出到 VS Code的更多相关文章

  1. visual studio制作代码片段

    使用 Visual Studio 的代码片段功能,我们可以快速根据已有模板创建出大量常用的代码出来.ReSharper 已经自带了一份非常好用的代码片段工具,不过使用 ReSharper 创建出来的代 ...

  2. Visual Studio 的代码片段工具

    当安装完Visual Studio之后,会有附带一些原生的代码片段文件(*.snippet),对于vs2013参考目录如下: X:\Program Files (x86)\Microsoft Visu ...

  3. Visual Studio模板代码注释小技巧分享

    在日常开发过程中,难免有这样一种需求:就是你所建的每一个类文件或者接口文件都需要标注下作者姓名以及类的用途.如果我们每次创建文件的时候都需要写一遍这些信息是很烦神的.还好Visual Studio给我 ...

  4. Visual Studio模板代码注释小技巧

    在日常开发过程中,难免有这样一种需求:就是你所建的每一个类文件或者接口文件都需要标注下作者姓名以及类的用途.如果我们每次创建文件的时候都需要写一遍这些信息是很烦神的.还好Visual Studio给我 ...

  5. visual studio 设置代码注释模板

    1.C#模板文件: 路径:C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\ItemTemplates\CSharp\Co ...

  6. [Cordova] 无法编译Visual Studio项目里Plugin副本的Native Code

    [Cordova] 无法编译Visual Studio项目里Plugin副本的Native Code 问题情景 开发Cordova Plugin的时候,开发的流程应该是: 建立Cordova Plug ...

  7. 【搬运】Visual Studio vs2017 vs2019 中文离线安装包下载,替代ISO镜像

    原文地址[侵删]:https://blog.csdn.net/fromfire2/article/details/81104648 以下为搬运内容: 官档地址 https://docs.microso ...

  8. Visual Studio 创建代码注释默认模版方法

    在日常的开发中我们经常需要为页面添加注释和版权等信息,这样我们就需要每次去拷贝粘贴同样的文字,为了减少这种重复性的工作,我们可以把这些信息保存在Visual Studio 2012类库模版文件里 1. ...

  9. 【转】VISUAL STUDIO 2008代码指标为您节省资金

    转自:https://www.geekzone.co.nz/vs2008/4773 Visual Studio 2008 Team Developer和Team Suite版本中提供的许多新功能之一是 ...

随机推荐

  1. OpenCV 初体验

    个人博客原文链接 个人掘金链接 本文简单地介绍计算机图形处理的一些基本概念,以及一些有趣的例子和对应的Open CV的代码操作. 顺便说一句,恭喜IG夺冠! 一.图片存储原理 1.颜色空间RGB (1 ...

  2. C# 默认访问权限

    声明类.方法.字段.属性时不加访问权限修饰符时的访问权限是什么呢?1. 声明命名空间.类,前面不加限制访问修饰符时,默认访问权限为internal——访问仅限于当前程序集. 2. 声明类成员(域.属性 ...

  3. MySQL 笔记整理(14) --count(*)这么慢,我该怎么办?

    笔记记录自林晓斌(丁奇)老师的<MySQL实战45讲> (本篇内图片均来自丁奇老师的讲解,如有侵权,请联系我删除) 14) --count(*)这么慢,我该怎么办? 有时你会发现,随着系统 ...

  4. Java开发笔记(八十五)通过字符流读写文件

    前面介绍了文件的信息获取.管理操作,以及目录下的文件遍历,那么文件内部数据又是怎样读写的呢?这正是本文所要阐述的内容.File工具固然强大,但它并不能直接读写文件,而要借助于其它工具方能开展读写操作. ...

  5. 关于asp.net执行exe程序时权限不够的解决办法(2015.04.17更新)

    一,本文背景 长话短说:asp.net项目中需要用到PDF转换成SWF文件,用户上传后自动调用pdf2swf.exe转换. 但有个问题,执行时权限不够,导致一直报错(滚动条一直在往下滚,刷屏中),见下 ...

  6. ArcGIS API for JavaScript与 npm

    在4.7版本中,不仅增加了WebGL的渲染支持(渲染前端速度加快,渲染量也加大).增强了ES6中的Promises语法支持,还支持了npm管理及webpack打包,实属喜讯. “意味着可以不经过esr ...

  7. Dynamics 365-关于Solution的那些事(二)

    接着上一篇的说,现在有一个已知前提:Solution的增量特性.然后我们再思考这么一个场景,项目开发过程中,存在多次迭代的情况,每次迭代可能涉及到的solution是同一个,唯一区别的,就是solut ...

  8. 一个基于OCV的人肉选取特征点程序

    基于OpenCV写了一个交互式获取图片上的人肉选取的特征,并保存到文件的小程序. 典型应用场景:当在一个精度不高的应用需求中,相机分辨率差或者变形严重,某些棋盘点通过代码检测不出,就可以通过手工选取的 ...

  9. 利用AccessibilityService自动获取微信号(Android)

    前言: 最近遇到一个需求,要求写一个小插件,能够自动在微信的页面弹出一个窗口,展示用户的相关信息(与我们公司有关的信息,方便运营快速了解用户信息). 当时我第一反应是不可能,如果能够在别的app中获取 ...

  10. 【Android】用Cubism 2制作自己的Live2D——android sdk样本的下载与Android studio编译!

    前言- 在浏览Live2d说明书的时候我无意中发现了一个有趣的东西,就是android sdk中居然自带动态壁纸!那就让我们来试试吧,说明书此页的网址连接——中文版||日文版 Android开发所必需 ...