vlambda博客
学习文章列表

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

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

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

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

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

1.CodePen

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

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

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社区综合