专栏首页Python空间整理了 6 个好用的程序员开发在线工具

整理了 6 个好用的程序员开发在线工具

网上可以找到前端开发社区贡献的大量工具,这篇文章列出了我最喜欢的一些工具,这些工具给我的工作带来了许多便利。

1. EnjoyCSS

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

EnjoyCSS 首页

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

2. Prettier Playground

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

Prettier Playground 分左右两栏,左边是原始代码,右边是格式化后的代码

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

3. Postman

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

Postman 界面

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 包。很棒,不是吗?

StackBlitz 首页

微软官方其实也提供了在线版本的 VSCode,可以在浏览器内使用 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.dev 的命令行工具 bit 在本地项目引入组件,也可以通过 npm、yarn 引入组件。

6. CanIUse

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

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

我们来看一个例子吧。哪些浏览器支持 WebP 图像格式?

通过 CanIUse 查看 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

安装命令行工具。

codecaniuse webp/code 的命令行输出结果

本文分享自微信公众号 - Python空间(Devtogether),作者:Python空间

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 有了这个神器,贴代码请大佬调试的时候再也不怕被骂这是什么鬼玩意儿啦!

    作为一个不知名的号主,承蒙大家不嫌弃,经常性的会有人非常客气的把一堆代码扔到我的脸上,这些代码千奇百怪,姿态各异,让我喜笑颜开...

    Rocky0429
  • Python 面试:“一行代码实现 xx”类题目(带答案)

    最近,我被 “一行代码实现 xx” 这类问题疯狂吸引,主要是作为一个能躺着绝不坐着的懒人,代码能少写坚决少写,而且这类问题也蛮有意思,所以汇总了一下,顺便把答案...

    Rocky0429
  • 如何写出让同事无法维护的代码?

    原文:http://mindprod.com/jgloss/unmain.html

    Rocky0429
  • 推荐|六个好用的前端开发在线工具

    网上可以找到前端开发社区贡献的大量工具,这篇文章列出了我最喜欢的一些工具,这些工具给我的工作带来了许多便利。

    ConardLi
  • 项目不知道如何做性能优化?不妨试一下代码分割

    最近我们在前端校招面试冲刺群里辅导简历的时候,经常有同学感叹不知道怎么优化项目,那不妨尝试下在项目中引入代码分割的方式提升性能。

    前端劝退师
  • 通过jackson注解让json按要求返回信息

    后端开发的接口在返回给前端数据的时候,有些敏感信息是不能返回的,需要我们的屏蔽掉,这里说一种方式,使用的是jackson-annotations包里的注解。

    用户1956326
  • 人工智能神秘UNU算法:预测莱昂纳多拿下本届奥斯卡

    ? 新浪科技讯 北京时间2月29日上午消息,奥斯卡奖就像扔骰子,但并不意味着完全不可预测。至少人工智能系统并不认可这一观点。人工智能公司Unanimous A...

    新智元
  • TCP和UDP的区别

    TCP TCP(Transmission Control Protocol,传输控制协议)是面向连接的协议,也就是说,在收发数据前,必须和对方建立可靠的连接。 ...

    武培轩
  • js原型及原型链解析

    首先,明确一点:js中的对象分为普通对象和函数对象,一般我们自定义的可以被new的函数称作函数对象,另外js内置了譬如:Array、Date、Object、Fu...

    用户1141560
  • 独家 | 基于TextRank算法的文本摘要(附Python代码)

    TextRank 算法是一种用于文本的基于图的排序算法,通过把文本分割成若干组成单元(句子),构建节点连接图,用句子之间的相似度作为边的权重,通过循环迭代计算句...

    数据派THU

扫码关注云+社区

领取腾讯云代金券