web前端开发指南：前端IDE那个流行，那个好
开发指南：前端IDE那个流行，那个好，强烈推荐IDEA，前后端均是大杀器。
作为Jetbrain所有ide的爸爸，当然也是webstorm的爸爸，加之超丰富的插件支持，MEAN全栈，全家桶，php，python写起来都非常爽。
前端支持的框架也是非常之多。集成各种服务器，各种，各种自动化工具，习惯了以后再也不会想用其它ide
Chrome DevTool，所见即所得。
(2)在线编辑JS和，刷新后仍保持修改。Chrome插件，Flip the Script，
纠正一下，sublime 算不上是 IDE，就是个编辑器，与 webstorm 没什么可比性。
另：vscode 感觉在 IDE 和编辑器这两者之间，也就是说，既有 IDE 的集成感，又有编辑器的轻量与速度感。
过去我用 Visual Studio + Sublime Text 轻重搭配.现在只用 VSCode 了.
对我来说, VSCode 的集成度不多不少, 正好合适. 最近随着 TypeScript Salsa 的不断更新,
开发体验也越来越好,
比如已经能认识多数 JSDoc 中标注的类型, 不需要再单独写 .d.ts. (为获得最佳体验, 建议同步更新到 TypeScript 最新 nightly build.)
很重要的是, VSCode 免费, 开源, 跨平台. ESLint, JSHint 等都有好用的插件, 最新版也加入了默认 EOL, 自动去除尾部空白等, 非常适合作为团队首选编辑器. ;)　　大约在几个月之前，让我看完了《webkit技术内幕》这本书的时候，突然有了一个想法。想把整个web前端开发所需要的知识都之中在一个视图中，形成一个完整的web前端知识体系，目的是想要颠覆人们对于前端只有三大块（html、css、js）的认识&&做web前端需要的比这三大块要多得多。
　　拖了好几个月了，但是由于近期将要参加的某一个活动，我不得不这两天把这个东西整出来。说干就干。上午我就开始在办公室画草图，乱七八糟的在那儿理思路。
　　大家不要害怕，其实下文中的这个知识框架要比草图中的好看的多，草图大家权当没看见。
　　好了，废话不扯。下面请跟随我本博客的内容，来看看web前端开发除了htm、css和js之外，还有哪些东西需要你一步一步去掌握。
　　在看内容之前，先看一下这个知识框架的预览图。图太大不好展示，看不清除，可在此下载清晰版：&（内有整个知识体系的图片和xmind文件）
　　所有知识框架，那肯定是一个结构型的展现，就是一棵树。web前端的知识点非常多，也非常散，需要好几层结构来组织这个体系，否则就会显得很乱。那么如何组织、把谁和谁放在一块儿？这是真正值得我们去思考的，你也可以自己来思考一下这个问题。
　　在我总结的这个知识框架中，首先第一层我划分为：理论知识，类库框架，编码开发，运行环境。如下图：
　　接下来给大家解释一下：
　　这个图要从下往上看，为何？&&因为下面是上面的基础；
首先，我们需要一定的理论知识，不管是你听别人讲授、自己看书还是网上淘资料，你都需要一定的理论知识，每一种程序开发，都避免不了。
第二，有了这些理论知识我们就可以编码了&&不错&&but，没有人能抵挡住第三方框架和类库的诱惑，例如jquery；
第三，有了这些理论知识和协助我们的类库框架，我们就可真正的编码了。大家可能以为编码开发不就是写代码吗，还有啥？&&这里面道道多着呢；
最后，开发程序的目的，最终是为了能高效、稳定的运行在相应的环境中，这其中又有哪些事情需要我们去做？请期待；
3. 理论知识 包括&软知识&和&硬知识&
　　&软知识&和&硬知识&大家可能觉得词陌生，其实我一说大家就能明白。
所谓&软&的就是能在各个程序开发中都用到的，算是基本功、内功，例如数据结构、算法、设计模式、面向对象等等；
所谓&硬&的就是能直接用于本程序开发的。用C语言你就得学C语言语法，此时学java没用。我们web前端开发所需要的硬知识其实都包含在三个标准里面：http标准、W3C标准和ECMAScript标准；
4. 聊一聊web前端开发中的&硬知识&
　　&软知识&的内容非常多，也是我们大学时代学习的重点（没学好是另回事儿，毕业再恶补）。我们本次主要讨论的是web前端这一个方向，因此就点到为止，让大家知道这些知识也在知识体系中扮演重要角色。
　　刚才说道，硬知识有三个标准：http标准、W3C标准和ECMAScript标准，那咱们就挨个聊聊这三个标准。
4.1 http标准
　　为什么做web前端要了解http标准？&&因为浏览器要从服务端获取网页，网页也可能将信息再提交给服务器，这其中都有http的连接。web系统既然和http链接有瓜葛，你就必须去了解它。
　　我的意见是：你不必去非常了解http的详细内容，但是你要了解web前端开发常用的一些http的知识&&就是上图中我列出来的那些。当然，我知识列了一个纲，详细内容还得靠你自己去查阅（本文章讲的是知识框架，不会涉及任何知识点的详细内容）
　　关于这方面的知识，建议去查阅《图解http》这本书，浅显易懂的讲述了这些内容，我曾经也看过。
4.2 W3C标准
　　如果说你只知道web前端的一个标准，估计肯定是W3C标准了（据我了解，貌似大部分人真的都只知道这一个标准）。它的内容非常多，看看这个页面。
　　写到这里让我想起了一句话：2/8原则&&20%的功能满足80%的需求。我觉得这句话用到这里非常合适，我们在平时开发过程中根本用不到这么多东西。反而，你要把平时用的多的东西搞懂了。
　　下图的这些知识，我想不用再过多解释了，这就是我文章开发说的&三大块&（html、css、js）。现在你要知道，它们只不多是W3C标准的一部分，而W3C标准也只是web前端开发知识体系中的一部分而已。
　　（下图没有完全展开，想看权展开的图，可下载本文一开始提供的附件）
　　关于CSS的基础知识，毛遂自荐一下自己之前的一篇系列博客：《》
4.3 ECMAScript　　
　　简称ES，写全称太麻烦了。
　　有些人可能只知道javascript，而不知道ES&&其实，js是在ES的基础上，为web浏览器做了一部分封装（增加了DOM操作、BOM操作等）。
　　如上图中的这些概念，大家可能平时都在javascript中看到，其实他们是ES的内容。只不过javascript继承了ES的这些特性，并且javascript用的比较广泛，因此才会在js中讨论的多一些。
　　还是那个&2/8原则&。其实ES中的内容也非常多，而且更新很快，现在都到ES6了。但是我上图中列出来的这些都是最重要的概念。如果你不懂原型、闭包和作用域，那就说明你还不完全了解ES，也就是不完全会用javascript。
　　在此毛遂自荐自己之前的一篇系列博客，大家可以去参考：《》
5. 框架和类库
　　前面已经描述完了web前端开发所需要的理论知识。如何实践呢？&&不能蛮干&&还得绕世界去看看，有哪些大牛已经为我们做出了如此多的贡献。
　　用下面的这些类库或者框架，能大大提高你的开发效率。
首先，jquery一定是大部分web前端开发者不可或缺的工具。而我利用jquery不仅仅停留在只使用它的API和插件上，我还会自己去写jquery插件，我还会去读jquery的源码、了解jquery的设计思路。如果你也能那样做，请相信我，你会收获到意想不到的效果。如果有一个问题：怎样才能最最透彻的理解javascript的事件系统？最佳答案之一：读几遍（一遍可能读不懂）jquery关于事件处理部分的源码！
bootstrap不用再过多解释了吧，从github上的排名也能看出道道来。甚至连我们公司的UI设计师，都从bootstrap上截图作为素材。
是全世界最强大的图标系统。相比于css制作图标来说，这个要好很多倍，不管是开发、效率还是维护上。能让我自定义选择自己的图标文件。
requirejs和seajs这种模块定义系统，也一定是你系统中不可或缺的。我曾经看过一个教程，讲师就说：requirejs带来了既jquery之后的第二次前端技术变革。
其他的，backbone、angular、react这些也慢慢的开始发挥了他们的价值，此处精力有限就不再赘述了&&但是，他们很重要&&你至少要试着去了解它们。
6. 编码开发
　　要问编码IDE哪家强，当然要属微软的visual studio！但是即便是微软的VS最新版本，它也代替不了下面要说的这套开发环境。
　　如果你专门做web前端，就不要在用vs了，当然要选择sublime。写html语句还用手动一条一条写吗？你得需要zencoding的协助，否则效率太差了。
　　另外，针对html、css、js的压缩、合并、语法检查，文件的清除、复制这些操作，你还要手动去做吗？&&你需要grunt或者gulp的帮助。
　　在此毛遂自荐自己的教程《》，讲的比较详细，适合初学者学习。
　　如果你的系统中有比较多的js代码或者文件，请选择一个合适的模块定义规范&&CMD / AMD
　　请用git来帮助你做文件版本管理，最简单的就是使用github。
　　调试、测试，也都有专门的工具，都是需要学的&&
　　&&我的天哪&&这些字写到现在写的我的手都酸了，别说要学习这些知识了&&再也别说我们web前端是&三大块&了！
7. 运行环境
　　当系统真正到了运行环境中，当你觉得终于完事儿的时候，其实还有好几个知识点需要你掌握。看下图：
　　首先，你要知道web系统虽然大部分是在浏览器下运行，但是js可能会被运行在node环境。
　　在浏览器环境下，最重要的两点是：web安全和性能优化。需要注意的纲要我都列出来了，如果想了解推荐两本书《白帽子将web安全》《高性能网站建设指南》
　　以上这些是全部的知识体系。如果你想成为一名合格的、让leader喜欢的程序猿，你除了知道这些知识之外，我觉得还需要以下几点：
要了解敏捷软件开发流程（如SCRUM）和项目管理知识（如考取PMP），这也属于一种&软&知识吧；
要学会在网上和别人交流（博客、qq群、开源项目），交流能让自己看到自己的不足；
要学会自我反省和自我学习。就像我现在一样，试着自己总结一下属于自己的东西，随时反省随时进步。
-------------------------------------------------------------------------------------------------------------
欢迎关注我的教程：
《》《》《》
《》《》《》
------------------------------------------------------------------------------------------------------------
也欢迎关注我的开源项目&&
-------------------------------------------------------------------------------------------------------------
随机视频聊天&&
-------------------------------------------------------------------------------------------------------------
阅读(...) 评论()西西软件下载最安全的下载网站、值得信赖的软件下载站！
→ 前端开发IDE、JS神器WebStorm 5详细介绍
v7.3.0.3 破解中文版
类型：视频转换大小：39.2M语言：多国语言[中文] 评分：3.2
从最初的dreamweaver,到Notpad++,再到aptana，每一款IDE总让我我感觉少了点什么东西。WebStorm却让我眼前一亮，虽然公司项目所用的开发环境是eclipse+aptana（主要是方便团队协作和工程调试），但是其他时间我都会学习使用WebStorm。WebStorm有什么功能?下面我把WebStorm的功能大致罗列一下(这里只说Javascript编辑的功能，其他的html和css之类的大家自己发掘，记得WebStorm可是支持Zencoding的哟，帅~)：1、智能的代码补全：支持不同浏览器的提示，还包括所有用户自定义的函数(项目中)代码补全包含了所有流行的库，比如：JQuery, YUI, Dojo, Prototype, Mootools and Bindows。2、代码格式化：代码不仅可以格式化，而且所有规则都可以自己来定义：3、代码编写中的html提示：大家经常在js代码中编写html代码，一般来说十分痛苦，不过有了智能提示，就爽多了。而且html里面还能有js提示4、代码导航和用法查询：只需要按着Ctrl键点击函数或者变量等，就能直接跳转到定义：可以全项目查找函数或者变量，还可以查找使用并高亮：5、代码重构(这个操作有些像Resharper，熟悉Resharper的用户应该上手很快)：支持的有重命名、提取变量/函数、内联变量/函数、移动/复制、安全删除等等，比如：内联变量重构之后变为：6、代码检查和快速修复：可以快速找到代码中的错误或者需要优化的地方，并给出修改意见，快速修复。7、代码调试：8、代码结构浏览：可以快速浏览和定位9、代码折叠：10、包裹或者去掉外围代码：去掉之后就成了：怎么样，这些功能足够多了吧，其中的调试和重构包含了很多，这个还需要你来自己挖掘。让我们来看看它都有哪些强大之处吧：浏览器支持细节提示关键字，标签，变量，参数和功能的JavaScript代码完成是基于支持DOM的流行的浏览器（IE，火狐等）标准，可以显示在不同浏览器之下的支持细节。智能的代码导航和搜索提示ECMAScript的Harmony支持WebStorm支持最新的ECMAScript版本，你可以尝试新的功能，每个JavaScript引擎的实现增加了别人所不具备的一些不错的功能，当您使用的目前选定的JavaScript版本不支持，WebStorm将通知您，并建议速战速决：支持CoffeeScriptCoffeeScript是一种编程语言，编译JavaScript和增强其简洁性和可读性，同时还增加了一些复杂的功能，像阵列的理解和模式匹配。WebStorm提供您：代码导航和完成重命名重构语法高亮错误检查查找使用实例支持Node.jsWebStorm允许你调试和验证您的服务器端JavaScript C Node.js的应用。编辑CommonJS的模块结构，并提出适当的自动完成选项：JavaScript的重构为JavaScript提供的重构功能，让您可以轻松地修改代码结构，以及撤消修改。移动/复制安全删除提取到嵌入的脚本文件重命名提取变量/函数内联变量/函数JavaScript单元测试如果你是一个JavaScript开发人员，你可能知道，您的应用程序的质量和正确性是至关重要的。那么，一致性测试和回归测试正好是你的痛苦少一点。支持JsTestDriver插件。WebStorm为单元测试提供了一个清晰的画面。从现在开始，JsTestDriver用户可以测量代码覆盖率。在IDE线行使你的单元测试：你还可以看到文件和目录在项目视图的测试覆盖率统计：代码检查和快速修复为了确保更好的代码质量，WebStorm可以捕捉动态的JavaScript代码中的常见错误……，并为他们提供了快速修复。支持JSLint / JSHintJavaScript代码质量工具集成在IDE中。基于Mozilla Firefox的JavaScript调试器HTML和JavaScript断点定制断点属性：暂停模式，条件，通过计数帧，变量和JavaScript调试器JavaScript表达式的运行评价批量代码分析无需通过点击所有文件或部署到服务器。整个源代码树的启动代码分析，可以在一个单一的视图中看到所有的结果。语言混合编辑支持任何代码中的“外部”和“内部”的语言 C 享受以外的JavaScript代码块，或在JavaScript字符串文字编码的CSS，HTML，SQL等。拼写检查集成拼写检查验证在标签的文本，代码串，评论，以避免您的网页上的拼写错误和错别字。以确保代码的可读性更好，甚至变量名，CSS类和ID拼写检查。智能重复代码检测支持HTML5WebStorm也明白你的代码和每个元素的类型，并显示新的HTML5元素支持的方法：只需按Ctrl +空格，WebStorm会显示所有可能的自动完成选项。验证和快速修复WebStorm可以修复检测下列问题，并给你更合理的建议建议：无效的CSS选择器的格式无效的CSS属性未使用的CSS类定义无效的本地锚和更多…缺少必需的属性无效的属性或非法值错误的引用文件中的链接重复的属性每当你看到一个灯泡，打ALT +回车，看看WebStorm有什么建议：支持Zen CodingWebStorm内置了zen coding，可以使你编写代码更有效率。输入div.feature& H4 + P， 按 Tab ，你会得到显示内容鼠标移到HTML中的CSS选择器，可以立即显示这个选择器的实际的样式；引用调用一个图像文件的时，你会看到图片预览。&应用样式此命令将打开的标签应用到通过CSS样式的树视图里的样式。HTML5的样板和其他Web应用程序模板当你创建一个新项目的时候，WebStorm提供一些知名的项目模板，根据自己的需要使用：FTP和远程文件同步化你可以使用简单的配置和直观的用户界面，从远程主机的FTP，或安装网络驱动器打开文件。可以使用自动同步功能保存本地编辑项目文件和部署到远程服务器。在Web服务器的配置标记的目录排除，包括从转让和设置索引|目录。集成版本控制系统WebStorm支持最流行的版本控制系统：SubversionMercurialGitPerforceCVSTFS至此，我们已经大概了解WebStorm提供的一些最令人兴奋的功能。但这些只是冰山的一角。如果想有更多体验，不放自己下载一试。
03-2803-2803-2403-1710-3009-2109-0908-0707-2907-10
阅读本文后您有什么感想? 已有23人给出评价!
名称大小下载对于Web开发来说 9 个最好的跨平台编辑器 - Web前端 - ITeye资讯
相关知识库：
1) Best Cross Platform IDE -
Brackets是一个在前端Web开发和设计人员中最流行的开放源码IDE/代码编辑器之一。它拥有一些实用工具能够将HTML 和CSS推送至浏览，而不需要保存或重新加载页面。这是一个强大的工具，你将会爱上在Bracket中编写代码。
2) Best Cross Platform IDE -
Light Table是由Microsoft Visual Studio部门项目经理Chris Granger离职后开发的全新理念的IDE，支持多种语言，比如Python、Clojure、JavaScript等。Light Table是一个很简单的概念：我们需要真正的工作面板，不只是编辑器和项目管理器。我们可以把东西尽量整洁地堆在这里，需要的时候可以把资料直接拿出来 看。
Light Table所基于的开发原则：
处处文档，因此你不再感觉需要查看文档。
处处都有编辑器，而且可以显示任何事情，不仅仅是文本。
鼓励尝试，任何改变立刻就能看到结果。
IDE模仿的是桌面（Table），而非Visual Studio那样的窗口。文件也不是代码的最佳形式。
3) Best Cross Platform IDE –
Dart editor是一个独特的开源代码编辑器，拥有一些高级功能如：代码自动完成，重构，大纲视图和调试代码，使得它更受欢迎。
4) Best Cross Platform IDE -
Sublime是一个用于编码的完美编辑器，拥有强大的用户界面，非常的棒功能和高性能。这个工具提供可运行于OS X，Windows和 Linux的多个版本。 它的功能将吸引你： 1）GotoAnything 2）多重选择 3）命令面板 4）分离编辑 5）插件API 6）跨平台
5) Best Cross Platform IDE -
6) Best Cross Platform IDE -
这个Java编辑器具有先进的技术，高级的功能集，包括为Java程序员准备的工具和框架。IntelliJ支持多种编译系统和简化Web开发的HTML，JavaScript，CSS智能编辑器。它还提供移动开发平台。
7) Best Cross Platform IDE -
Aptana studio 3是一个适用于Web程序员的专业和开源开发编辑器。它还支持最新的浏览器技术如：HTML5, CSS3, JavaScript, Ruby, Rails, PHP 和 Python。特性 – IDE, 定制, 开发向导, Intergrated调试器等。
8) Best Cross Platform IDE -
Xamarine是一个用于移动开发最好的跨平台工具之一。移动开发人员可用它开发Android, iOS,和Mac App。
- 1）移动平台的特性 2）代码完成 3）强大的调试支持4）智能语法高亮 5）源代码控制 6）代码导航 7）强大和简单
Best Cross Platform IDE -
Julia Studio是一个用于julia语言的快速集成开发工具。Julia是一种快速，简便和动态编程语言。
英文原文： 　
我喜欢的eclipse 居然一个字的介绍都没有，默默地给个差评意思是eclipse大家都在用了，不用介绍了。
我喜欢的eclipse 居然一个字的介绍都没有，默默地给个差评
1927105 写道居然没有Eclipse、WebStorm，晕死5不就是eclipse吗？
居然没有Eclipse、WebStorm，晕死