译者:LeanCloud
https://segmentfault.com/a/1190000022437635
网路上能找出后端合作开发街道社区重大贡献的大批辅助工具,这首诗列举了我最喜欢的许多辅助工具,那些辅助工具给我的工作增添了很多便捷。
1. EnjoyCSS
正经说,尽管我做过很多后端合作开发,但我并不擅于 CSS。当我债台高筑时,[EnjoyCSS] 是我的大救世主。EnjoyCSS 提供更多了两个单纯的可视化介面,协助我结构设计原素,接着手动输入适当的 CSS 标识符。
EnjoyCSS 能输入 CSS、LESS、SCSS 标识符,并全力支持选定须要全力支持什么样应用程序或其最高版。合作开发单纯网页中用出来较为方便快捷,但不太适合繁杂一点儿的后端工程项目(这类工程项目常常须要导入 CSS 架构)。
”2. Prettier Playground
[Prettier] 是两个标识符序列化辅助工具,全力支持序列化 JavaScript 标识符(主要包括 [ES2017]、[JSX]、[Angular]、[Vue]、[Flow]、[TypeScript] 等)。Prettier 会去除标识符原先的式样,代替为遵从最差课堂教学的技术标准、完全一致的式样。IDE 多半全力支持 Prettier 辅助工具,但是 Prettier 也有新浪网版[1],让你能在应用程序里序列化标识符。
如果组织工作电脑不在手边,使用移动端设备或者临时借用别人的电脑查看标识符时,Prettier Playground 非常称心。相比在 IDE 或编辑器下使用 Prettier,个人更推荐通过git pre-commit hook[2]配置 Prettier:hook 能保证整个团队使用统一的配置,免去各自分别配置 IDE 或编辑器的麻烦。如果是老工程项目,hook 还能设置只序列化有改动的单个文件甚至有改动的标识符段,避免在 IDE 或编辑器下使用 Prettier 时不小心格式了大批标识符,淹没了 commit 的主要改动,让 review 标识符变得十分痛苦。
”3. Postman
[Postman] 一直在我的合作开发辅助工具箱里,测试后端 API 接口时非常称心。GET、POST、DELETE、OPTIONS、PUT 那些方法都全力支持。毫无疑问,你应该使用这个辅助工具。
Postman 之外,[Insomnia] 也是很流行的 REST API 测试辅助工具,亮点是全力支持 [GraphQL]。但是 Postman 从 去年夏天发布的 v7.2 起也全力支持了 GraphQL。
”4. StackBlitz
[Chidume Nnamdi] 盛赞这是每个用户最喜欢的新浪网 IDE。[StackBlitz] 将大家最喜欢、最常用的 IDE Visual Studio Code 搬进了应用程序。
StackBlitz 全力支持一键配置 Angular、[React]、Ionic、TypeScript、RxJS、[Svelte] 等 JavaScript 架构,也就是说,只需几秒你就能开始写标识符了。
我觉得这个新浪网 IDE 很有用,特别是能新浪网尝试许多样例标识符或者库,否则仅仅尝试许多新特性就须要花很多时间在新工程项目初始化配置上。有了 StackBlitz,无需在本地从头搭建环境,花上几分钟就能试用两个 NPM 包。很棒,不是吗?
微软官方其实也提供更多了新浪网版的 VSCode[3],能在应用程序内使用 VSCode,并且全力支持合作开发 Node.js 工程项目(基于 Azure)。但是 StackBlitz 更专注于优化后端合作开发体验,介面更加直观一点儿,也推出了 beta 版的 Node.js 全力支持(基于 GCP,须要填表申请)。
”5. Bit.dev
软件合作开发的基本原则之一就是标识符复用。标识符复用减少了合作开发量,让你不用从头合作开发组件。
这正是 [Bit.dev] 做的事,分享可重用的组件和片段,降低合作开发量,加速合作开发进程。
除了公开分享,它还全力支持在团队分享,让团队协作更方便快捷。
正如 Bit.dev 的口号「组件即结构设计体系。协同合作开发更好的组件。」所言,Bit.dev 能用来创建结构设计体系,允许团队内的合作开发者和结构设计师一起协作,从头搭建一套结构设计体系。
Bit.dev 目前全力支持 [React]、Vue、Angular、Node 或其他 JavaScript 架构。
在 Bit.dev 上不仅能搜索组件,还能直接查看组件的依赖,浏览组件的标识符,甚至新浪网编辑标识符并查看预览效果!选好组件后能通过 Bit.dev 的命令行辅助工具 bit 在本地工程项目导入组件,也能通过 npm、yarn 导入组件。
”6. CanIUse
[CanIUse]是非常称心的新浪网辅助工具,能方便快捷地查看各大应用程序对某个特性的全力支持程度。
我过去经常碰到自己合作开发的应用的许多功能在其他浏览器下不全力支持的情况。比如我的作品集工程项目使用的某个特性在 Safari 下不全力支持,直到工程项目上线几个月后我才意识到。那些经验教训让我意识到须要检查应用程序兼容性。
我们来看两个例子吧。什么样应用程序全力支持 WebP 图像格式?
如你所见,Safari 和 IE 目前不全力支持 WebP。这意味着须要为不兼容的应用程序提供更多回退选项,比如:
<picture> <source srcset=“img/awesomeWebPImage.webp” type=“image/webp”> <source srcset=“img/creakyOldJPEG.jpg” type=“image/jpeg”> <img src=“img/creakyOldJPEG.jpg” alt=“Alt Text!”></picture>“CanIUse 还能在命令行下使用,例如,在命令行下查看 WebP 图像格式的应用程序兼容性:caniuse webp(运行命令前须要事先通过 npm install -g caniuse-cmd 安装命令行辅助工具。
”辅助工具链接
[1] https://link.zhihu.com/?target=https%3A//prettier.io/playground/
[2] https://link.zhihu.com/?target=https%3A//prettier.io/docs/en/precommit.html
[3] https://link.zhihu.com/?target=https%3A//docs.microsoft.com/en-us/visualstudio/online/overview/what-is-vsonline
觉得不错,请点个在看呀