常见的前端编辑器,除了VSCODE 你还了解过哪些

前言

后端程序员们常常会争论“什么是最好的语言”，而对于前端来说，我们没有选择，无论爱与恨，我们只能选择 JavaScript 。所以前端日常的争论就变成了“什么是最好的框架”以及“什么是最好的编辑器” 。

所谓工欲善其事，必先利其器。对于前端来说，编辑器是除了chrome浏览器以外，每天打开时间最长的软件。选择一款功能强大又趁手的工具，可以让开发效率提升，达到事半功倍的效果。 所以 前端常用的编辑器,你知道哪些???

 代码编辑器主要分两种：IDE（集成开发环境）和轻量编辑器。

IDE

IDE（集成开发环境）是指用于管理整个项目的，具有强大功能的编辑器。顾名思义，它不仅仅是一个编辑器，而且还是个完整的“开发环境”。

IDE 加载项目（通常包含很多文件），并且允许在不同文件之间导航（navigation）。IDE 还提供基于整个项目（不仅仅是打开的文件）的自动补全功能，集成版本控制（如 git）、集成测试环境等一些其他“项目层面”的东西。

轻量编辑器

“轻量编辑器”没有 IDE 功能那么强大，但是它们一般很快、优雅而且简单。

“轻量编辑器”主要用于快速打开和编辑文件。

“轻量编辑器”和 “IDE” 最大的区别是，IDE 一般在项目中使用，这也就意味着在开启的时候要加载很多数据，如果需要的话还会分析项目的结构等。如果我们只需要编辑一个文件，那么“轻量编辑器”会更快。

实际上，“轻量编辑器”一般都有各种各样的插件，这些插件可以做目录级（directory-level）的语法分析和代码补全。所以“轻量编辑器”和 IDE 也没有严格的界限。

一、Visual Studio Code （轻量编辑器 跨平台，免费）

下载地址：Visual Studio Code - Code Editing. Redefined

功能介绍：

微软在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目：一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。

Visual Studio Code软件功能非常强大，界面简洁明晰、操作方便快捷，设计得很人性化。软件主要改进了文档视图，完善了对 Markdown的支持，新增PHP语法高亮。
 

二、Hbuilder ( IDE )

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

功能介绍：

前端开发小白入门首选，hbuilder是国产的一款前端开发工具而且是免费的，对于英语不好的前端工程师是一个不错的消息。

优点是有强大的其他语言支持和开发webapp等功能，强大到没朋友。在语法提示、转到定义、重构、调试等方面都非常高效。缺点也是有一些的，就是其有些稳定，有时可能会有些卡顿的现象，希望官方修复。
 

三、sublime text3（轻量编辑器 跨平台，共享软件）

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

功能介绍：

sublime text是一个轻量级的编辑器，也是支持各种编程语言，sublime text所有的强大功能都是支持插件的，而且快捷键十分的好用，可以极大的减少开发的劳动程度，使用sublime就是要使用其快捷键和插件。

sublime text3的优点的轻量级但是功能强大，优雅小巧启动速度快，有着丰富的第三方支持，能够满足各种各样的扩展缺点是对于项目的管理等不是很方便，但代码提示不如hubuilder强大。
 

四、WebStorm ( 跨平台，收费）

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

功能介绍：

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。官方提供的插件支持，满足许多不会配置的同学，ESlint，词法高亮，emmet，CSS预处理器，新版本也添加了对ES6的支持，内建了服务器调试。

目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。
 

五、Atom （轻量编辑器 跨平台，免费）

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

功能介绍：

Atom 是github专门为程序员推出的一个跨平台文本编辑器。平易近人,但可删节的核心工具定制做任何事,也可以使用有效不沾一个配置文件。为开源而生。

具有简洁和直观的图形用户界面，并有很多有趣的特点：支持CSS，HTML，JavaScript等网页编程语言。它支持宏，自动完成分屏功能，集成了文件管理器。
 

六 ：Dreamweaver CC 2017

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

功能介绍：

老牌的IDE ，曾经以PS+DW+FW称霸网页领域，号称网页三剑客，然而之前的版本更新较慢，版本陈旧，已经满足不了广大前端开发者的项目需求，逐渐被市场淘汰。

好在2017版本及时修正，外观、界面、语法高亮等已经很漂亮，并且添加了CSS预处理器支持，同时保留了部分预制组件，方便对语法还不熟悉的同学，对于不会node的同学也有提供实时预览，适合对前端有进一步了解的同学。