前端开发必备工具箱

作者：Tomas Pustelnik  

翻译：New Frontend 

前端开发是一个相当复杂的方向，至少就大项目而言，你很难仅用浏览器和编辑器完成工作。这里列出了我在开发过程中用到的工具。我希望这个列表能帮助其他人发现一些可以用在工作流程中的好工具。

必备工具

这些是我日常使用的工具，缺了它们我很难高效工作。

• VS Code —— 我选择的编辑器是微软出品的 VS Code。免费、轻量（和 WebStorm 之类的 IDE 相比），大量开箱即用的特性，丰富的扩展。https://code.visualstudio.com/

• 浏览器 —— 我的默认浏览器是 Firefox，有时切换到 Chrome 进行开发。我也安装了其他浏览器，以供测试之用。

• DevDocs —— 这个网页应用汇聚了各种项目的文档，还支持离线使用。当我需要查询文档时，一般会访问这个站点。我主要用它查询 JS 和 DOM/浏览器方面的文档。我真没找到什么能和它媲美的工具（详尽而易于搜索）。你应该看一看。https://devdocs.io/

• Google —— 没错，我经常上网搜索。关于某个 bug 的信息，如何做某件事（有时会是很基础的事情），软件包和软件库的示例代码和文档（如果 DevDocs 没收录），我都会上网搜一搜。https://google.com/

• MDN —— 对任何 web 开发者来说这都是非常棒的资源。这个站点的部分内容可以在之前提到的 DevDocs 上找到，不过有些页面只有 MDN 上有。我主要用它查询一些关于可访问性的内容，上面有不少讨论这一主题的文章。https://developer.mozilla.org/en-US

• StackOverflow —— 经常 google 到上面的内容。如果有问题，多半能在上面找到答案。https://stackoverflow.com/

• GitHub —— 某个软件包我有疑问，或者想知道关于它的更多信息，我会到它的 GitHub 仓库去翻 issue 和代码，通常能找到问题的答案，就像 StackOverflow。据我个人的经验，如果有关于某个特定软件包的问题，在 GitHub 上翻到相关 issue 的几率要高于在 StackOverflow 上找到相关问题（像 React 这类特别流行的库例外）。当然，我也使用 GitHub 的版本控制功能。https://github.com/

CSS

• CSS-Tricks —— 你能在上面找到大量有趣的文章和窍门。这个网站上也有一个指南（Guides）栏目，包含关于特定 HTML、CSS、JS 概念的深入讲解。我常常访问这个站点更新关于网格布局的知识。不过其他指南也非常棒。这个站点绝对值得一看。https://css-tricks.com/

• CSS Reference —— 如果需要更新 CSS 知识或者查下不熟悉、不常用的属性，我会访问这个站点。上面对每个 CSS 属性的讲解很深入，给出的示例也很清楚，便于你理解这些属性并应用于自己的项目。站点的作者是 Sara Soudain。https://tympanus.net/codrops/css_reference/

• Can I Use —— 如果你在意浏览器兼容性，希望负责任地使用前沿特性（渐进增强），那么这是不可或缺的工具。https://caniuse.com/

性能优化

• SVGOMG —— 从设计师那里收到一份为 web 优化的 SVG 文件，这种事情实在太罕见。所以我会用 SVGOMG 优化 SVG，效果十分惊人。这是 SVGO 的网页版，所以你也可以使用相应的命令行工具压缩 SVG。https://jakearchibald.github.io/svgomg/

• Shrinkme.app —— 使用这个网页应用优化图像文件十分快捷方便。开箱即用，支持批量上传，效果相当不错。https://shrinkme.app/

• Sqoosh —— 需要将图片压缩到极致，或者创建 webp 格式的图像文件的时候，我会使用这个网站。你可以用它提供的大量选项调出满意的效果。你也可以用它缩放图像或是转换图像格式。它用了很多前沿技术（当初 Google Chrome 团队做这个工具是为了演示现代浏览器的功能），所以你需要使用 Chrome 或基于 Chromium 的浏览器（Opera、Brave 等）。我上次试过，在 Firefox 下这个站点并不能正常工作。https://squoosh.app/

• Icomoon app —— 我需要创建定制图标集时会用这个工具。可以选择现有图标（免费图标和付费图标），也可以上传自己的图标。接着就可以生成相应的图标字体或 SVG 图标文件（今时今日，后者是一个更好的选择）。https://icomoon.io/app/#/select

• Google Fonts —— 需要创建定制 web 字体时，我会首先访问 Google Fonts。我通常会下载所需文件，然后自行托管，这样性能更好。Google Fonts 有一个很棒的特性，允许只编码需要用到的字符。https://fonts.google.com/

• Glyphhanger —— 减少文件大小是提升网站性能的最佳途径之一。Web 字体经常包含很多我们不需要的字形，所以我会用 Glyphhanger 子集化字体。你可以指定需要的 Unicode 区段和字符，Glyphanger 会创建一个只包含相应字符的字体文件。它也可以将 .ttf 文件转为其他更适合 web 的格式，比如 .woff 和 .woff2。需要花一点功夫正确使用这个工具，不过我觉得存在字体性能问题时，这是一个值得考虑的选项。https://github.com/filamentgroup/glyphhanger

• Lighthouse —— 我在发布网页前会进行测试，Chrome 浏览器的 Lighthouse 是最常用的工具之一。它会检查各方面的常见问题并给出评分，也会给出改进提示。这是一个非常好的工具，可以初步检查我在开发时是否遗漏了一些问题。https://meowni.ca/font-style-matcher

• Font style matcher —— 定制字体加载后会切换字体，如果你希望这个切换不容易察觉，那么可以使用这个字体风格匹配器找到和定制字体类似的默认字体。https://meowni.ca/font-style-matcher

可访问性

• VoiceOver —— macOS 的默认屏幕阅读器。需要花一点时间熟悉这个工具（我推荐这篇介绍文章 [1]），不过我努力在开发过程中时不时用下 VoiceOver。多亏这一点，我的项目中 aria 属性和面向屏幕阅读器的文本使用量大增。使用 VoiceOver 后你会惊讶地发现一些日常使用的网页组件为屏幕阅读器用户提供的上下文信息少得可怜。

• a11y guidelines —— 通常我会尽量去找可访问性良好的解决方案，不过有的时候还是不得不自己动手，这时我会参考这个页面。这篇可访问性指导原则详细解释了什么是可访问性，为什么可访问性很重要，如何实现。很多情况下，复制其中的示例代码略作调整后即可应用于实际项目。https://a11yproject.com/patterns

• WAI-ARIA specification —— 我并不经常阅读规范。如果我在读规范，那么往往是在读这一篇。其中包含大量关于如何使用 aria 角色和属性的有价值信息。要我说，任何严肃对待可访问性的开发者，都需要读下这篇规范。https://www.w3.org/TR/wai-aria-1.1

值得一提

最后列下个人觉得挺好用但又没那么常用的工具。

• Responsive breakpoints generator —— 手动创建响应式图像的多种变体很痛苦。用这个工具就很方便。https://responsivebreakpoints.com/

• HTML Arrows —— 各种符号的 Unicode 码、HTML 十六进制编码、HTML 实体编码、HTML 实体。https://www.toptal.com/designers/htmlarrows

• Char reference —— 类似上一个工具，但显示的信息更少，主要显示 HTML 实体。https://dev.w3.org/html5/html-author/charref

• Typography cheatsheet —— 讲解常用的字体排印规则和问题。https://www.typewolf.com/cheatsheet

• Modular scale —— 设计网页时我通常使用这个工具选择模块化的缩放方案。如有兴趣了解更多关于这个主题的内容，请参考 A List Appart 上的这篇文章 [2] 和 Tim Brown 在 Build Conf 2010 上的演讲 [3]。https://www.modularscale.com/

• CSS gradient generetor —— 创建渐变背景的在线工具。https://cssgradient.io/

• Smooth shadow generator —— 为网站添加美观的阴影。https://brumm.af/shadows

• Bezier curve generator —— 定制 CSS 的立方贝塞尔曲线定时函数。https://cubic-bezier.com/

• Easing functions —— 各种缓动函数，可用于 CSS 动画和变换。https://easings.net/en

• ngrok —— 需要向别人展示作品或者测试不同设备上的效果时，我会使用 ngrok。ngrok 可以将本地运行的服务暴露到公网上。不过有的时候配合 Browserstack 的 localhost 扩展时不能工作。https://ngrok.com/

• sharing buttons —— 如果你只需要一个简单的分享按钮，不想用 JS，不想折腾追踪用户的复杂逻辑，那么这个工具特别好用。https://sharingbuttons.io/

• Unix timestamp converter —— unix 时间戳转换器。https://dencode.com/en/date

• CSS to JS converter —— 可以将 CSS 转成 JS，也可以将 JS 转回 CSS。基于 CSS-in-JS 库开发时这个工具十分方便。https://css2js.dotenv.dev/

• Browser default styles —— 常见浏览器的默认样式。https://browserdefaultstyles.com/

结语

以上就是我在工作中使用的提高效率的工具，希望能帮你发现一些有用的工具。欢迎在 Twitter [4] 上向我反馈，包括推荐其他好用的工具。

文中标注内容链接：

 [1] 这篇介绍文章：https://url.leanapp.cn/48lfyqa

[2] A List Appart 上的这篇文章：https://alistapart.com/article/more-meaningful-typography/

[3] Tim Brown 在 Build Conf 2010 上的演讲：https://vimeo.com/17079380

[4] Twitter：https://twitter.com/pustelto

end

LeanCloud，领先的 BaaS 提供商，为移动开发提供强有力的后端支持。更多内容请关注「LeanCloud 通讯」