[转载]最锋利的Visual Studio Web开发工具扩展:Web Essentials详解

简介:

最锋利的Visual Studio Web开发工具扩展:Web Essentials详解

Web Essentials是目前为止见过的最好用的VS扩展工具了,具体功能请待我一一道来。

 

首先,从Extension Manager里安装:最新版本是19号发布的2.5版

然后重启你的VS开发环境,就可以使用它提供的方便功能了。

Web Essentials对CSS、JavaScript和HTML都提供了很多快捷的功能支持,具体列表如下:

CSS


 


即时预览Live Web Preview
每次修改的时候,都可以使用CTRL+ALT+Enter快捷键或者点击方案右键上的Live Web Preview选项来即时预览你修改的页面,每次修改完 HTML或者相应的CSS, Ctrl+S保存以后,即时窗口会立即生效。


 


兼容性CSS代码生成
很多CSS3的代码都不兼容,不同的浏览器有不同的语言,使用此扩展可以通过提升的方式自动添加特殊的CSS标记,例如-moz, -webkit, -ms and -o开头的一些CSS,也只可以选择特定的浏览器。

生产的代码结果如下:

如果你已经添加了一部分的话,该扩展会只添加除这部分之外的CSS代码,不会重复添加的。

 


 

 

上下箭头可以改变数字值

当你把键盘提示符放在数字上或者数字后面的话,例如5px, 25%, 0.6em, 23等,可以使用CTRL+UP或者CTRL+DOWN来增加或减小数值。

支持CSS, SaSS, LESS和JavaScript文件

 


 

 

可以生产Base64格式的字符串代替URL地址

如果你通过url来引用背景图的话,那可以直接通过该扩展提供的Embed resource as base64功能将引用转换成base64格式的。

如果嫌内容太长,可以使用折叠功能。

 


 

 

支持快捷键注释和反注释代码

可以使用CTRL+K, CTRL+C注释或CTRL+K, CTRL+U反注释代码,和VS里C#编程使用的快捷键一样。

 


 

 

TODO注释特殊支持

任何注释如果保护TODO关键字的话,都会在左边显示一个灰色的特殊标记,来提示你该部分暂未完成。

 


 

颜色预览

鼠标移动到颜色上的时候,可以预览改颜色,或者在CSS编辑器里也能直接预览颜色

 


 

 

字体预览

 


 

 

图片预览

 


 

 

折叠功能

需要一个生命的选择器,右键可以看到Surround With Region即可将这段代码进行折叠起来。

功能选择以后,它会自动定位到默认的 MyRegion名称那里,让你修改自己的折叠大纲的名称。

 


 

 

字符排序

点击任意选择器的时候,都可以让该选择器的CSS定义进行排序

 


 

 

括号匹配

目前支持{},[], ()的匹配。

 


 

 

压缩代码

该扩展使用的 AjaxMin library来压缩CSS代码的。

 


 

 

代码折叠

 


 

 

支持拖拽

支持图片和字体的拖拽,例如如果你拖拽tomxu.jpg图片到该CSS选择器,那么将自动生成如下代码(字体也是类似):

background-image: url('../tomxu.jpg');

 


 

 

颜色可以在十六进制、rgb、和名称直接互相转换

 


 

 

可以在选择器上定义只支持哪些浏览器版本

 


 

 

可以在CSS语法定义只支持哪些浏览器版本

 


 

 

JavaScript

支持Region折叠

复制代码
//#region MyRegion

function Example() {

}

//#endregion
复制代码

 


 

 

支持代码折叠

 


 

 

括号匹配

目前支持{},[], ()的匹配。

 


 

 

同词高亮

在一个文件的所有代码中,如果选择一个变量,那该代码中所有相同的变量都会高亮显示,和C#里一样。

 


 

 

压缩代码

使用AjaxMin library进行了压缩代码,不仅压缩了,还使用了混淆,牛!

 


 

 

快捷添加文件

在解决方案里,添加新项的时候,可以直接选择添加JavaScript文件还是Stylesheet文件,方便!

 


 

 

HTML

支持用户控件的拖拽

以前我们在asp.net webform开发的时候,直接用鼠标将user control拖拽到aspx页面或者模板容器的时候都会自动生成a连接,使用此扩展以后,将会自动注册命名控件,然后生成带有<uc:name/>的代码,可以直接使用咯。

 


 

 

支持Video和Audio文件的拖拽

也支持对音频和视频文件的拖拽。

 

文章转载自     汤姆大叔的博客:http://www.cnblogs.com/TomXu/archive/2011/11/22/2258849.html

 

附微软对此插件的原英文描述:http://visualstudiogallery.msdn.microsoft.com/6ed4c78f-a23e-49ad-b5fd-369af0c2107f?SRC=VSIDE 

 

酷小孩提示:此插件是免费的,大家可以从以上地址去下载,也可以在visual studio 2010的“扩展管理器”中搜索“Web Essentials”安装。

 

本文转自 酷小孩 博客园博客,原文链接:http://www.cnblogs.com/babycool/archive/2011/11/22/2259326.html ,如需转载请自行联系原作者

相关文章
|
4月前
|
前端开发 JavaScript 开发工具
web应用开发工具
【9月更文挑战第1天】web应用开发工具
73 3
|
2月前
|
监控 前端开发 JavaScript
使用 MERN 堆栈构建可扩展 Web 应用程序的最佳实践
使用 MERN 堆栈构建可扩展 Web 应用程序的最佳实践
30 6
|
2月前
|
NoSQL 编译器 C语言
C语言调试是开发中的重要技能,涵盖基本技巧如打印输出、断点调试和单步执行,以及使用GCC、GDB、Visual Studio和Eclipse CDT等工具。
C语言调试是开发中的重要技能,涵盖基本技巧如打印输出、断点调试和单步执行,以及使用GCC、GDB、Visual Studio和Eclipse CDT等工具。高级技巧包括内存检查、性能分析和符号调试。通过实践案例学习如何有效定位和解决问题,同时注意保持耐心、合理利用工具、记录过程并避免过度调试,以提高编程能力和开发效率。
53 1
|
2月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
46 2
|
2月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
3月前
|
开发框架 .NET 开发工具
visualstudio如何加入工作插件---Web developer工具
visualstudio如何加入工作插件---Web developer工具
44 0
|
5月前
|
安全 前端开发 PHP
PHP与现代Web开发:构建高效和可扩展的应用程序
【8月更文挑战第29天】在这篇文章中,我们将深入探讨PHP如何适应现代Web开发的需求。我们将通过实际案例分析,揭示PHP的核心优势,并展示如何利用这些优势来构建高性能、可扩展的Web应用。文章不仅提供理论知识,还包括具体的代码示例,旨在帮助开发者更好地理解和运用PHP解决实际问题。
|
5月前
|
缓存 搜索推荐 数据库连接
FastAPI 的插件化也太牛了吧!轻松打造可扩展 Web 应用,让你的开发如虎添翼,快来感受这神奇魅力!
【8月更文挑战第31天】在互联网迅速发展的今天,Web应用需求日益多样化。FastAPI作为一种高效灵活的Python Web框架,通过插件化设计帮助开发者轻松构建可扩展应用。插件化让开发者能够根据需求选择合适模块,如用户认证、支付处理等,而无需大幅改动核心代码。这种方式不仅提高了开发效率,还增强了应用的稳定性和适应性,使FastAPI成为未来Web开发的理想平台。
156 0
|
3月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
187 3
|
1月前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南