作为高级前端工程师，我每天使用的所有东西

VSCode

Git Bash 终端

屏幕转GIF

Todoist

概念

Figma

结论

那么，你的工具是什么呢？欢迎留言分享！

VSCode

我使用这些扩展：

公用事业

• 自动关闭标签：自动添加 HTML/XML 关闭标签，与 Visual Studio IDE 或 Sublime Text 相同
• 自动重命名标签：自动重命名配对的 HTML/XML 标签
• 更好的注释：通过使用警报、信息、TODO 等注释来改进您的代码注释！
• 更好的 TOML：更好的 TOML 语言支持
• 括号对着色器：用于对匹配括号进行着色的可定制扩展
• DotENV：支持 dotenv 文件语法
• ESLint：将 ESLint JavaScript 集成到 VS Code 中。
• Firebase：Firestore 安全规则语法高亮
• GitLens：增强 Visual Studio Code 内置的 Git 功能 - 通过 Git blame 注释和代码镜头一目了然地查看代码作者，无缝导航和探索 Git 存储库，通过强大的比较命令获得有价值的见解等等
• Gremlins Tracker：揭示一些可能造成伤害的角色，因为它们是隐形的，或者看起来像合法角色。灵感来自 Sublime Gremlins。
• 导入成本：在编辑器中显示导入/需要的包大小
• HTML 中 CSS 类名的智能感知：根据工作区中的定义完成 HTML 类属性的 CSS 类名。
• Jest：愉快地使用 Facebook 的 Jest。
• Jest Test Explorer：在 Visual Studio Code 的侧边栏中运行 Jest 测试
• Markdown Preview Enhanced：Markdown Preview Enhanced 移植到 vscode
• markdownlint：Visual Studio Code 的 Markdown linting 和样式检查
• 材料设计图标智能感知
• npm 智能感知
• 路径智能感知
• Prettier
• 项目经理：轻松在项目之间切换
• Rainbow CSV：突出显示 CSV 和 TSV 文件，运行类似 SQL 的查询
• 随机一切：生成随机整数、浮点数、字符串、单词等。
• SCSS Intellisense：SCSS 的高级自动完成和重构支持
• Todo Tree：在树视图中显示 TODO、FIXME 等注释标签
• TS QuickFixes：TypeScript 的快速修复
• TS

外观和感觉

• Fluent Icons：适用于 Visual Studio Code 的 Fluent 产品图标
• GlassIt-VSC：VS Code 扩展，用于在 Windows 和 Linux 平台上将窗口设置为透明。
• Peacock：巧妙地改变工作区的颜色。当您拥有多个 VS Code 实例，并且想要快速识别时，这是理想的选择。
• Yi 深色主题和 Yi 浅色主题

Git Bash 终端

我用它来在文件夹和文件之间进行 CRUD 操作。在 VS Code 中打开项目，在项目中管理 Git，使用 VIM 等等。

我建议您为输入的最常用命令设置一些别名。

例如，我可以使用别名快速移动到如下文件夹：

alias cdhp="cd h:/projects"

或者运行 npm 命令：

alias nr="npm run"

屏幕转GIF

我是一名前端开发人员，所以我的大部分工作都可以截屏或录屏（这个词是我编的），这在远程工作时非常有用。我使用 Screen to GIF 快速创建部分 UI 的 GIF 动图，以展示其运行或工作方式。这个工具对于与不同团队进行更好的异步沟通非常有帮助。

Todoist

虽然我在工作中使用 Azure，但我还是喜欢保留个人待办事项列表来追踪我正在处理的任务。我订阅了 Todoist，价格合理，可以把所有事情都集中到一个地方。还有其他免费的替代方案，比如 trello、Notion 等等。

概念

我只用 Notion 来记录文档和做笔记。我觉得它很慢，但我还没找到其他我喜欢的替代品。

Figma

虽然我通常不参与设计流程，但 Figma 在创建文档图形方面确实非常有用。我以前做过自由职业 UI 设计，所以对这个工具相当熟悉。我建议所有从事前端开发的人都应该熟悉一下 Figma。

结论

这些都是我日常使用的工具。只有有了它们，我才能100%地完成工作。我认为工具越多，工作就越复杂，所以我尽量保持简单。我建议你不要同时拥有太多工具，并且要为每个工具设定一个明确的目标。

我可以在 Notion 中跟踪任务，但我更喜欢仅使用 Notion 进行文档记录，这样就不会太混乱。

那么，你的工具是什么呢？欢迎留言分享！

在Twitter上关注我以了解更多信息。