前端编辑器，零基础入门到精通，收藏这篇就够了

程序员_大白

墨衍会员 · AI 创作全网分发码龄5年

关注

原创最新推荐文章于 2026-10-08 11:26:09 发布 1.5k 阅读 AI 写同款· GEO 优化 ›

前端常用的6种编辑器

Visual Studio Code

在这里插入图片描述

下载地址：https://code.visualstudio.com/

介绍：

Visual Studio Code简称VS Code，是一款由微软开发且跨平台的免费代码编辑器，该软件功能十分强大，功能和插件也非常的全面，支持代码自动补全，自定义快捷键等功能，汉化插件功能非常好用，对英语不好的小伙伴非常的友好。VS Code 使用 Monaco Editor 作为其底层的代码编辑器，是目前身边用的最多的开发前端的工具之一。

hbuilder

下载地址：http://www.dcloud.io/

在这里插入图片描述

介绍：

是一款国产的编译工具，而且还是免费的，对英语不好的前端工程师非常的友好的工具，在语法提示这些调试方面都很高效，运行的时候也更加的小巧点，还支持webpack等功能，非常的强大，但是我自己感觉软件的缺点就是有时候会有卡顿，期待官方的及时修复。

sublime

下载地址：http://www.sublimetext.com/

在这里插入图片描述

介绍：

这是一款轻量简洁的跨平台编辑器，也是目前主流前端的开发编辑器，体积小，启动快，运行快，也可以安装大量插件，来满足开发者不同的需求，不过不足之处就是这个软件是收费且闭源的，配置插件有点不是很方便，对于项目管理方面也不是很方便。

WebStorm

下载地址：https://www.jetbrains.com/webstorm/

在这里插入图片描述

介绍：

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具，软件非常好用，他的打印log非常的方便，软件自身就带有吸管工具，非常的实用，导入第三方库的时候，比如JQuery的时候，会有相关的提示，这款软件号称“Web前端开发神器”，缺点的话就是，收费编码软件，我觉得这是他最大的缺点，还有不足的就是启动速度方面有点偏慢。

Atom

下载地址：https://atom.io/

在这里插入图片描述

介绍：

软件开源免费，bug修复也比较快，比较的稳定，简洁和直观的图形用户界面，插件管理非常的榜，可以准确定位出问题的插件，缺点的话就是启动速度慢，打开大项目的话，会出现cpu占用比较的高。

Dreamweaver CC

下载地址：https://www.adobe.com/products/dreamweaver.html

在这里插入图片描述

介绍：

比较老的一款网页编辑器，曾经以PS+DW+FW称霸网页领域，号称网页三剑客，不过由于更新太慢，逐步被市场所淘汰，。现在据我所知，除了一些高校的教学还在使用这款，基本市面上使用这款编辑器的非常少了，对初学者太友好了，代码提示太过于强大，轻轻一点都是提示，还有就是Dreamweaver 所占用的运行内存比较大。