`
zzc1684
  • 浏览: 1227860 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

WebStorm:令人眼前一亮的一款前端开发IDE(转)

阅读更多

从 最初的dreamweaver,到Notpad++,再到aptana,每一款IDE总让我我感觉少了点什么东西。WebStorm却让我眼前一亮,虽然 公司项目所用的开发环境是eclipse+aptana(主要是方便团队协作和工程调试),但是其他时间我都会学习使用WebStorm,现在4.0版本 已经出来了,让我们来看看它都有哪些强大之处吧:

浏览器支持细节提示

关键字,标签,变量,参数和功能的JavaScript代码完成是基于支持DOM的流行的浏览器(IE,火狐等)标准,可以显示在不同浏览器之下的支持细节。

 

智能的代码导航和搜索提示

 

ECMAScript的Harmony支持

WebStorm支持最新的ECMAScript版本,你可以尝试新的功能,每个JavaScript引擎的实现增加了别人所不具备的一些不错的功能,当您使用的目前选定的JavaScript版本不支持,WebStorm将通知您,并建议速战速决:

 

支持CoffeeScript

CoffeeScript是一种编程语言,编译JavaScript和增强其简洁性和可读性,同时还增加了一些复杂的功能,像阵列的理解和模式匹配。WebStorm提供您:

  • 代码导航和完成
  • 重命名重构
  • 语法高亮
  • 错误检查
  • 查找使用实例

 

支持Node.js

WebStorm允许你调试和验证您的服务器端JavaScript – Node.js的应用。

编辑CommonJS的模块结构,并提出适当的自动完成选项:

 

JavaScript的重构

为JavaScript提供的重构功能,让您可以轻松地修改代码结构,以及撤消修改。

  • 移动/复制
  • 安全删除
  • 提取到嵌入的脚本文件
  • 重命名
  • 提取变量/函数
  • 内联变量/函数

 

JavaScript单元测试

如果你是一个JavaScript开发人员,你可能知道,您的应用程序的质量和正确性是至关重要的。那么,一致性测试和回归测试正好是你的痛苦少一点。支持JsTestDriver插件。

WebStorm为单元测试提供了一个清晰的画面。从现在开始,JsTestDriver用户可以测量代码覆盖率。

在IDE线行使你的单元测试

你还可以看到文件和目录在项目视图的测试覆盖率统计:

 

代码检查和快速修复

为了确保更好的代码质量,WebStorm可以捕捉动态的JavaScript代码中的常见错误…

…,并为他们提供了快速修复。

 

支持JSLint / JSHint

JavaScript代码质量工具集成在IDE中。

 

基于Mozilla Firefox的JavaScript调试器

  • HTML和JavaScript断点
  • 定制断点属性:暂停模式,条件,通过计数
  • 帧,变量和JavaScript调试器
  • JavaScript表达式的运行评价

批量代码分析

无需通过点击所有文件或部署到服务器。整个源代码树的启动代码分析,可以在一个单一的视图中看到所有的结果。

 

语言混合编辑

支持任何代码中的“外部”和“内部”的语言 – 享受以外的JavaScript代码块,或在JavaScript字符串文字编码的CSS,HTML,SQL等。

 

拼写检查

集成拼写检查验证在标签的文本,代码串,评论,以避免您的网页上的拼写错误和错别字。以确保代码的可读性更好,甚至变量名,CSS类和ID拼写检查。

 

智能重复代码检测

 

支持HTML5

WebStorm也明白你的代码和每个元素的类型,并显示新的HTML5元素支持的方法:

只需按Ctrl +空格,WebStorm会显示所有可能的自动完成选项。

 

验证和快速修复

WebStorm可以修复检测下列问题,并给你更合理的建议建议:

  • 无效的CSS选择器的格式
  • 无效的CSS属性
  • 未使用的CSS类定义
  • 无效的本地锚和更多…
  • 缺少必需的属性
  • 无效的属性或非法值
  • 错误的引用文件中的链接
  • 重复的属性

每当你看到一个灯泡,打ALT +回车,看看WebStorm有什么建议:

 

支持Zen Coding

WebStorm内置了zen coding,可以使你编写代码更有效率。输入div.feature> H4 + P, 按 Tab ,你会得到

 

显示内容

鼠标移到HTML中的CSS选择器,可以立即显示这个选择器的实际的样式;引用调用一个图像文件的时,你会看到图片预览。

应用样式

此命令将打开的标签应用到通过CSS样式的树视图里的样式。

 

HTML5的样板和其他Web应用程序模板

当你创建一个新项目的时候,WebStorm提供一些知名的项目模板,根据自己的需要使用:

 

FTP和远程文件同步化

你可以使用简单的配置和直观的用户界面,从远程主机的FTP,或安装网络驱动器打开文件。

可以使用自动同步功能保存本地编辑项目文件和部署到远程服务器。

在Web服务器的配置标记的目录排除,包括从转让和设置索引|目录。

 

集成版本控制系统

WebStorm支持最流行的版本控制系统:

  • Subversion
  • Mercurial
  • Git
  • Perforce
  • CVS
  • TFS

至此,我们已经大概了解WebStorm提供的一些最令人兴奋的功能。但这些只是冰山的一角。如果想有更多体验,不放自己下载一试。

官方下载地址:

http://www.jetbrains.com/webstorm/download/index.html

原文地址:http://www.cssha.com/webstorm#comment-197

分享到:
评论

相关推荐

    前端开发IDE、JS神器WebStorm5教程

    前端开发IDE、JS神器WebStorm5教程

    前端开发IDE、JS神器WebStorm5教程------免费下载.pdf

    WebStorm 5 前端开发 IDE 详解 WebStorm 5 是一款功能强大且功能齐全的前端开发 IDE,提供了智能的代码...WebStorm 5 是一款功能强大且功能齐全的前端开发 IDE,提供了许多实用的功能,可以提高开发效率和代码质量。

    谷歌浏览器 webstorm 网页开发调试插件

    谷歌浏览器的WebStorm网页开发调试插件,全称为"JetBrains IDE Support",是由知名软件开发公司JetBrains推出的一款高效工具。这款插件专为提升前端开发者的工作效率而设计,尤其适用于那些使用WebStorm作为主要集成...

    test-webstorm:测试 IDE Webstorm

    总结:WebStorm 作为一款优秀的前端开发 IDE,以其丰富的功能和智能化的开发体验赢得了广大开发者喜爱。通过深入学习和实践 "test-webstorm" 项目,可以更好地掌握 WebStorm 的使用技巧,提升前端开发效率。

    前端开发-Webstorm

    前端开发-Webstorm

    用webstorm开发的element-ui+vue.js的一个前端管理系统,mock模拟数据

    WebStorm是一款强大的JavaScript IDE,特别适合Vue.js和Element-UI的开发。它提供了代码高亮、自动补全、错误检查、版本控制集成等多种功能,大大提升了开发效率和代码质量。 5. **.babelrc**: 这个文件配置了...

    webstorm安装与设置.docx

    WebStorm 安装与设置 本文档主要介绍 WebStorm 的安装和设置,涵盖了 ...本文档为读者提供了 Web 前端开发的基础知识和 WebStorm 的使用指南,旨在帮助读者快速了解 Web 前端开发的基础知识和掌握 WebStorm 的使用。

    强大的Web前端开发工具WebStorm

    WebStorm是一款专为Web前端开发设计的强大集成开发环境(IDE),尤其在JavaScript、HTML5以及CSS等技术领域中,它以其高效、智能的特性深受开发者喜爱。以下将详细阐述WebStorm的一些关键特性和功能,以及如何利用...

    idea和webstorm.rar

    WebStorm则是专为Web前端开发设计的IDE,同样出自JetBrains之手。它支持HTML、CSS、JavaScript以及其他前端框架和库,如React、Vue.js、Angular等。WebStorm拥有实时编辑、代码提示、错误检查、版本控制集成等多种...

    APICloud开发工具:WebStorm插件

    WebStorm是一款由JetBrains公司推出的高效JavaScript IDE,专为前端开发者设计,提供了丰富的代码提示、调试、版本控制等功能。当这两者结合,APICloud的WebStorm插件为开发者带来了更便捷的开发体验。 在APICloud...

    nodejs-webstorm:WebStorm中的Node.js开发工作流程

    在本文中,我们将深入探讨如何在JetBrains的旗舰级IDE WebStorm中高效地进行Node.js开发,基于Adron Hall的网络研讨会"nodejs-webstorm"。WebStorm是开发者社区广泛认可的JavaScript、TypeScript和Node.js开发的强大...

    webstorm:Webstorm配置

    WebStorm是一款强大的JavaScript集成开发环境(IDE),由JetBrains公司开发。它被广泛用于Web前端开发,支持HTML、CSS、JavaScript、TypeScript等多种语言,并且提供了丰富的代码提示、语法高亮、自动完成、代码检查...

    前端开发必须的工具WebStorm-2017.3.zip

    WebStorm是一款专为前端开发者设计的强大集成开发环境(IDE),由JetBrains公司开发。它以其高效、智能的代码补全、语法高亮、错误检查、重构功能等深受前端工程师的喜爱。2017.3版本的发布,进一步提升了WebStorm在...

    WebStorm 10.0.4汉化包

    WebStorm是一款由JetBrains公司开发的强大集成开发环境(IDE),专为Web开发设计,支持HTML、CSS、JavaScript、TypeScript、Vue.js、Angular、React等众多前端技术。它以其高效的功能和智能化的代码提示赢得了广大...

    webstorm汉化包下载

    WebStorm是一款非常流行的集成开发环境(IDE),专为JavaScript、TypeScript、HTML和CSS等前端技术设计。由JetBrains公司开发,它提供了丰富的代码补全、语法高亮、智能提示、重构等功能,大大提升了前端开发的效率...

    完美解决webstorm启动索引文件卡死的问题

    WebStorm是JetBrains公司推出的一款针对Web开发者的集成开发环境(IDE),提供代码补全、代码分析、实时错误检查等功能,广泛应用于Web前端和后端的开发。对于前端开发者而言,经常需要管理大量的JavaScript依赖项,这...

Global site tag (gtag.js) - Google Analytics