前端工程师 2022 年必备的 7 个工具

过去几年间，随着 Web 应用新世代的成长，app 应用内容越来越丰富，与之一起提升的还有前端整体的复杂度。提到前端工具，也许你会迅速想到各种市面上常见的开发工具、调试工具，但本次我们征集了数位资深前端工程师的意见整理了如下几个你可能没用过，但用了肯定会说好的工具：

开发工具推荐：webstorm

下载地址: https://www.jetbrains.com/webstorm/download/#section=mac

简介：工欲善其事，必先利其器。一款得心应手的开发工具是每一个前端工程师所必备的，无论是简单的页面还是复杂的工程，它都能 handle！丰富的插件资源、简单的版本管理、强大的调试功能，尽在 webstorm。

tip： 通过 webstorm 设置自定义模板，新建文件时可自动填充，完全无需编写重复的代码。

云服务推荐：轻服务

使用地址： qingfuwu.cn

简介：想写几个接口，但又不想大动干戈部署服务，2022 年最简单、易懂的云服务：轻服务等你来使用，开箱即可用，专注业务逻辑，在线开发、调试、上线，你想不到的快。

tip: 现在注册能有十块钱的免费额度，QPS 较低的话完全相当于免费使用各种资源。

Markdown 编辑器推荐： Typora

下载地址： https://typora.io/

简介：2022 年，还在为记不住 Markdown 语法而手忙脚乱吗？赶紧用 Typora，Win、Mac、Linux 都能用，自动匹配 Markdown 标记，即时预览、轻松插图、快速导出为 pdf、LaTex、html，你想要的它都有。

tip: Typora 结合有道云笔记，可实现多设备共享 Markdown 文件。

css 博客推荐： css tricks

使用地址：https://css-tricks.com/

简介：还在为设计稿头疼吗，赶紧看看 css tricks，可能那些强人所难的效果只需要几行 css 代码就能解决了。

开源动画库推荐： Lottie

官网地址： https://lottiefiles.com/

简介：Airbnb 开源的面向 iOS、android、Web 的动画库，不仅能让原生 app 像使用静态素材一样使用 AE 或 figma 导出的动画，还能手动控制进度、绑定事件。

代码高亮 Chrome 插件推荐： iFormatTool

添加地址：https://chrome.google.com/webstore/search/iFormatTool

简介： 在你打开类型或后缀为 css、js、json 的网址时，这款插件会自动将页面中的代码进行高亮显示，并且还会根据不同的代码类型提供不同的操作按钮。网页上的代码终于“剪的断，理不乱”了。

响应式设计预览 Chrome 插件推荐： window resizer

添加地址：https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh

简介：响应式布局的网站已是当今主流，有了 window resizer 就不必担心哪些设备还没测试了，有了它你还可以随意输入想要的尺寸进行调整、模拟不同分辨率。