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

目录

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专门为程序员推出的一个跨平台文本编辑器。具有简洁和直观的图形用户界面,并有很多有趣的特点:支持CSSHTMLJavaScript等网页编程语言。它支持宏,自动完成分屏功能,集成了文件管理器。

优点

  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. 制作实时预览视图效果

缺点

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值