常见的前端开发编辑器的对比

964 阅读8分钟
  1. VSCode

    • 功能介绍:

      • Visual Studio Code(VS Code)是微软2015年推出的一个轻量但功能强大的源代码编辑器,基于 Electron 开发,支持 Windows、Linux 和 macOS 操作系统。内置了对JavaScript,TypeScript和Node.js的支持并且具有丰富的其它语言和扩展的支持,功能超级强大。
      • VSCode是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段、代码对比 Diff、GIT命令等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。
    • 优点:

      • 加载大文件几乎秒开,运行速度很快
      • 跨平台的文本编辑器,内置了对许多主流语言的支持
      • 提供了很多非常方便的插件,可以快速的找到适合自己的插件 完全免费(非常推荐)
    • 缺点:

      • 对C#支持还不够好。
      • 不支持工程加载,只支持文件夹加载,引用比较复杂的大工程支持力度低。
      • 支持git但是对github没提供接口。
      • debug需要手动输入参数,虽不复杂,但和VS一贯定位不符。

2.hbuilder

  • 下载地址:www.dcloud.io/

  • 功能介绍:

    • 前端开发小白入门首选,hbuilder是国产的一款前端开发工具而且是免费的,对于英语不好的前端工程师是一个不错的消息。
    • 优点是有强大的其他语言支持和开发webapp等功能,强大到没朋友。在语法提示、转到定义、重构、调试等方面都非常高效。缺点也是有一些的,就是其有些稳定,有时可能会有些卡顿的现象,希望官方修复。
  • 优点:功能比较全面适合满足所有创新,用户使用习惯成熟,用户粘性好。

  • 缺点:开发周期较长、开发成本高、维护难度高。

  1. sublime text3
  • 下载地址:www.sublimetext.com/

  • 功能介绍:

    • sublime text是一个轻量级的编辑器,也是支持各种编程语言,sublime text所有的强大功能都是支持插件的,而且快捷键十分的好用,可以极大的减少开发的劳动程度,使用sublime就是要使用其快捷键和插件。
    • sublime text3的优点的轻量级但是功能强大,优雅小巧启动速度快,有着丰富的第三方支持,能够满足各种各样的扩展缺点是对于项目的管理等不是很方便,但代码提示不如hubuilder强大。
  • 优点:

    • 主流前端开发编辑器。
    • 体积较小,运行速度快。
    • 文本功能强大。
    • 支持编译功能且可在控制台看到输出
    • 内嵌python解释器支持插件开发以达到可扩展的目的
    • Package Control:ST支持的大量插件可通过其进行管理
  • 缺点:

    • 收费闭源,收费的问题虽然不影响使用,但是闭源带来的问题就是一个bug千年都不见修复,很影响使用。
    • 虽然启动运行快,但当打开xcode运行着项目的同时去使用Sublime,你就知道什么是崩溃了,输入一行代码,半天还反应不过来(这个问题仅仅存在于Sublime Text3)。
    • 虽然有Package Control管理插件,但是安装搜索插件时,只能看见一句话对插件进行简单的描述,而且之后的插件配置也不方便。
    • 当插件安装的比较多的时候,Sublime会时不时的崩溃,用户也不能清晰的知道是哪个插件引起的,只能一个个的卸载进行判断,很麻烦。
    • 很多插件在Sublime Text3和Sublime Text2上不兼容,很多Sublime Text2上的好用插件,在Sublime Text3上不能使用。
    • Sublime Text2没有新建窗口的问题,要同时打开不同的项目,很不方便。
    • 吐槽一下Sublime Text的project功能,ctrl+command+p只能切换最近打开过的project,即使你保存在了Sublime Project,只要最近没有打开过,这个快捷方式就不能切换。
  1. WebStorm
  • 下载地址:www.jetbrains.com/webstorm/

  • 功能介绍:

    • WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。官方提供的插件支持,满足许多不会配置的同学,ESlint,词法高亮,emmet,CSS预处理器,新版本也添加了对ES6的支持,内建了服务器调试。
    • 目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。
  • 优点:

    • 智能代码辅助功能 -> WebStorm提供JavaScript和编译为JavaScript语言、 Node.js、HTML和CSS的智能代码辅助。 享受代码补全、强大的导航功能、动态错误检测以及所有这些语言的重构。
    • 调试、跟踪和测试 -> WebStorm提供强大的内置工具进行调试、测试和跟踪 您的客户端和Node.js应用程序。 只需很少配置和精心 集成到IDE中,WebStorm使这些任务变得更加轻松。
    • 无缝工具集成 -> WebStorm集成流行的命令行工具,用于Web开发, 使您无需使用命令行即可获得高效、简化的开发 体验。
    • IDE功能 -> WebStorm建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。 这个平台可以针对您的开发工作流进行微调并且能够提供高度可定制的体验。
  • 缺点:

    • 启动Webstorm,比较耗电脑的内存和CPU,启动时间相比较Vscode、Atom以及Sublime来说,速度有点慢,所以,使用WebStorm,电脑的配置需要稍微高一点,内存条至少8G以上,不然电脑会非常卡顿。
  1. Atom
  • 下载地址:atom.io/

  • 功能介绍:

    • Atom 是github专门为程序员推出的一个跨平台文本编辑器。平易近人,但可删节的核心工具定制做任何事,也可以使用有效不沾一个配置文件。为开源而生。
    • 具有简洁和直观的图形用户界面,并有很多有趣的特点:支持CSS,HTML,JavaScript等网页编程语言。它支持宏,自动完成分屏功能,集成了文件管理器。
  • 优点:

    • 开发维护团队强大,而且是开源项目,因此修复bug速度快,生态圈成长速度快。
    • 快捷键支持特别好,熟悉了各种快捷键后可以成吨提高生成效率。
    • 比较稳定,很少出现崩溃。
    • 插件管理很到位,能准确定位出问题的插件。git原生支持。
    • 插件的生态圈发展速度特别快,一大堆好用的插件等着用户去探索。
  • 缺点:

    • 性能问题,启动速度很慢。
    • 打开大文件时会出现CPU占用过高的问题。
    • 目前相比于Sublime技术层面还不够成熟,有不少bug。
  1. Dreamweaver CC 2017
  • 下载地址:www.adobe.com/products/dr…

  • 功能介绍:

    • 老牌的IDE ,曾经以PS+DW+FW称霸网页领域,号称网页三剑客,然而之前的版本更新较慢,版本陈旧,已经满足不了广大前端开发者的项目需求,逐渐被市场淘汰。
    • 好在2017版本及时修正,外观、界面、语法高亮等已经很漂亮,并且添加了CSS预处理器支持,同时保留了部分预制组件,方便对语法还不熟悉的同学,对于不会node的同学也有提供实时预览,适合对前端有进一步了解的同学。
  1. HBuilderX
  • HBuilder,H是HTML的缩写,Builder是建设者。

  • 功能介绍:

    • 它是为前端开发者服务的通用IDE,或者称为编辑器。与vscode、sublime、webstorm类似。
    • 它可以开发普通web项目,也可以开发DCloud出品的uni-app项目、5+App项目、wap2app项目。
    • 目前有900万开发者在使用HBuilder。
    • 老版的HBuilder是红色logo,已于2018年停止更新。绿色logo的HBuilderX是新版替代品。
    • 除了服务前端技术栈,它也可以通过插件支持php等其他语言。
  • 优点:相比于竞品,它的优势有:

    • 运行速度快(c++内核)
    • 对markdown、vue支持更为优秀
    • 还能开发App、小程序,尤其对DCloud的uni-app、5+App等手机端产品有良好的支持
  • HBuilderX下载

    • HBuilderX文档系统:包括使用文档、技巧、cli工具、插件开发API手册等。hx.dcloud.net.cn/
  • 优点:

    • 一套代码,多端运行,可以同时生成ios,Android,H5,微信小程序,支付宝小程序,百度小程序。
    • 代码实现简单,开发快速,官网提供很多组件,可以直接拿来用。
    • uniapp开发体验对前端人员十分友好,首先uni-app是基于vue.js的,其次和微信小程序的开发方式类似。
    • 突破了系统对H5调用原生功能的限制,比如使用uniapp结合HTML5plus能调用系统相册图片选择和拍照等。
  • 缺点:

    • uni-app问世的时间还比较短,有很多地方还不是完善,坑很多,如果不喜欢爬坑的朋友那就少用uni-app吧。
    • 对于使用中的一些bug及问题,官方回应的不是很及时。

\