前端开发必备工具箱

更新日期: 2020-05-08阅读: 1.9k标签: 工具
Tomas Pustelnik 原作, New Frontend 翻译。

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


必备工具

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

  • VS Code —— 我选择的编辑器是微软出品的 VS Code。免费、轻量(和 WebStorm 之类的 IDE 相比),大量开箱即用的特性,丰富的扩展。
  • 浏览器 —— 我的默认浏览器是 Firefox,有时切换到 Chrome 进行开发。我也安装了其他浏览器,以供测试之用。
  • DevDocs —— 这个网页应用汇聚了各种项目的文档,还支持离线使用。当我需要查询文档时,一般会访问这个站点。我主要用它查询 JS 和 dom/浏览器方面的文档。我真没找到什么能和它媲美的工具(详尽而易于搜索)。你应该看一看。
  • Google —— 没错,我经常上网搜索。关于某个 bug 的信息,如何做某件事(有时会是很基础的事情),软件包和软件库的示例代码和文档(如果 DevDocs 没收录),我都会上网搜一搜。
  • MDN —— 对任何 web 开发者来说这都是非常棒的资源。这个站点的部分内容可以在之前提到的 DevDocs 上找到,不过有些页面只有 MDN 上有。我主要用它查询一些关于可访问性的内容,上面有不少讨论这一主题的文章
  • StackOverflow —— 经常 google 到上面的内容。如果有问题,多半能在上面找到答案。
  • GitHub —— 某个软件包我有疑问,或者想知道关于它的更多信息,我会到它的 GitHub 仓库去翻 issue 和代码,通常能找到问题的答案,就像 StackOverflow。据我个人的经验,如果有关于某个特定软件包的问题,在 GitHub 上翻到相关 issue 的几率要高于在 StackOverflow 上找到相关问题(像 react 这类特别流行的库例外)。当然,我也使用 GitHub 的版本控制功能。


css

  • CSS-Tricks —— 你能在上面找到大量有趣的文章和窍门。这个网站上也有一个指南(Guides)栏目,包含关于特定 html、CSS、JS 概念的深入讲解。我常常访问这个站点更新关于网格布局的知识。不过其他指南也非常棒。这个站点绝对值得一看。
  • CSS Reference —— 如果需要更新 CSS 知识或者查下不熟悉、不常用的属性,我会访问这个站点。上面对每个 CSS 属性的讲解很深入,给出的示例也很清楚,便于你理解这些属性并应用于自己的项目。站点的作者是 Sara Soudain
  • Can I Use —— 如果你在意浏览器兼容性,希望负责任地使用前沿特性(渐进增强),那么这是不可或缺的工具。


性能优化

  • SVGOMG —— 从设计师那里收到一份为 web 优化的 SVG 文件,这种事情实在太罕见。所以我会用 SVGOMG 优化 SVG,效果十分惊人。这是 SVGO 的网页版,所以你也可以使用相应的命令行工具压缩 SVG。
  • Shrinkme.app —— 使用这个网页应用优化图像文件十分快捷方便。开箱即用,支持批量上传,效果相当不错。
  • Sqoosh —— 需要将图片压缩到极致,或者创建 webp 格式的图像文件的时候,我会使用这个网站。你可以用它提供的大量选项调出满意的效果。你也可以用它缩放图像或是转换图像格式。它用了很多前沿技术(当初 Google Chrome 团队做这个工具是为了演示现代浏览器的功能),所以你需要使用 Chrome 或基于 Chromium 的浏览器(Opera、Brave 等)。我上次试过,在 Firefox 下这个站点并不能正常工作。
  • Icomoon app —— 我需要创建定制图标集时会用这个工具。可以选择现有图标(免费图标和付费图标),也可以上传自己的图标。接着就可以生成相应的图标字体或 SVG 图标文件(今时今日,后者是一个更好的选择)。
  • Google Fonts —— 需要创建定制 web 字体时,我会首先访问 Google Fonts。我通常会下载所需文件,然后自行托管,这样性能更好。Google Fonts 有一个很棒的特性,允许只编码需要用到的字符。
  • Glyphhanger —— 减少文件大小是提升网站性能的最佳途径之一。Web 字体经常包含很多我们不需要的字形,所以我会用 Glyphhanger 子集化字体。你可以指定需要的 Unicode 区段和字符,Glyphanger 会创建一个只包含相应字符的字体文件。它也可以将 .ttf 文件转为其他更适合 web 的格式,比如 .woff 和 .woff2。需要花一点功夫正确使用这个工具,不过我觉得存在字体性能问题时,这是一个值得考虑的选项。
  • Lighthouse —— 我在发布网页前会进行测试,Chrome 浏览器的 Lighthouse 是最常用的工具之一。它会检查各方面的常见问题并给出评分,也会给出改进提示。这是一个非常好的工具,可以初步检查我在开发时是否遗漏了一些问题。
  • Font style matcher —— 定制字体加载后会切换字体,如果你希望这个切换不容易察觉,那么可以使用这个字体风格匹配器找到和定制字体类似的默认字体。


可访问性

  • VoiceOver —— macOS 的默认屏幕阅读器。需要花一点时间熟悉这个工具(我推荐这篇介绍文章),不过我努力在开发过程中时不时用下 VoiceOver。多亏这一点,我的项目中 aria 属性和面向屏幕阅读器的文本使用量大增。使用 VoiceOver 后你会惊讶地发现一些日常使用的网页组件为屏幕阅读器用户提供的上下文信息少得可怜。
  • a11y guidelines —— 通常我会尽量去找可访问性良好的解决方案,不过有的时候还是不得不自己动手,这时我会参考这个页面。这篇可访问性指导原则详细解释了什么是可访问性,为什么可访问性很重要,如何实现。很多情况下,复制其中的示例代码略作调整后即可应用于实际项目。
  • WAI-ARIA specification —— 我并不经常阅读规范。如果我在读规范,那么往往是在读这一篇。其中包含大量关于如何使用 aria 角色和属性的有价值信息。要我说,任何严肃对待可访问性的开发者,都需要读下这篇规范。


值得一提

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


结语

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


链接: https://www.fly63.com/article/detial/9264

常用的前端开发者的工具、库和资源

这篇文章简单的分享一套我认为有助于提升开发者工作流的工具集。这套工具集中的大部分你可能见过,也可能没见过,如果有哪个/些让你眼前一亮,那么我的分享就很值了。这个列表包含许多种类的资源,所以这里我将它们分组整理。

web前端程序员代码编辑器推荐

今天给大家分享前端程序员最爱用的代码编辑器,来看看你用哪款?包括:Visual Studio Code、Atom、HBuilder、Sublime Text、Dreamweaver、Brackets、Notepad++

JavaScript常用工具方法封装

Js常用工具方法封装:type 类型判断、Date、Array、String 字符串操作、Number、Http、DOM、Other 其它操作

Node.js 命令行工具的编写

日常开发中,编写 Node.js 命令行工具来完成一些小任务是很常见的操作。其编写也不难,和日常编写 Node.js 代码并无二致。package.json 中的 bin 字段

一百行js代码实现一个校验工具

做过校验需求的小伙伴们都知道,校验其实是个麻烦事。规则多,需要校验的字段多,都给我们前端带来巨大的工作量。一个不小心,代码里就出现了不少if else等不可维护的代码。因此,我觉得一个团队或者是一个项目

Licia 支持小程序的 JS 工具库

Licia 是一套在开发中实践积累起来的实用 JavaScript 工具库。该库目前拥有超过 300 个模块,同时支持浏览器、node 及小程序运行环境,提供了包括日期格式化、md5、颜色转换等实用模块,可以极大地提高开发效率。

程序员常用命令行工具

WordGrinder它是一款使用起来很简单,但拥有足够的编写和发布功能的文字编辑器。Proselint:它是一款全能的实时检查工具。GNU Aspell:

Web前端开发工程师常用的工具!

工欲善其身必先利器,作为前端行业的你,如果知道一些好用的软件工具可以帮助他们更好的工作。下面,就给大家分享Web前端开发工程师常用的工具。

用100行代码,完成自己的前端构建工具!

ES2017+,你不再需要纠结于复杂的构建工具技术选型。也不再需要gulp,grunt,yeoman,metalsmith,fis3。以上的这些构建工具,可以脑海中永远划掉。100行代码,你将透视构建工具的本质。

欺骗技术13款开源工具分享

一旦被那些受利益驱使或有政府背景的黑客团伙盯上,在这场不太公平的攻防博弈中,你会明显感到力不从心。他们有充足的时间,有娴熟的技术和丰富的资源,而且只要在无数次的尝试中成功一次就可以大获全胜

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!