认识达内从这里开始

对于程序员来说，掌握不同的辅助开发工具能够大大提高我们的工作效率，降低编程开发工作的难度，而今天我们就一起来了解一下，前端编程开发常用的在线工具都有哪些。

1.EnjoyCSS

老实说，虽然我做过许多前端开发，但我并不擅长CSS。当我陷入困境时，[EnjoyCSS]是我的大救星。EnjoyCSS提供了一个简单的交互界面，帮助我设计元素，然后自动输出相应的CSS代码。

EnjoyCSS可以输出CSS、LESS、SCSS代码，并支持指定需要支持哪些浏览器及其最低版本。开发简单页面时用起来比较方便，但不太适合复杂一点的前端项目(这类项目往往需要引入CSS框架)。

2.PrettierPlayground

[Prettier]是一个代码格式化工具，支持格式化JavaScript代码(包括[ES2017]、[JSX]、[Angular]、[Vue]、[Flow]、[TypeScript]等)。Prettier会移除代码原本的样式，替换为遵循最佳实践的标准化、一致的样式。IDE大多支持Prettier工具，不过Prettier也有在线版本，让你可以在浏览器里格式化代码。

如果工作电脑不在手边，使用移动端设备或者临时借用别人的电脑查看代码时，PrettierPlayground非常好用。相比在IDE或编辑器下使用Prettier，个人更推荐通过gitpre-commithook配置Prettier：hook可以保证整个团队使用统一的配置，免去各自分别配置IDE或编辑器的麻烦。如果是老项目，hook还可以设置只格式化有改动的单个文件甚至有改动的代码段，避免在IDE或编辑器下使用Prettier时不小心格式了大量代码，淹没了commit的主要改动，让review代码变得十分痛苦。

3.Postman

[Postman]一直在我的开发工具箱里，测试后端API接口时非常好用。GET、POST、DELETE、OPTIONS、PUT这些方法都支持。毫无疑问，你应该使用这个工具。

Postman之外，[Insomnia]也是很流行的RESTAPI测试工具，亮点是支持[GraphQL]。不过Postman从去年夏天发布的v7.2起也支持了GraphQL。

4.StackBlitz

[ChidumeNnamdi]盛赞这是每个用户最喜欢的在线IDE。[StackBlitz]将大家最喜欢、最常用的IDEVisualStudioCode搬进了浏览器。

StackBlitz支持一键配置Angular、[React]、Ionic、TypeScript、RxJS、[Svelte]等JavaScript框架，也就是说，只需几秒你就可以开始写代码了。

微软官方其实也提供了在线版本的VSCode，可以在浏览器内使用VSCode，并且支持开发Node.js项目(基于Azure)。不过StackBlitz更专注于优化前端开发体验，界面更加直观一点，也推出了beta版本的Node.js支持(基于GCP，需要填表申请)。

5.Bit.dev

软件开发的基本原则之一就是代码复用。代码复用减少了开发量，让你不用从头开发组件。

这正是[Bit.dev]做的事，分享可重用的组件和片段，降低开发量，加速开发进程。

除了公开分享，它还支持在团队分享，让团队协作更方便。

正如Bit.dev的口号「组件即设计体系。协同开发更好的组件。」所言，Bit.dev可以用来创建设计体系，允许团队内的开发者和设计师一起协作，从头搭建一套设计体系。

6.CanIUse

[CanIUse]是非常好用的在线工具，可以方便地查看各大浏览器对某个特性的支持程度。

我过去经常碰到自己开发的应用的一些功能在其他浏览器下不支持的情况。比如我的作品集项目使用的某个特性在Safari下不支持，直到项目上线几个月后我才意识到。这些经验教训让我意识到需要检查浏览器兼容性。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。