如何扩展 Visual Studio 编辑器
在 Visual Studio 2010 的时代,扩展 Visual Studio 的途径有很多,开发者可以选择宏、Add-in、MEF 和 VSPackages 进行自定义的扩展。但是宏在 Visual Studio 2012 的时候被阉割了,Add-in 也在 Visual Studio 2013 里被抹杀了,这样的调整对于 Visual Studio 来说是好的,但是对于那些习惯了使用宏和Add-in的团队可能就郁闷了。
本文将一步步教你如何实现对 Visual Studio 代码编辑器的扩展,最终将实现一个可以支持如下两个功能的扩展。
1. 自动任务注释(支持后期扩展)
任务注释就是 //TODO、//FIXME 之类可以被 Visual Studio 区别对待的注释,不同的任务注释可能需要不同的格式,比如有些需要先注释掉方法体,有些需要在代码行的前后加上开始、结束标记等,过去在宏还支持的时候,我们可以使用宏来实现此类操作。不同的项目组使用这些标记的方法不同,因此会有不同的要求,本工具支持自定义的扩展。
2. 跳转到方法的头部或尾部
这个功能看似无用,但是当一个方法有几百行,甚至上千行的时候,如何快速跳转到方法的开头或结尾就比较麻烦了。
图1 最终效果动画演示(请点击放大后查看)
阅读此文,需要您对如下知识点有一定了解:
1. MVVM 与 WPF -> 赶紧去了解一下 (此篇文章躺在自己网站上,没有来得及同步到博客园,大家将就一下)
2. MEF -> 赶紧去了解一下
如果想赶紧体验下这个扩展的话,请猛击这里! (仅限 Visual Studio 2012)
本文提纲
Editor Viewport Adornment 原理解析
在进入正文前,我们先来快速认识下这仅存的两位英雄~
MEF 和 VSPackage
从 Visual Studio 2013 开始,对 Visual Studio 的扩展只剩下 MEF 和 VSPackage。来来来,给大家介绍下你们自己~~
MEF(Managed Extensibility Framework)
这个框架最初是独立于 .Net Framework 发布,后来整合到了 .Net 4.0 中,并伴随着 .Net 4.0 一起发布(包含在 System.ComponentModel.Composition.dll 程序集中)。从名字上看得出这个框架主要就是为编写可扩展的应用程序而生的。随着 .Net 4.0 的推出,还有一项重大的改变就是 Visual Studio IDE中的编辑器,该部分原先和其它组件一样都是采用 COM 方式开发,但现在却被 WPF 技术顶替了。采用了WPF技术搭建的编辑可以完全支持使用 MEF 来进行扩展,这不能不说是一个非常完美的改进。唯一遗憾的是,截止2013的出现,Visual Studio 的其余部分仍然没有从 COM 中脱离出来。
The MEF is a .NET library that lets you add and modify features of an application or component that follows the MEF programming model. The Visual Studio editor can both provide and consume MEF component parts. The MEF is contained in the .NET Framework version 4 System.ComponentModel.Composition.dll assembly.
因此,如果想要扩展已有的编辑器,就可以基于MEF进行开发(比如修改针对C#代码编辑器的高亮颜色、智能提示、括号补全等)。
VSPackage
可以说除了编辑器, Visual Studio 就是多个 VSPackage 的集合,因此使用 VSPackage 可以完美得与 Visual Studio 进行集成,而且能够获得几乎全部的能力。如果想开发对工具栏、菜单栏,甚至是全新的编辑器时(提供对新语言的解析、智能提示等)可以选择VSPackage。
准备工作
童鞋们,请检查下吃饭的家伙准备好了吗?
1. 英文版的 Visual Studio,中文版的 Visual Studio 无法看到 Editor Text Adornment 等模板。
2. 想要扩展编辑器或整个 Visual Stuio,必须先下载安装 Visual Studio SDK(VS2012版本,请点击链接下载),安装完后,就可以在 “其它项目类型” 的模板上找到想要的模板了。
图2 SDK安装后的模板
本文所有代码均基于 Visual Studio 2012 开发,如果您使用的是其它版本,请下载安装适合您版本的 SDK。扩展开发的过程在各个版本间可能会有细小的差距,但不影响整体开发流程。
各种 Editor 模板的区别
安装完 SDK 后,就会拥有如上图中所示的多种扩展模板,其中包含四种和 Editor 相关的模板,它们之间有什么区别吗?
Editor Classifier
可以修改编辑器中代码的高亮、添加一些智能的标签(比如当我们修改了某个变量名时,会在变量名下出现一个小短横,当你鼠标移上去后会提示你是否要修改所有引用的地方)等,示例效果如下:
图3 Editor Classifier 示例
Editor Margin
在编辑器的周围添加一些WPF元素,比如当前文件是只读的时候,可以在编辑器下边沿提示文件为只读,示例效果如下:
图4 在下边沿添加了一条绿色的信息框
Editor Text Adornment
用于对编辑器中的文字进行修饰,添加一些WPF的元素,示例效果如下:
图5 用框框包裹所有字符 a
Editor Viewport Adornment
用于对编辑器本身进行修饰,添加一些WPF元素,示例如下:
图6 在编辑器的右上角添加了一个矩形元素
本工具使用 Editor Viewport Adornment 作为模板。
Visual Studio 实验环境
对于这些扩展的测试,Visual Studio 提供了 Experimental Instance 用于实验环境,该环境和真实的 Visual Studio 完全一样,只不过它和真实版本各自独享一套配置文件,对于实验环境的配置不会影响到真实环境。
第一次启动实验环境,会进入如图7所示的默认环境配置的界面。
图7 默认环境配置
实验环境中的数据可以初始化
SDK目录中的 Tools提供了 “Reset the Visual Studio 2012 Experimental Instance” 命令行工具,运行该工具就会初始化实验环境。
图10 初始化工具
Editor Viewport Adornment 原理解析
要想理解它,必先使用它。通过模板创建好的新 Editor Viewport Adornment 项目时,已经包含了示例代码,该示例代码的功能就是如图6所示在编辑区添加一个紫色的矩形框。
图11 刚创建完的样子
在运行示例代码前必须先修改 source.extension.vsixmanifest 文件中的 author 字段,否则运行将报错。
图12 补全 Author 字段
实现原理
在介绍 MEF 和 VSPackage 的时候,我说过整个 Editor 部分都是基于 MEF 思想开发的。简单来说,Visual Studio Editor 向第三方扩展提供了产物(Export)、接受者(Import)及各种协议,第三方扩展根据对应的协议制作生产出符合的产物,然后 VS 会将第三方的产物与自己的接受者进行组合(就好像是把符合形状的积木放入盒子中)。这样,我们就能在下次启动 VS 的时候使用这个扩展了。
图13 MEF 思想
这个项目中主要的就两个文件:TskCommentFactory.cs 和 TskComment.cs。
其中,TskCommentFactory 文件中的 PurpleBoxAdornmentFactory 就是基于 IWpfTextVIewCreationListener 这个协议的产物,也是本项目的主要入口。使用该协议可以在编辑器视图创建的时候加入我们想要的操作。其中最重要的就是 TextViewCreated 方法,该方法调用了 TskComment 构造函数,从而在编辑器上增加了一块紫色的区域。
[Export(typeof(IWpfTextViewCreationListener))]
[ContentType("text")]
[TextViewRole(PredefinedTextViewRoles.Document)]
internal sealed class PurpleBoxAdornmentFactory : IWpfTextViewCreationListener
{
/// <summary>
/// Defines the adornment layer for the scarlet adornment. This layer is ordered
/// after the selection layer in the Z-order
/// </summary>
[Export(typeof(AdornmentLayerDefinition))]
[Name("TskComment")]
[Order(After = PredefinedAdornmentLayers.Caret)]
public AdornmentLayerDefinition editorAdornmentLayer = null; /// <summary>
/// Instantiates a TskComment manager when a textView is created.
/// </summary>
/// <param name="textView">The <see cref="IWpfTextView"/> upon which the adornment should be placed</param>
public void TextViewCreated(IWpfTextView textView)
{
new TskComment(textView);
}
}
TskComment 文件中主要就两个方法:构造函数 和 onSizeChange 方法。在构造函数中,通过 Brush 画出了一个紫色的矩形,并为编辑器视图绑定了 onSizeChange 方法。
Brush brush = new SolidColorBrush(Colors.BlueViolet);
brush.Freeze();
Brush penBrush = new SolidColorBrush(Colors.Red);
penBrush.Freeze();
Pen pen = new Pen(penBrush, 0.5);
pen.Freeze(); //draw a square with the created brush and pen
System.Windows.Rect r = new System.Windows.Rect(, , , );
Geometry g = new RectangleGeometry(r);
GeometryDrawing drawing = new GeometryDrawing(brush, pen, g);
drawing.Freeze(); DrawingImage drawingImage = new DrawingImage(drawing);
drawingImage.Freeze(); _image = new Image();
_image.Source = drawingImage;
上面代码创建了一个紫色的矩形。如果看不懂也不要紧,因为这部分代码是要被删除的。
onSizeChange 中调用了 AddAdornment 这个方法,这才把紫色的矩形加到了编辑器上。
public void onSizeChange()
{
//clear the adornment layer of previous adornments
_adornmentLayer.RemoveAllAdornments(); //Place the image in the top right hand corner of the Viewport
Canvas.SetLeft(_image, _view.ViewportRight - );
Canvas.SetTop(_image, _view.ViewportTop + ); //add the image to the adornment layer and make it relative to the viewport
_adornmentLayer.AddAdornment(AdornmentPositioningBehavior.ViewportRelative, null, null, _image, null);
}
到现在,原理部分已经讲完了,不管你信不信,你已经可以通过修改 TskComment 中这两个方法来实现自己的扩展了。
添加控件和基础代码
如何实现我要的功能呢?
首先,我们的工具需要一个可以交互的界面,这没办法单纯的用 Brush 绘制。因此需要新建一个 WPF 控件(不能是 Winform 控件,AddAdornment 只能接受 WPF 元素)。
图14 新建 WPF 用户控件
按照 MVVM 的思想,依次添加 DelegateCommand、ViewModelBase、MainViewModel 这几个文件,我们的核心逻辑全部在 MainViewModel 中。
图15 新增的文件
MainWindow.xaml 中的代码如下(省略了一些与逻辑无关的元素)。
<UserControl x:Class="TskComment.MainControl"
...
d:DesignHeight="41" Width="300">
<UserControl.DataContext>
<local:MainViewModel></local:MainViewModel>
</UserControl.DataContext> <Expander>
<Grid Height="41" VerticalAlignment="Top">
<Button Content="{}{" Command="{Binding MoveToTopOfBlockCmd}" />
<Button Content="}" Command="{Binding MoveToBottomOfBlockCmd}" />
<Button Content="执行" Command="{Binding ExecuteCmd}" IsDefault="True"/>
<ComboBox IsEditable="True" ItemsSource="{Binding CMTCollection}" SelectedItem="{Binding SelectedItem}" Name="cmtCol"/>
</Grid>
</Expander>
</UserControl>
MainViewModel 中的代码如下(省略部分无关代码),其中的 MoveToTopOrBottomOfBlock 和 Execute 两个方法的代码因为缺少关键元素,暂时为空。
#region Properties and Fields private ObservableCollection<BaseComment> _cmtCollection = new ObservableCollection<BaseComment>();
public ObservableCollection<BaseComment> CMTCollection
{
get { return _cmtCollection; }
set { _cmtCollection = value; RaisePropertyChanged("CMTCollection"); }
} private BaseComment selectedItem = null;
public BaseComment SelectedItem
{
get { return selectedItem; }
set { selectedItem = value; RaisePropertyChanged("SelectedItem"); }
} public DelegateCommand MoveToTopOfBlockCmd { get; set; }
public DelegateCommand MoveToBottomOfBlockCmd { get; set; }
public DelegateCommand ExecuteCmd { get; set; } #endregion #region ctor public MainViewModel()
{
MoveToTopOfBlockCmd = new DelegateCommand((o) => MoveToTopOrBottomOfBlock(true));
MoveToBottomOfBlockCmd = new DelegateCommand((o) => MoveToTopOrBottomOfBlock(false));
ExecuteCmd = new DelegateCommand((o) => Comment());
} #endregion #region Methods private void MoveToTopOrBottomOfBlock(bool up)
{
//... 缺少关键元素
} private void Comment()
{
//... 缺少关键元素
} #endregion
获取DTE对象
上一节中所缺少的关键元素其实就是DTE,该对象相当于 Visual Studio 的实例,可以通过操作该实例对编辑器中的东东进行控制(如果想要进一步了解,请见参考资源[1]),比如剪切、粘贴、新建行、跳转到方法体等。所以,如果想实现开头我所讲的工具,就要依托这个对象。
在宏编辑器中,可以很轻松的获取该对象,但是在这里稍微就有点麻烦了。我们必须借助 Visual Studio 的其中一个产物(Export) -- SVsServiceProvider。该产物的 GetService 可以获得这个对象。
修改 TskCommentFactory 代码,如下:
internal sealed class TskCommentFactory : IWpfTextViewCreationListener
{
[Import]
internal SVsServiceProvider ServiceProvider = null; //<-- 通过这句代码,就可以获取 Visual Studio 的产物 //省略无关代码 public void TextViewCreated(IWpfTextView textView)
{
DTE dte = (DTE)ServiceProvider.GetService(typeof(DTE)); //<-- 获取DTE对象
new TskComment(textView, dte); //<-- 把dte传给 view
} }
注:DTE 存在于 EnvDTE.dll 程序集中,SVsServiceProvider 存在于 Microsoft.VisualStudio.Shell.Immutable.10.0.dll 程序集中,需要先添加这些程序集到项目中
完成功能逻辑
既然已经获取了关键元素,我们就把 MainViewModel 中的代码完善一下吧。
private void MoveToTopOrBottomOfBlock(bool up)
{
if (DTE == null)
{
return;
} CodeFunction func = Selection.ActivePoint.CodeElement[vsCMElement.vsCMElementFunction] as CodeFunction; if (func != null)
{
if (up)
{
Selection.MoveToPoint(func.StartPoint);
}
else
{
Selection.MoveToPoint(func.EndPoint);
}
}
} private void Comment()
{
Selection.StartOfLine();
Selection.NewLine();
Selection.LineUp();
Selection.Text = "//TODO:";
DTE.ExecuteCommand("Edit.FormatSelection");
}
修改 MainWindow 的代码让它能够接受 DTE。
public partial class MainWindow : UserControl
{
public MainWindow(DTE dte)
{
InitializeComponent();
((MainViewModel)this.DataContext).DTE = dte;
}
}
修改 TskComment.cs 中对应的部分
private MainWindow _win; //... 省略部分代码 public TskComment(IWpfTextView view,DTE dte)
{
_win = new MainWindow(dte); //...
} public void onSizeChange()
{
//... Canvas.SetLeft(_win, _view.ViewportRight - ); //<-- 调整位置
Canvas.SetTop(_win, _view.ViewportTop + ); //<-- 调整位置 _adornmentLayer.AddAdornment(AdornmentPositioningBehavior.ViewportRelative, null, null, _win, null); //<-- 把 win 放到界面上
}
哦啦,现在可以运行了!
图16 动画演示
增加扩展点,让注释支持后期扩展
上面的代码已经完成了,可惜这个注释太不人性化了,要是我想增加一个 Phase0 的注释或者 FixMe 的注释,还得修改代码。因此,这里也按照 MEF 的思想,对代码进行升级。
这里只对关键代码进行解释说明,其它部分,请童鞋们查看源代码。
新建 “协议” 项目
增加一个独立的项目,用于存放协议接口,同时基于此接口提供一个抽象类。
public interface IComment
{
string Title { get; }
string Description { get; }
void Execute(DTE dte); // 把DTE提供给第三方,这样就可以利用这个来操纵编辑器了
} public abstract class BaseComment:IComment
{
public abstract string Title{get;} public abstract string Description{get;} public abstract void Execute(DTE dte); public override string ToString()
{
return Title;
} protected TextSelection Selection(DTE dte)
{
return dte.ActiveDocument.Selection;
} protected CodeFunction Function(DTE dte)
{
return Selection(dte).ActivePoint.CodeElement[vsCMElement.vsCMElementFunction] as CodeFunction;
}
}
新建 “接受者”
有了协议,就该在我们的工具上增加一个接收者从而让 MEF 帮我们把第三方的产物和我们的接受者组合在一起。
修改 MainViewModel, 增加接收者,因为可能会有不只一个的注释,所以要使用 ImportMany。
[ImportMany(typeof(BaseComment))]
public IEnumerable<BaseComment> Comments;
新建 “组合引擎”
private void Init()
{
//设置目录
var catalog = new AggregateCatalog();
catalog.Catalogs.Add(new DirectoryCatalog("D:\\plugin\\")); _container = new CompositionContainer(catalog);
try
{
this._container.ComposeParts(this);
}
catch (CompositionException compositionException)
{
Console.WriteLine(compositionException.ToString());
} //把新的注释绑定到集合中,让界面上能够显示
foreach (BaseComment itm in Comments)
{
CMTCollection.Add(itm);
} if (Comments != null && Comments.Count() > )
{
SelectedItem = CMTCollection[];
}
}
大功告成,如果您还能跟住我的节奏,那可喜可贺,您已经基本掌握了 MEF 的思想和扩展 Editor 的能力了。
Why VSPackages or MEF ?
换个问法就是 “为什么宏和Add-in不支持了?” 这答案谷歌一下肯定很多,但是考虑到文章的完整性,还是打算来做一下搬运工。
根据Microsoft所做的使用率跟踪数据,Visual Studio中宏的使用人数不到开发人员总数的1%。这还不足以让Microsoft放弃这个功能,Visual Studio中的宏功能维护成本过高,是另外一个原因,与其他功能不同,对宏的支持,必须要随着Visual Studio每个新版本更新,并做大量令人疲倦的测试。理论上,用户应该可以在宏IDE中录制并播放任何功能,这给微软的维护增加了巨大负担。 Matt Kaufman说:宏IDE已经好几个版本都没有更新了。用户把它启动之后,很快就能看出来它像一个老版本的Visual Studio。更麻烦的是:它还是只支持Visual Basic。用户不能使用C#或是其他新的.NET语言来创建宏。
微软已经弃用Visual Studio加载项这一基础结构。根据MSDN上的说法,“Visual Studio 2013弃用了加载项。开发人员应该将加载项升级为VSPackage扩展。”稍后的文档指出,“VSPackage是Visual Studio的主要架构单位,也是部署、许可和安全的单位。Visual Studio本身的大部分就写成了VSPackage集合。”
源代码管理
CodePlex: Visual Studio Editor Extension -- TaskComment
TskComment.vsix: 您也可以直接点击这里获取此扩展,并安装到您的 Visual Studio 当中。
参考资源
[2] Managed Extensibility Framework (MEF)
本文来源于 《如何扩展 Visual Studio 编辑器》
如何扩展 Visual Studio 编辑器的更多相关文章
- Visual Studio 编辑器
如何扩展 Visual Studio 编辑器 在 Visual Studio 2010 的时代,扩展 Visual Studio 的途径有很多,开发者可以选择宏.Add-in.MEF 和 VSPack ...
- 分享:扩展Visual Studio 的简单方法
作为 MS 阵营的码农,相信Visual Studio 肯定是大家的主要武器了,但不知道大家有没有扩展Visual Studio 的需求. 最近我需要做一个工具,发现最好是实现在VS里面,于是,Goo ...
- 简易扩展Visual Studio UnitTesting支持TestMethodCase
NUnit的TestCaseAttribute可以简化大量的测试参数输入用例的编写,如果基于Visual Studio Unit Test Project开发则默认没有类似的功能,看一段对比代码: p ...
- 去掉Visual Studio 编辑器里中文注释的红色波浪线 转载
我们通常用visual studio进行开发的时候,我们通常会用到一款比较流行比较方便的插件,那就是Visual Assist X,它可以增强Microsoft开发环境下的编辑能力,支持C/C++,C ...
- 扩展Visual Studio IDE
安装visual studio 2012 SDK 下载visual studio SDK. 安装可能遇到的问题 安装时报错:Visual Studio 2012 Install Fails: Prog ...
- Visual Studio编辑器“智能提示(IntelliSense)”异常的解决方案
1.删除工程中的 .suo 文件. 2.重启vs
- Visual Studio 编辑器打开项目后,一直提醒Vs在忙,解决方法
今天打开VS2015后,因为这个解决中有很项目,突然就一直现在加载中,点击VS提示在忙,怎么破那?请往下看 第一种方法 1.关闭VS: 2.去C:\Users\<your users name& ...
- Visual Studio 实用扩展推荐
Visual Studio 拥有非常不错的可扩展性,在之前的文章中,我也给大家示范了如何进行编辑器的扩展(详见文末参考资源).在本篇文章中,我将介绍几款非常实用的扩展,从而帮助我们提高开发效率. C# ...
- [转]Visual Studio 实用扩展推荐
本文转自 http://www.cnblogs.com/stg609/p/3726898.html Visual Studio 拥有非常不错的可扩展性,在之前的文章中,我也给大家示范了如何进行编辑器的 ...
随机推荐
- Windows2012R2备用域控搭建
Windows2012R2备用域控搭建 前置操作 域控主域控的主dns:自己的ip,备dns:备域控的ip备域控的主dns:自己的ip,备dns:主域控的ip 客户端主dns:主域控的ip,备dns: ...
- .NET 基础 一步步 一幕幕[面向对象之构造函数、析构函数]
构造函数.析构函数 构造函数: 语法: //无参的构造函数 [访问修饰符] 函数名() :函数名必须与类名相同. //有参的构造函数 [访问修饰符] 函数名(参数列表):函数名必须与类名相同. 作用: ...
- Node.js:理解stream
Stream在node.js中是一个抽象的接口,基于EventEmitter,也是一种Buffer的高级封装,用来处理流数据.流模块便是提供各种API让我们可以很简单的使用Stream. 流分为四种类 ...
- iOS逆向工程之Hopper中的ARM指令
虽然前段时间ARM被日本软银收购了,但是科技是无国界的,所以呢ARM相关知识该学的学.现在看ARM指令集还是倍感亲切的,毕竟大学里开了ARM这门课,并且做了不少的实验,当时自我感觉ARM这门课学的还是 ...
- javascript动画系列第一篇——模拟拖拽
× 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容 ...
- 安卓自定义组合控件--toolbar
最近在学习安卓APP的开发,用到了toolbar这个控件, 最开始使用时include layout这种方法,不过感觉封装性不好,就又改成了自定义组合控件的方式. 使用的工具为android stud ...
- Toast显示图文界面——Android开发之路1
Toast的多种使用方法 Toast其实是一个功能特别强大的组件,不仅仅可以吐司一个文本内容,还可以吐司图片以及图文混排的界面.具体用法如下: 第一种:简单的纯文本内容的吐司: Toast.makeT ...
- Crystal Clear Applied: The Seven Properties of Running an Agile Project (转载)
作者Alistair Cockburn, Crystal Clear的7个成功要素,写得挺好. 敏捷方法的关注点,大家可以参考,太激动所以转载了. 原文:http://www.informit.com ...
- 图解DevExpress RichEditControl富文本的使用,附源码及官方API
9点半了,刚写到1.2. 该回家了,明天继续写完. 大家还需要什么操作,留言说一下,没有的我明天继续加. 好久没有玩DevExpress了,今天下载了一个玩玩,发现竟然更新到14.2.5了..我去 ...
- 邻接矩阵的深度优先遍历(java版)
这是一个有向边带权的图 顶点数组:[v0, v1, v2, v3, v4] 边数组: v0 v1 v2 v3 v4 v0 6 v1 9 3 v2 2 5 v3 1 v4 package com.dat ...