本教程操作环境:windows7系统、HTML5版、DellG3电脑。
1、SublimeText
SublimeText是一个跨平台的代码编辑器,同时支持Windows、Linux、MacOSX等操作系统,也是HTML和散文先进的文本编辑器。SublimeText具有漂亮的用户界面和强大的功能,主要功能包括:拼写检查,书签,完整的PythonAPI,Goto功能,即时项目切换,多选择,多窗口等等。
2、Dreamweaver
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,拥有可视化编辑界面,支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页,初学HTML5的人可以无需编写任何代码就能快速创建Web页面。
3、WebStorm
WebStorm是一款Java开发工具,目前已经被广大中国JS开发者誉为”Web前端开发神器”、”最强大的HTML5编辑器”、”最智能的JavaIDE”等。WebStorm具有的优势是:智能的代码补全、代码格式化、html提示、联想查询、代码重构、代码检查和快速修复、代码调试、代码结构浏览、代码折叠、包裹或者去掉外围代码。
4、HBuilder
HBuilder是DCloud推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写的。速度快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率。Hbuilder是由有我国的前端开发人员编写的一款前端开发IDE,所以在使用上比较符合我们中国人的开发习惯,用HBuilder写HTML代码还是很方便的。
5、Notepad
Notepad++是旨在替代Windows默认的notepad而生,比notepad的功能强大很多很多。notepad++支持插件,添加对应不同的插件,以支持不同的功能。里面除了一些常见的插件之外,还有一些好玩的插件,比如将文字读出来的speech插件。Notepad++属于轻量级的文本编辑类软件,比其他一些专业的文本编辑类工具,启动更快,占用资源更少,但是从功能使用等方面来说,不亚于那些专业工具。
6、visualstudiocode(简称VSCode)
VSCode是一款免费,开源,跨平台的编辑器,生态好,插件丰富,界面美观,其代码补全,高亮等体验也不错。
支持多种编程语言,可以直接在编辑器上进行代码的调试,它还内置了git,终端。
7、Vim
Vim初学的时候还是会比较困难些,全程使用键盘进行操作,需要记住很多的按键组合和命令,但是学会之后你会发现它的好处,尤其是常用Linux系统的,学会Vim真的能让工作变得高效很多。
Vim本身启动速度快,可配置性非常强,有着各种各样的插件,具有高度的定制化,目前算是用户最喜欢的编辑器之一了,编写小脚本特别合适。
8、AptanaStudio
AptanaStudio是一个基于Eclipse的集成式Web开发环境,其最广为人知的是它非常强悍的JavaScript编辑器和调试器。AptanaStudio可以支持多种AJAX和JavaScript工具箱,包括JavaScript编辑和调试。
9、IntelliJIDEA
IDEA全称IntelliJIDEA,是java编程语言开发的集成环境。IntelliJ在业界被公认为最好的java开发工具之一,它的旗舰版本还支持HTML,CSS,PHP,MySQL,Python等。
第一、【Google Web Toolkit】是现在大家还不熟悉的工具之一,主要用于开发浏览器应用的一个工具,不过库中支持很多【HTML5】的功能,包括对客户端,或者是web存储的支持,都可以实现。
第二、还有一种是【JetBrains WebStorm】工具,需要创建HTML文档时可获得对【HTML5】文件的支持,现在的运用很多,比如砍伐者键入,使用者可以在【chrome】浏览器中及时的预览【HTML】的文档很方便。
第三、微软的【Visual Studio 2010 SP1】中提供了IntelliSense这个项目,也就是说追加了针对【HTML5】的一些元素,总体使用起来还是比较好的,但是我们要结合【ddhu】的一些实用工具。
第四、【Dojo Foundation Maqetta】是一个不错的选择,这款是工具是来自于【IBM】项目之一,【Dojo Foundation Maqetta】是为桌面和移动设备开发HTML5应用的开源工具,浏览器即可使用。
第五、当然还有【Sencha Touch2】是移动应用框架的一种,可以当做一个重要【Sencha】的HTML5平台,使用者可以用它开发面向【iOS】进行制作和使用,也可以【Android】和【Blackberry、Kindle Fire】使用。
第六、现在我们继续介绍【Sencha】,这款工具的主要定位是【HTML5】的可视化开发研究,一般来说开发团队可以在一个任务,然后做一个集成的环境,然后在这个环境中完成应用的设计和开发,以及需要的部署。
第七、我们来介绍一下【Adobe ColdFusion 】,这款工具主要是用来开发企业【Web】程序的一个技术,通过【Websockets】和互动表单以及视频等来做出【HTML5】技术,创建一种用户体验。
第八、最后【Adobe Dreamweaver CS6】作为一个【Web】端口的一种设计软件,这款工具提供了对【HTML】网站和移动程序的可视化编辑界面,整体来说使用也是比较的方便。
Bracket。Adobe开源的前端开发工具。这个基本上是完全为前端准备的,支持插件。起初用过一段时间,体验很不错的。内置Server,可以直接预览变化。
WebStorm
之所以当初不用Brackets了,因为这货实在是太好用了。一贯的Jetbrains-Platform强大的代码提示、分析、检查和建议。可以集成SASS/LESS。内置Server。当然有了前端的一些脚手架/构建工具,集成什么的无所谓了。
VisualStudioCode(vscode)
vscode有强大的扩展体系,可以做很多语言的开发。扩展质量比较高。还能集成数十种语言的调试。作为前端开发也很优秀。当然专门作为前端的工具我觉得还是略逊Brackets弱于WebStorm的。
Atom
这个软件从架构上比vscode更重视扩展和自由性,其本身就是由众多扩展构成的。扩展的自由度很高,例如装一个minimap跟sublimetext一样了。写前端跟vscode半斤八两,一样可以做其他很多语言的开发。但是个人感觉扩展质量普遍没有vscode的高。起初用过一段时间,但是受不了参差不齐的扩展质量和兼容性,就转vscode了。
SublimeText
这个相比上面三个,要轻量级得多。因为不是用web技术构建的桌面应用,启动速度也更快,更符合一个编辑器应该有的样子。不过扩展数量无法跟上面几个相比。前端开发上来说,已经跟不上atom和vscode,但是作为一个TextEditor它绝对是首选之一。