最锋利的Visual Studio Web开发工具扩展：Web Essentials使用详解
首先，从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文件的拖拽
也支持对音频和视频文件的拖拽。
以上这篇最锋利的Visual Studio Web开发工具扩展：Web Essentials使用详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
Web前端开发工具——bower依赖包管理工具
Bower 是 twitter 推出的一款包管理工具,基于nodejs的模块化思想,把功能分散到各个模块中,让模块和模块之间存在联系,通过 Bower 来管理模块间的这种联系. 包管理工具一般有以下的功能: a)注册机制:每个包需要确定一个唯一的 ID 使得搜索和下载的时候能够正确匹配,所以包管理工具需要维护注册信息,可以依赖其他平台. b)文件存储:确定文件存放的位置,下载的时候可以找到,当然这个地址在网络上是可访问的. c)上传下载:这是工具的主要功能,能提高包使用的便利性.比如想用 jqu
-
JavaScript 开发工具webstrom使用指南
看到网上一篇介绍webstrom的文章,觉得功能确实强大,也知道为什么阿里巴巴的前端传到github上的文件为啥都有一个 .idea 文件,(传说淘宝内部推荐写js用webstrom) 我们可以理解 IDE 就是集成了很多你想要的功能,或者你不想要的功能.换句话说就是装了很多插件的 editor ,所以到目前为止,我还觉得没必要给它装什么插件. 那么接下来开始介绍webstrom的特色功能: WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具 任何一个编辑
-
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
复制代码 代码如下: <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html;charset=gb2312'> <META name='Gemeratpr' content='网络程序员伴侣(Lshdic)2005_开拓版'> <TITLE>LD5工具</TITLE> <style> *{font-size:12px;font-family:宋体}
-
十个免费的web前端开发工具详细整理
十个免费的web前端开发工具 网络技术发展迅速,部分技术难以保持 每年都有新的工具出现,这同时也意味着许多旧的工具倒在了新技术的发展之路上. 前端开发占据了web很大一部分,而且也成为了一种职业路径.如果你将前端开发当做自己的又一新技术或者作为一个可发展事业,你需要为这个工作准备合适的工具. 我将要分享我的十大现代必备的前端开发工具.它们都完全免费而且大多数工具能帮助你建立令人惊叹的网站. 1. Grid Guide 特性: 快速生成栅格 首先我要介绍的是Grid.Guide,一款免费的网页应用
-
最锋利的Visual Studio Web开发工具扩展：Web Essentials使用详解
首先,从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保存以
-
Visual Studio 2019配置vue项目的图文教程详解
一,环境安装 1:Vue项目一切基于Node.js,必须先安装NodeJS, 下载地址:https://nodejs.org/zh-cn/ 安装nodejs,一路next就行了 Additonal工具可以不用安装. win+r 输入cmd 输入 node -v 和 npm -v 得到版本信息证明装好了. 2:确认Visual Studio 2019环境:看扩展工具里有没有勾选NodeJs 二,使用VS2019 创建Vue项目 后期会新增多个vue的项目,所以建议加一个vue名称 方案管理文件 你
-
Python 开发工具PyCharm安装教程图文详解(新手必看)
PyCharm是由JetBrains打造的一款Python IDE,VS2010的重构插件Resharper就是出自JetBrains之手. 同时支持Google App Engine,PyCharm支持IronPython.这些功能在先进代码分析程序的支持下,使 PyCharm 成为 Python 专业开发人员和刚起步人员使用的有力工具. PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试.语法高亮.Project管理.代码跳
-
Java Web开发中过滤器和监听器使用详解
目录 1 Filter 1.1 Filter简介 1.2 Filter的快速入门 1.2.1 创建Filter类 1.2.2 访问index.jsp 1.3 Filter的拦截路径的配置 1.4 过滤器链 1.4.1 过滤器链简介 1.4.2 过滤器链的例子 2 Listener 2.1 概念 2.2 监听器的使用 1 Filter 1.1 Filter简介 Filter表示过滤器,是JavaWeb三大组件(Servlet.Filter.Listener)之一. 过滤器可以把资源的请求拦截下来,
-
Java多线程开发工具之CompletableFuture的应用详解
做Java编程,难免会遇到多线程的开发,但是JDK8这个CompletableFuture类很多开发者目前还没听说过,但是这个类实在是太好用了,了解它的一些用法后相信你会对它爱不释手(呸渣男,咋对谁都爱不释手呢),好了我先简单举个列子,告诉你用它有多好.Single Dog拿一个Appointment来举个列子,如下: /** * 女神化完妆之后,还需要一小会选衣服,不过分吧. * 也就是说我们现在有2个异步任务,第一个是化妆,第二个是选衣服. * 选衣服要在化妆完成之后进行,这两个任务是串行
-
Visual Studio 2017如何用正则修改部分内容详解
前言 在开始之前大家如果对安装有什么问题的话可以参考这篇文章://www.jb51.net/article/128474.htm ,好了,下面开始本文的正文: 最近在项目中想实现一个小工具,需要根据类的属性<summary>的内容加上相应的[Description]特性,需要实现的效果如下 修改前: /// <summary> /// 条形码 /// </summary> public List<GoodsBarcodeEditModel> Barcodes
-
Visual Studio 2010 前端开发工具/扩展/插件推荐
怎么样让Visual Studio更好地编写HTML5, CSS3, JavaScript, jQuery,换句话说就是如何更好地做前端开发.Visual Studio 2010不管是旗舰版还是免费版都没有对前端开发方面做充分的优化.不要希望VS默认安装这些东西,我们有很多VS的扩展可是使用. 这里列出的大多数扩展都可以使用Extension Manager (Tools > Extension Manager)来安装,你可以通过Visual Studio Gallery网站下载这些扩展. We
-
Visual Studio 2017开发环境的安装图文教程
Visual Studio 2017是微软为了配合.NET战略推出的IDE开发环境,同时也是目前开发C#程序最新的工具,本节以Visual Studio 2017社区版的安装为例讲解具体的安装步骤. 说明:Visual Studio 2017 社区版是完全免费的,其下载地址为:https://www.visualstudio.com/zh-hans/downloads/ . 安装Visual Studio 2017社区版的步骤如下: (1)Visual Studio 2017社区版的安装文件是e
-
使用 Visual Studio 2022 开发 Linux C++ 应用程序的过程详解
使用 Visual Studio 2022 开发 Linux C++ 应用程序 使用 Visual Studio 2022 with WSL2 ! Visual Studio 2022 引入了用于 Linux C++ 开发的本机 WSL2 工具集,可以构建和调试 Linux C++ 代码,并提供了非常好的 Linux 文件系统性能.GUI 支持和完整的系统调用兼容性. CMake 是对使用 Visual Studio 2022 的 C++ 跨平台应用开发的推荐,因为它允许在 Windows.WS
-
使用Visual Studio 2022开发前端的详细教程
目录 创建宿主项目 安装前端库 在浏览器引入模块 模块化开发 前端开发环境多数基于Node.js,好处不多说了.但与使用Visual Studio开发的后端Asp.Net Core项目一起调试,却不是很方便,所以试着在Visual Studio 2022中开发前端. 创建宿主项目 首先创建一个空的Asp.Net Core项目作为宿主,创建完成后将Program.cs中的代码修改如下: var builder = WebApplication.CreateBuilder(args); var ap