Web Essentials之JavaScript,TypeScript和CoffeeScript

简介:

一些Javascript功能也可以用于TypeScript。

本篇目录

功能

JSHint

JSHint真是一种确保你写的JavaScript代码遵守编码规范和最佳实践的好办法。默认的设置是很松的,但是你可以通过新的选项对话框打开更多的规则。

577014-20160112215840069-105198625.png

错误窗口会随着输入的变化而变化,因此,不必右键点击.js文件来进行JSHint。

每个单独的javascript文件都可以通过使用JSHint文档中描述的官方JSHint注释格式重写全局的设置。

最小化

右键解决方案浏览器中的任何JS文件都可以产生一个.min.js文件。无论源js文件何时改变,.min.js文件都会跟着改变。

源映射

在工具-》选项中开启源映射后,当最小化源js文件时,源映射(.js.map)文件都会自动地生成。

发现所有引用

使用Shift+F12可以看到任何Javascript标识符的所有引用。

转到定义

在VS2012和VS2013中都内置了转到定义。这个功能是使用///<reference>构建的。

Regions

一些人喜欢它们,另外一些人讨厌它们。这是原始的Web Essentials 2010的功能,受很多人请求,现在将它做到了VS 2012版本中。

577014-20160112220751725-1975542071.png

智能提示

getElementById

在项目的所有样式表中找到#ID引用,然后在Javascript中提供它们的智能提示。

"use strict"

包含use strictuse asm的智能提示。

NodeJS 模块

包含已经引用的NodeJS模块的引用。

getElementByTagName

包含VS的HTML编辑器支持的所有HTML元素。

getElementsByClassName

在项目的所有样式表中找到.classnames,然后在Javascript中提供它们的智能提示。


577014-20160112223303569-234075209.png


TypeScript

预览窗口

在VS中编译一个TypeScript文件时,Web Essentials会在预览窗口中生成一个编译后的.js文件。

577014-20160112223549772-972976794.png

拖放

将一个.js或者.ts文件拖放到TypeScript编辑器中,就插入了智能提示的引用。


577014-20160112223909663-448884274.png


CoffeeScript

预览窗口

当在VS中保存CoffeeScript文件时(.coffee),Web Essentials会自动编译并生成一个预览窗口。

577014-20160112224350210-1548408154.png

编译器设置

可以从工具-》选项中设置所有的编译器。

Iced CoffeeScript支持

对于添加的功能,可以使用Iced CoffeeScript编译器,只需要使用.iced文件后缀就行了。

NodeJS编译

Web Essentials使用NodeJS运行编译器,它对于CoffeeScript和Iced CoffeeScript来说是最快且最精确的编译器。

源映射

完全支持源映射生成并会产生.map文件。这个功能可以在选项对话框中开启。

编译到自定义的文件夹

如果你想把编译后的文件放到单独一个文件夹中,那么你可以在选项对话框中进行设置。

最小化

当编译CoffeeScript文件时,它现在也可以产生一个更小的Javascript文件。

注释/取消注释

两个非常有用的命令是注释和取消注释。它们完全支持CoffeeScript。





本文转自tkbSimplest博客园博客,原文链接:http://www.cnblogs.com/farb/p/WebEssentialsJavascript.html,如需转载请自行联系原作者

目录
相关文章
|
4天前
|
JavaScript 前端开发 API
Node.js在前端的妙用:打造更出色的Web体验
Node.js在前端的妙用:打造更出色的Web体验
22 5
|
2月前
|
JavaScript 前端开发 测试技术
使用Selenium执行JavaScript脚本:探索Web自动化的新领域
本文介绍了如何在Selenium中使用JavaScript解决自动化测试中的复杂问题。Selenium的`execute_script`函数用于同步执行JS,例如滑动页面、操作时间控件等。在滑动操作示例中,通过JS将页面滚动到底部,点击下一页并获取页面信息。对于只读时间控件,利用JS去除readonly属性并设置新日期。使用JS扩展了Selenium的功能,提高了测试效率和精准度,适用于各种自动化测试场景。
49 1
|
22天前
|
JSON JavaScript 前端开发
设置WebStorm像VSCode一样每行代码结尾自动格式化加入“;”分号(JavaScript、TypeScript格式化)
设置WebStorm像VSCode一样每行代码结尾自动格式化加入“;”分号(JavaScript、TypeScript格式化)
|
6天前
android-agent-web中js-bridge案例
android-agent-web中js-bridge案例
12 2
|
19天前
|
JavaScript 前端开发 API
Vue.js:构建高效且灵活的Web应用的利器
Vue.js:构建高效且灵活的Web应用的利器
|
28天前
|
JavaScript 前端开发 IDE
TypeScript和JavaScript有什么不同?
TypeScript和JavaScript有什么不同?
|
2月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
2月前
|
JavaScript 前端开发 API
Vue.js:构建现代化Web应用的灵活选择
Vue.js:构建现代化Web应用的灵活选择
42 0
|
3月前
|
JavaScript 前端开发 开发者
JavaScript(JS)和TypeScript(TS)的区别
JavaScript(JS)和TypeScript(TS)的区别
29 0
|
3月前
|
JavaScript 前端开发 API
JavaScript 和 typescript 有什么不同?
JavaScript 和 typescript 有什么不同?