2022 用好这 8 个工具，提升前端工程师软技能

在 2021 年，你是否发现 JavaScript 的触角除了传统前后端，甚至成了很多 Serverless 架构中默认支持的语言。我作为一名 Web 工程师，在开发中发现我做的事情慢慢已经超越了前端本身，接触到越来越多非 JavaScript/HTML/CSS 领域的各种知识，在学习和提升中，我发掘到越来越多的乐趣，也获益匪浅。

这里面我总结了我在成长中接触的三个方面八个工具，可能对前端工程师有所帮助。

善用工具

1.1 Chrome DevTool - 前端工具必备

主页：https://developer.chrome.com/docs/devtools/

你可能永远不知道 Chrome DevTool 有这么多好用的功能：实时调试 usb 开发者模式的安卓手机；使用 3D 模式展示前端层级关系；可视化编辑 CSS 动画曲线；用本地文件替换部分请求……

建议在油管上订阅 What's new in DevTool，每个 Chrome 新版本发布后，都会有一个新影片介绍增加的新功能，让你的前端开发速度与质量大大提升。

1.2 Neovim/Vim - 沉浸式编码体验

主页：https://neovim.io/

这是我最常用的工具，我会用它写 TypeScript 或者 go。我个人非常主观地喜欢 Neovim 超过 Vim，因为它现在内置了 Language Server，能用 lua 写各种插件或者命令。虽然 Vim 有着很陡峭的学习曲线，但是在上手后，你可以甩开鼠标，快速专注于编码。

另外，通过 coc.nvim 自动补全插件，Vim 可以做到和 VSCode 一样的智能提示，快速跳转。对了，如果你是新手，建议你和我一样，把键盘的上下左右键扣掉——这样才能沉浸式体验 Vim 键位。

1.3 Visual Studio Code - 最受欢迎的编辑器

主页：https://code.visualstudio.com/

另外一个我非常喜欢用的代码编写工具是 Visual Studio Code，且我一直保持使用它的 insider 版本，每次新版本发布时，会关注发布日志，以便尝试使用它的最新功能。

我甚至开过脑洞，用 LiveShare 插件实现远程协助、免密共享本地 terminal（是的，你不需要内网穿透工具）；用 MySQL 插件替代数据库 GUI 工具查看数据。

快速原型/开发

2.1 Draw.io - 强大的原型设计工具

这是一个免费且强大的流程图、原型工具，你打开网页即可使用。另外它还提供本地版本，你可以离线使用它。

主页: https://draw.io

2.2 轻服务 - 快速的一站式开发平台

这是字节跳动推出面向开发者的云服务，你可以用 JavaScript 快速编写和部署你的前端项目或者 Serverless 后台，它内置了 Redis 和数据库等基础服务——你只要完成核心逻辑，不用关心如何连接和管理基础组件。

另外值得一提的是，轻服务的开发体验非常棒，在轻服务的数据库中，你甚至可以直接浏览和编辑数据库数据，直接查看图片。

主页：https://qingfuwu.cn/

3 信息获取

3.1 Hacker News - 知名的 IT 交流社区

可以了解业内前沿的技术，推荐通过 HN Search powered by Algolia 快速或者搜索热点内容。

3.2 qiita.com - 来自日本的『极速版 CSDN』

这是一个编程的日本社区，普遍的文章质量比 CSDN 好很多，且没有各种牛皮癣式的广告。我也不是完全能看懂所有外语，但是你只要捕捉代码中的关键词，就能大致看懂意思。另外，记得给你的 Chrome 装上 Google Translate 插件。

附赠一个搜索小技巧：可以把 Google 的搜索语言设置为：英文，日文，中文，俄语。这样能搜到更多有意义的结果（其中也会有很多 qiita 社区的文章）。

主页：https://qiita.com

3.3 RSS 订阅 - 跟踪更多的优秀内容

我是 Google Reader （ 现在只能怀念了）的老用户，现在我会用 Reeder 订阅和管理我的订阅源。很多知名的开发者都有自己的博客（而不是公众号），你可以通过 RSS 订阅他们的更新。