好用的开发在线工具推荐丨1024征文活动

磨刀不误砍柴工，找到适合自己的工具对于工作来说绝对是一个事半功倍的事情。不仅效率蹭蹭蹭地往上涨，对于我个人而言，单纯的喜欢追求高效率，用个“趁手”的家伙心情都会变得更爽。

今天，就和大家推荐几款好用的开发工具～

01. EnjoyCSS

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

02. Prettier Playground

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

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

03. Postman

Postman测试后端API接口时非常好用。GET、POST、DELETE、OPTIONS、PUT这些方法都支持。

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

04. StackBlitz

Chidume Nnamdi盛赞这是每个用户最喜欢的在线IDE。StackBlitz将大家最喜欢，最常用的IDE Visual Studio Code搬进了浏览器。StackBlitz支持一键配置Angular、Reart、Ionic、TypeScript、RxJS、Svelte等JavaScript框架。这个在线IDE可以用来在线尝试一些样例代码或库，无需在本地从头搭建环境。

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

05. Bit.dev

软件开发的基本原则之一就是代码复用。代码复用减少了开发量，让你不用从头开发组件。这正是Bit.dev做的事，分享可重用的组件和片段，降低开发量，加速开发进程。

Bit.dev 可以用来创建设计体系，允许团队内的开发者和设计师一起协作，从头搭建一套设计体系。Bit.dev 目前支持 React、Vue、Angular、Node 及其他 JavaScript 框架。

在 Bit.dev 上不仅可以搜索组件，还可以直接查看组件的依赖，浏览组件的代码，甚至在线编辑代码并查看预览效果！选好组件后可以通过 Bit.dev 的命令行工具 bit 在本地项目引入组件，也可以通过 npm、yarn 引入组件。

06. CanIUse

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

CanIUse 还可以在命令行下使用，例如，在命令行下查看 WebP 图像格式的浏览器兼容性：caniuse webp（运行命令前需要事先通过 npm install -g caniuse-cmd安装命令行工具。

---

本文参与了 SegmentFault思否征文「1024 征文活动」，欢迎正在阅读的你也加入。