前端开发之最佳在线IDE

Posted 21CTO

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端开发之最佳在线IDE相关的知识,希望对你有一定的参考价值。

前端开发者们,是时候脱离离线代码编辑器与IDE,考虑在线编码工具的时候了。



Atom、VS Code、VIM还有其它IDE也很棒,但是我们在编写前端页面时,需要从IDE不断切换到浏览器来测试,不断打开浏览器刷新网页这个重复工作,这让人感觉到比较乏味。即便是浏览器保持打开状态,从编辑器转到游览器,然后点击选项卡来刷新,也是件麻烦的事。


在线前端编辑器具有实时显示代码效果的优势,我们不用再切换软件来显示前端代码。编码编辑器可以并行显示结果以及实时编辑代码,这给我们提供了极大的便利和编码速度,让我们成为更有效率。


大多数的前端在线编辑器除了提供实时编码外,还有大量的设计师、开发者粉丝,他们还会共享大量代码片断供人们使用和参考。


下面来盘点几款优秀的前端在线编辑器:


1.CodePen


官方网站:https://codepen.io/


前端开发之最佳在线IDE

Codepen在线编辑器界面


对于前端设计和开发人员而言,CodePen毫不费劲的是前端在线编辑器的最大社区,我们可以轻松的制作和展示html、CSS和javascript代码。


Codepen既可以充当代码编辑器,又可以做为开源的学习环境。开发者可以创建称为”pen“的代码断,代码断的旁边会立即显示代码输出结果。它还有着非常便捷的功能,比如代码缩进以及高亮&彩色语法显示。


Codepen还支持HTML、CSS和JS的预处理器,包括并不限于Pug、Slim、Haml、SCSS、Sass、TypeScript、CoffeeScript,也可以导入前端框架,如JQuery和BootStrap。


在创作响应式页面时,CodePen可以帮我们大忙。页面输出是可移动的,可以轻松调整屏幕大小来测试代码。


人们也不用再担心丢失密码,CodePen会自动帮我们保存代码,可以随时恢复。就像GitHub一样,人们可以随意编辑自己和其它用户的代码。


除此之外,CodePen允许将编辑器嵌入到博客中,让代码和结果对读者透明。


CodePen还提供了付费版本Pro,专业版用户可以创建多个项目,自定义域,与其它人协作,自定义CSS主题,创建专用Pen等。


2.JSFIDDLE


前端开发之最佳在线IDE

JSFiddle编辑器


JSFiddle有一个很优秀的在线社区,用来测试和展示用户创建或协作的HTML、CSS以及JS代码片断,JSFiddle将这些代码片断称为”小提琴“,它还支持Ajax模拟。它和CodePen一样,JSFiddle提供了一个干净接口将代码和结果并排放置,点击”运行“就能应用结果。


在2019年,PYPL(流行编程语言索引)中将JSFiddle中排名第二,成为最受欢迎的在线IDE。说明前端社区中,JSFiddle的受欢迎程度,在Stack Overflow上显示代码时,JSFiddle也是首选的的编码工具。


JSFiddle提供了多种JS和CSS库的支持,例如JQuery、Vue、React、React+JSX、Preact、TypeScript、CoffeeScript、SCSS、CSS Grid、BootStrap和PostCSS.


前面我们说过前端IDE可支持开发者之间的实时协作,JSFiddel在此方面不断完善其功能。


目前JSFiddle支持多语言版本,包括英语,波兰、日本语以及印度语。


3.Plunker


官方网站:https://next.plnkr.co/



Plunker是一个为网站设计,快速创建原型、实践、共享和测试的良好工具。


从构思到实践,Plunker帮助我们快速、高效且轻松的构建网站。Plunker提供了一个多文件,多窗口编辑器,提供完整的文件树,可以轻松的将文件、图片拖放到工作台中。


Plunker是一个灵活的前端编辑器,可根据需要重新排列和调整窗体大小,编码更改可以立即看到,提高开发效率。


4.JS Bin


官方网站:https://jsbin.com



JS Bin是一种流行且免费的在线HTML、CSS和JS在线编辑器,它具有代码实时出功能,开发人员可以随时看到结果。JS Bin中的代码项目称之为”bin“,JS Bin的一些功能包括:在线编辑器以及实时预览与重载,自定义模板,库支持以及文件拖放,快捷键、克隆以及下载垃圾箱等功能。


JS Bin支持嵌入博客文章,能够自动保存代码,不用担心丢失工作。另外它还具有代码广播功能,可以记录哪些编码投放到参与者,而且是实时的。JS Bin支持HTML、CSS以及JS预处理,如Markdown等语法。


来源:21CTO社区综合


以上是关于前端开发之最佳在线IDE的主要内容,如果未能解决你的问题,请参考以下文章

前端开发工具之Hbuilder简介和安装

今天来share一款超级超级好用的前端开发的IDE

前端开发利器-Brackets IDE

前端开发有什么好的 IDE 推荐一下

openlayers4 入门开发系列之前端动态渲染克里金插值 kriging 篇(附源码下载)

干货前端开发者最常用的六款IDE