在线客服
扫描二维码
下载博学谷APP
扫描二维码
关注博学谷微信公众号
前端开发常用的编辑器有哪些?工欲善其事必先利其器,每个前端工程师在做前端开发的时候,一定有几款自己用着顺手的编辑器。而一款好用且适合自己的前端开发编辑器,往往会达到事倍功半的效果。以下是小编为大家推荐的几款编辑器,它们分别是HBuilder、WebStorm、Sublime Text、Visual Studio Code和wampServer。
1、HBuilder
简介:HBuilder是专为前端开发打造的开发工具,具有飞一样的编码、最全的语法库和浏览器兼容数据、可以方便的制作手机APP、最保护眼睛的绿柔设计等特点。支持HTML、CSS、JS、PHP的快速开发。从开放注册以来深受广大前端朋友们的喜爱。
优点:
因为是一款国产软件,所以中文界面更容易迅速上手。HBuilder拥有完善的帮助文档,诸如快捷键列表什么的,都能快速调出查询;
编码速度飞快。它拥有完整的语法提示和代码输入法、代码块等,以及浏览器兼容性提示,大幅提升HTML、js、css的开发效率。内嵌了emmet、jquery、bootstrap、angular、mui等常用框架的语法提示库。支持less,sass等预编译器。通过快捷键(alt+点击)方便查找到js方法名、ID、CSS类名和链接的出处(定义),支持跨文件查找。HBuilder JSDoc+规范。编写JSDoc有助于代码可读性的提升,还可生成API手册(主要是框架);
强大的边看边写功能。按下Ctrl P进入边看边改视图,左边保存右边立即刷新。支持模拟手机端,方便进行UI调试。科学护眼。绿柔主题的特点是柔和、低对比度、强光可见、绿色感加强。对着这样的界面写一天代码,感受要比对着太亮或太暗的界面舒服很多。
缺点:
功能比文本编辑器多,执行也自然会相对慢。编辑器滚动条的滑动有卡顿卡,略显淡疼;
比较吃内存。HBuilder还自带了可调试控制台的浏览器,ide+浏览器都在这里,内存占用肯定也少不了。资源消耗更多,但HBuilder可保证主流配置电脑流畅使用。
2、WebStorm
简介:WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。
优点:
容易学习,新手也可以快速上手。不用讲什么插件安装,搞什么配置,直接上手才是王道;
内置功能强大。做为一款真正意义上的前端开发ide,它所集成的功能非常丰富,基本无须安装插件。代码定位能力。只需鼠标一点, 就能能轻松定位到变量/属性/方法的定义处,开发非常有用;
代码和文件关联能力。无论是修改文件名还是变量名(或者删除),ws都会将变动同步到它们被使用到的地方,并且会弹出友好的警告提示。自带git版本控,语法提示,nodeJS调试等功能,命令行功能,支持各种代码检测功能,支持各种代码模板;
强大的文件临听能力。轻松实现less、sass、coffescript自动编译等。内置服务器功能。不用配置烦杂的后台环境,就可以简单测试一些需要服务器配合的页面。本地版本控制。在 WS 里所有的编辑都被存在本地,随时可以还原到历史版本(关键时候能救命)。
缺点:
吃内存。如果项目或文件比较大的话,ws运行时间一长就可能出现各种状况,卡顿甚至卡死也可能发生,但概率并不算高。如果用ws打开多个项目的话,内存占用会大幅上升。尽管如此,也从来没有造成过什么损失,最多只是重启一下。
3、Sublime Text
简介:它是一套跨平台的文本编辑器,支持基于Python的插件,开发者是Jon Skinner。虽然Sublime诞生得早,但是至今仍有众多的使用者。而且当前端开发需要在N个项目间频繁切换时,Sublime Text就会派上大用场。
优点:
不仅跨平台,而且在所有平台上看起来都很漂亮。很流畅,响应灵敏,很吸引眼球。支持多光标操作:它能让你对文本中的多个地方同时做修改,你可以看到多个地方在你输入的时候同时发生变化。重构时用它很方便,比如修改一个变量名;
扩展性很好,它使用了Python式的插件系统。这显然是一个很大和活跃的社区,可以为它提供丰富的插件,这也意味着你可以在网上找的任何你想要的插件来集成你想要的功能。
缺点:经常发现手动安装的插件会自动消失,原因是Sublime Text自动移除了。
4、Visual Studio Code
简介:Visual Studio Code中文版是微软推出的带 GUI 的代码编辑器,软件功能非常强大,界面简洁明晰、操作方便快捷,设计得很人性化。软件主要改进了文档视图,完善了对 Markdown的支持,新增PHP语法高亮。
5、wampServer
简介:WampServer,是Windos Apache Mysql PHP集成安装环境,即在window下的apache、php和mysql的服务器软件。PHP扩展、Apache模块,开启/关闭鼠标点点就搞定,再也不用亲自去修改配置文件了,WAMP它会去做。再也不用到处询问php的安装问题了,WAMP一切都搞定了。
以上就是前端开发常用编辑器的简单介绍。上面大致都讲解了这五种编辑器的优点和缺点。大家可以根据自己的实际情况,选择适合自己的前端开发编辑器。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
HTML5开发APP有哪些优点和缺点?HTML5优势和劣势大对比
HTML5开发APP有哪些优点和缺点?对比起来看,HTML5开发APP的优势明显大于劣势。比如HTML5有跨平台,开发成本低,推广更容易等等优点,同时它也有着一些缺点,比如容易受到网络的限制,用户体验性一般,变现慢等问题。本文将为大家详细分析一下,HTML5开发移动APP的优势与劣势。
9548
2019-10-23 12:45:55
为什么网站开发要重点考量浏览器兼容性?
作为前端开发工程师,在开发过程中不仅仅要考虑到移动端、小程序、APP等平台及产品,单单在PC端还要考虑各种浏览器的兼容性。为什么同样是浏览器,同样的产品展示的时候回出现不同的效果呢?除了每个浏览器本身开发架构不同之外,主要原因就是浏览器使用的内核不同。
9671
2019-12-03 18:51:40
如何利用CSS3实现响应式项目开发?
随着移动互联网的日趋成熟,一个网站能兼容多种终端的响应式项目开发应用而生。作为一种常被用于以浏览为主网站的网页布局方式,它最主要的优点就是可以给用户带来更好的使用体验。那么,我们应该如何利用CSS3实现响应式项目开发?这里给大家介绍一个免费的学习教程,手把手帮助大家掌握CSS3实现响应式项目开发的相关技能。
6689
2020-04-14 11:50:13
Web前端培训都学些什么知识?
相比于后端技术,Web前端开发对于非科班出身的学习者来讲,进入门槛更低也更加容易。随着人们对用户体验感的重视,Web前端行业不断走俏,招聘需求也在不断扩大。目前,Web前端可以说是一个绝佳的就业选择。那么,Web前端培训都学些什么知识呢?主要可以分为四个阶段,移动Web网页开发、JavaScript网页编程、网络编程以及微信小程序,下面一起来看看吧!
7444
2020-06-26 14:29:11
Web前端和后端的区别是什么?如何区分?
Web前端和后端的区别:从前端和后端两者工作内容和负责项目是完全不同。后端:入门难深入更难,枯燥乏味,看业务逻辑代码;前端:入门简单先易后难,能看到自己做出来的展示界面,有成就感。
7851
2020-09-17 16:47:02
