有用的Visual Studio扩展-Mads Kristensen的Web Essentials

Visual Studio 2010 is really extensible and that's allowed many folks on the team to try out new features for Web Development without having to rebuild Visual Studio itself. One of those "playground" extensions is called "Web Essentials" by Mads Kristensen. Mads handles HTML5 and CSS3 tools for our team. You might remember Mads from when we released the Web Standards Update a few months back.

Visual Studio 2010确实是可扩展的,这使团队中的许多人都可以尝试Web开发的新功能,而不必重建Visual Studio本身。 这些“游乐场”扩展之一被Mads Kristensen称为“ Web Essentials ”。 Mads为我们的团队处理HTML5和CSS3工具。 您可能还记得几个月前我们发布Web标准更新时的Mads。

Web Essentials is Mads' playground and it's pretty awesome. It's so awesome that I think you should check it out and then, *ahem*,  leave a comment on this post encouraging Mads and gentle urging his boss(es) to get these features into the next version of Visual Studio.

Web Essentials是Mads的游乐场,非常棒。 太棒了,我认为您应该检查一下,然后,* ahem *,在此帖子上发表评论,鼓励Mads并温和地敦促其老板将这些功能添加到Visual Studio的下一版本中。

First, it adds a few nice touches to the CSS Editor in Visual Studio. As you can see below, it adds a little glyph next to each color that shows you the actual color.

首先,它为Visual Studio中CSS编辑器添加了一些不错的功能。 如下所示,它会在每种颜色旁边添加一个小字形,以显示实际颜色。

有用的Visual Studio扩展-Mads Kristensen的Web Essentials

If you hover over the colors, you'll get a preview with more details. You'll also get font previews on mouse hover.

如果将鼠标悬停在颜色上,将获得带有更多详细信息的预览。 您还将获得鼠标悬停时的字体预览。

有用的Visual Studio扩展-Mads Kristensen的Web Essentials

These are just nice little touches that make you smile. They also smooth little issues with my daily workflow. After having them, I miss them when they are gone.

这些只是让您微笑的好地方。 他们还解决了我的日常工作流程中的小问题。 有了它们之后,我想念他们走了。

There's also some more functional features, like embedding tiny images in your CSS files as base64. Sounds nuts, but if  your small icons are so small that the HTTP Headers are larger than the image itself this can be an easy way to remove an HTTP request.

还有一些其他功能,例如将微小的图像作为base64嵌入CSS文件中。 听起来很疯狂,但是如果您的小图标太小,以致HTTP标头大于图像本身,则这是删除HTTP请求的简便方法。

Here I'm taking the tiny "Ajax Loader" PNG in my app and turning it into an inline image.

在这里,我正在应用程序中使用微小的“ Ajax Loader” PNG,并将其转换为嵌入式图像。

有用的Visual Studio扩展-Mads Kristensen的Web Essentials

So those

所以那些

有用的Visual Studio扩展-Mads Kristensen的Web Essentials

It even has some evil little helpers help you use well-known CSS hacks to control visibility of rules. Like, if you hate yourself and use IE6. ;)

它甚至有一些邪恶的小帮手,可以帮助您使用著名CSS hacks控制规则的可见性。 就像,如果您讨厌自己并使用IE6。 ;)

有用的Visual Studio扩展-Mads Kristensen的Web Essentials

You can minify just a selection of text if it makes you happy.

如果您感到满意,则可以仅缩小文本的选择范围。

有用的Visual Studio扩展-Mads Kristensen的Web Essentials

You can drag and drop images and automatically get a background-image CSS rule, which is a HUGE time saver. Oy. All this and a bunch more little subtle stuff.

您可以拖放图像并自动获取背景图像CSS规则,这是一个省时的功能。 哦所有这些以及一堆更细微的东西。

The best feature and feature that should cause you to download it NOW is that you can do live CSS editing in Visual Studio with a real-time preview.

最好的功能和应该立即下载的功能是,您可以在Visual Studio中使用实时预览进行实时CSS编辑

Fire up a CSS file and hit Ctrl-Alt-Enter. Then click Settings and hit "Live Update CSS." Bam. As you type it'll get updated in the browser. Love this.

启动一个CSS文件,然后按Ctrl-Alt-Enter。 然后单击设置,然后单击“实时更新CSS”。 am 键入时,它将在浏览器中得到更新。 喜欢这个。

有用的Visual Studio扩展-Mads Kristensen的Web Essentials

Do you like these playgrounds? Do you want some or all of these features in Visual Studio? Sound off below.

你喜欢这些游乐场吗? 您是否需要Visual Studio中的部分或全部功能? 声音在下面。

关于斯科特 (About Scott)

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

斯科特·汉塞尔曼(Scott Hanselman)是前教授,前金融首席架构师,现在是演讲者,顾问,父亲,糖尿病患者和Microsoft员工。 他是一位失败的单口相声漫画家,一个玉米种植者和一本书的作者。

有用的Visual Studio扩展-Mads Kristensen的Web Essentials
有用的Visual Studio扩展-Mads Kristensen的Web Essentials
有用的Visual Studio扩展-Mads Kristensen的Web Essentials
About   关于 Newsletter 时事通讯
Hosting By 主持人
有用的Visual Studio扩展-Mads Kristensen的Web Essentials

翻译自: https://www.hanselman.com/blog/useful-visual-studio-extension-web-essentials-from-mads-kristensen