前端编程编辑器都有哪些 ?

目录

Sublime Text

webstorm 

ATOM

Brackets

Hbuilder

VSCode

Notepad++

Dreamweaver CC

Sublime Text

介绍

是一个代码编辑器（Sublime Text 2是收费软件，但可以无限期试用），也是HTML和散文先进的文本编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来，它最初被设计为一个具有丰富扩展功能的Vim。

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

优点

1. 主流前端开发编辑器

2. 体积较小，运行速度快

3. 文本功能强大

4. 支持编译功能且可在控制台看到输出

5. 内嵌python解释器支持插件开发以达到可扩展目的

缺点

1. 收费闭源，bug修复时间慢

2. 装插件的时候，只有插件列表，显示一句简单的描述，插件配置不方便，很多插件sublime2 和sublime3不兼容

3. 只有一个输出窗口，你不能同时看到两个程序的运行结果，这对于写服务器和客户端程序的我很坑。当然大多数人写代码都不用同时多个窗口吧。

4. 无法终止进程。比如socket编程监听某个端口，这个端口一直都是被绑定的，你修改程序后想运行第二次，结果端口被占用了，我只好手动kill进程了(大多数人也都用不着中止进程吧，一般只需要点击“取消编译”来中止正在编译的程序)

5. 修改文件名时无法自动全局替换，虽然可以手动 ctrl+shift+f 可以实现多个文件中的变量名查找替换，但文件名要用其他方式，总体来说索引方面不太好

6. 可以点击跳转到函数定义的地方，但函数使用的地方没法列举出来

webstorm

介绍

WebStorm 是JetBrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

优点

1. 足够的智能化，提示非常方便

2. 支持Js、jQuery，extJs，Node.js，等等你能想得到的前端和部分后端技术

3. 很方便的扩展功能

4. 跨平台性能好

5. 轻量级，安装包非常小

6. 大纲显示很方便

缺点

1. 收费!这是WebStorm最大的缺点,收费还不便宜,个人版一年大概要300多人民币。

2. 启动速度以及打开工程速度缓慢,有时候打开一个小项目都要等1分钟甚至更长时间,更别说一个庞大的项目。

3. 常吃资源，占用的内存远高于VSCode。

ATOM

介绍

Atom 是github专门为程序员推出的一个跨平台文本编辑器。具有简洁和直观的图形用户界面，并有很多有趣的特点：支持CSS，HTML，JavaScript等网页编程语言。它支持宏，自动完成分屏功能，集成了文件管理器。

优点

1. 小清新界面让人耳目一新.颜控必备

2. 丰富的插件几乎能够满足所有 web 开发需求

3. git 原生支持

4. 简单的插件编写

5. 自定义界面[如图1可以更改展示和背景,ui 等等]

缺点

1. 打开大文件卡死

2. svn 支持较差

3. 未来可能收费

Brackets

介绍

Brackets 是Adobe发布的一款免费、开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境。使用Node.js构建！官网:Brackets - A modern, open source code editor that understands web design.。 Brackets 的特点是简约、优雅、快捷！它没有很多的视图或者面板，也没太多花哨的功能，它的核心目标是减少在开发过程中那些效率低下的重复性工作，例如浏览器刷新，修改元素的样式，全文搜索功能等等。

优点

1. 支持多语言….

2. Brackets的前端开发功能强于sublime text，其他功能远不如sublime text，比如PHP开发、java开发等。和这也就是Brackets和Sublime Text、Everedit 等通用代码编辑器不一样的地方:Brackets 是专门针对 WEB 前端开发而生。

3. Brackets支持即时预览，比如你修改CSS后，不用刷新页面就会显示出修改后的效果，具体用法我会在后面介绍

4. Brackets同样支持全文搜索。

5. 错误提示，如果你的代码不符合HTML标准或者有错误，他会在编辑器下方提示

缺点

1. 快速样式编辑因为要搜索整个目录，所以速度会很慢，要用它得配个SSD才行

2. 代码片段没有ST好用，快捷键需要设置组合键，其他键按了不是没反应就是触发默认功能了。

3. 没有ST那么随心所欲，ST甚至可以修改Tab键、Enter的默认功能，触发顺序等，非常强大。

Hbuilder

介绍

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。

优点

1. 轻巧，仅10余M的绿色发行包(不含插件)

2. 极速，不管是启动速度、大文档打开速度、编码提示，都极速响应，C++的架构性能远超Java或NW.js/Electron架构

3. 强大的语法提示，自研了强大的AST语法分析引擎，能对代码进行深度语法分析，给予准确的语法提示和转到定义，而不是猜单词

4. 高效字处理能力，对字处理提供了更崇高的支持

5. 更强大的多光标、智能双击…让字处理的效率大幅提升

6. 清爽护眼，界面清爽简洁，绿柔主题经过科学的脑疲劳测试，是最适合人眼长期观看的主题界面

缺点

1. 控制台没有直接清空的按钮

2. 搜索栏置顶，不好操控

3. 回车缩进鸡肋

VSCode

介绍

Visual Studio Code 是微软在2015年4月30日build开发者大会上发布的一个跨平台\源代码\轻量且强大的编辑器。既是源代码编辑器，又是它又能进行简单的代码调试运行。支持Windows，OS X和Linux。内置JavaScript、TypeScript和Node.js支持，而且拥有丰富的插件生态系统，可通过安装插件来支持C++、C#、Python、PHP等其他语言。

优点

1. 开源，免费，跨平台。

2. 有完善的插件生态，VSCode 的插件功能种类繁多，从代码样式更改到代码提示补全，再到代码运行调试格式化，只要找到相应的插件，就能给自己的 VSCode 添加相应的功能。

3. 背靠微软大佬，熟悉程序员需求

4. 内置了 git 。版本管理工具的重要性只要有参与代码开发就一定知道，VSCode 直接内置了 git，令版本管理更加方便。

5. 使用相应语言的插件拓展，可以对代码进行简单的调试。

6. 语法高亮和智能提示，有强大的智能提示

缺点

1. 要开发大型项目要下很多插件，配置很多，如ESLint配置，prettier配置等等

2. 击CSS类名跳转、CSS类名提示仍需要借助插件，而且vue中无法跳转class和id。

3. 代码提示缺失AI，官方的AI插件不是很好用。重构文件名没有自动更新功能，git相比webstorm真是一言

Notepad++

介绍

Notepad++是Windows操作系统下的一套文本编辑器(软件版权许可证: GPL)，有完整的中文化接口及支持多国语言编写的功能(UTF8技术)。

功能比 Windows 中的 Notepad(记事本)强大，除了可以用来制作一般的纯文字说明文件，也十分适合编写计算机程序代码。Notepad++ 不仅有语法高亮度显示，也有语法折叠功能，并且支持宏以及扩充基本功能的外挂模组。

是一款免费软件，可以免费使用，自带中文，支持众多计算机程序语言: C,C++,Java,pascal,C#,XML,SQL,Ada,HTML,PHP,ASP, AutoIt, 汇编, DOS批处理, Caml, COBOL, Cmake, CSS,D, Diff, ActionScript, Fortran, Gui4Cli, Haskell, INNO, JSP, KIXtart, LISP, Lua, Make处理(Makefile), Matlab, INI文件, MS-DOS Style, NSIS, Normal text, Objective-C, Pascal,Python, Javascript,Verilog,Haskell,InnoSetup,CMake,VHDL,Matlab

优点

1. 所见即所得功能、语法高亮、字词自动完成功能，支持同时编辑多重文档；支持自定义语言；

2. 对于HTML网页编程代码，可直接选择在不同的浏览器中打开查看，以方便进行调试；

3. 自动检测文件类型，根据关键字显示节点，节点可自由折叠/打开，可显示缩进引导线，使代码富有层次感；

4. 可打开双窗口，在分窗口中又可打开多个子窗口；

5. 可显示选中文本的字节数，并非普通编辑器所显示的字数；提供了一些实用工具，如邻行互换位置、宏功能等；

缺点

1. 比起专用的 IDE 缺少语法检查，颜色选取，代码的 outline，注释的解析，TODO，调试工具集成，部署工具集成等等好多功能。

2. 打开大文件比较慢。

Dreamweaver CC

介绍

Adobe Dreamweaver CC是一款可视的网页制作编辑软件，针对网络及移动平台进行设计、开发并发布，而不需要为程式代码烦恼。Dreamweaver提供直觉式的视觉效果界面，可用于建立及编辑网站，并提供与最新的网络标准相容性，同时对 HTML5/CSS3 和 jQuery 提供顶级的支持。

优点

1. 快速制作网页以及网站设计管理

2. 四大面板方便代码编辑

3. 功能齐全，工具多多，方便代码编辑

4. 制作效率高

5. 利用dw软件编辑自动更新链接以及管理网站

6. 全面的css支持

7. 制作实时预览视图效果

缺点