在科技领域，有数千种工具可供人们使用。你怎么知道从哪里开始？
就像最近开始编码的人一样，这种倾盆大雨的信息太多了，无法筛选出来。 我发现自己安装了扩展，在我的开发周期中并没有真正帮助我，并且通常甚至阻碍了它。
我绝不是专家，但随着时间的推移，我编制了一份已证明对我非常有用的工具清单。 如果你刚刚开始学习编程，这将有望为你提供一些指导。 如果你是一位经验丰富的开发人员，希望你仍然可以学到新的东西。
我将把这篇文章分解成Chrome扩展和VS Code扩展。 我知道还有其他浏览器和其他文本编辑器，但我敢打赌大多数工具也可用于你选择的平台，所以我们不要就我们的个人偏好发起宗教般的争论。
随意跳转。
Chrome扩展
现在，我是一名自称为Web开发人员，实际上我常在Chrome控制台里。 下面是一些可以让我在那里花更少的时间的工具：
WhatFont - 名称说明了一切。 这是找出你最喜爱的网站正在使用的字体的简单方法，以便你可以借用它们来完成自己的项目。
Pesticide - 辅助查看<div>的结果并修改CSS。 当我学习盒子模型时，这简直是一个救星般的工具。
Colorzilla - 用于从网站复制精确的颜色。这会将颜色直接复制到剪贴板，因此你不用花费过多时间去获得正确的RGBA组合。
CSS Peeper - 用于查看网站上使用的颜色和资源。 一个很好的练习，特别是在开始时，会克隆出你认为看起来很酷的网站。 这使你可以查看他们的配色方案，以及页面的其他资源。
Wappalyzer - 用于查看网站上使用的技术。有没有想过网站正在使用什么样的框架或它托管的是什么服务？进去看吧。
React Dev Tools - 用于调试React应用程序。值得一提的是，这只在编写React应用程序时才有用。
Redux Dev Tools - 适用于使用Redux调试应用程序。 值得一提的是，这只有在您的应用程序中实施Redux时才有用。
JSON Formatter - 这是为了在浏览器中查看JSON更简洁。 你有没有在一个丑陋的JSON blob中，去找出你想要的信息是如何嵌套深度的？
Vimeo Repeat and Speed - 用于加速Vimeo视频。 如果你像大多数网络开发人员一样观看视频教程，你就会知道如何以1.25倍的常规播放速度使用它们。 也有YouTube版本。
VS Code扩展
Visual Studio Code是我选择的编辑器。
人们喜欢他们的文本编辑，我也不例外。但是，我敢打赌，这些扩展的大部分都适用于你正在使用的任何编辑器。来看一下我最喜欢的扩展程序：
Auto Rename Tag - 自动重命名配对的HTML标签。 你创建了一个<p>标签。 现在，你想要将其更改为其他内容，并将</ p>标记也更改为其他内容。 只需更换一个，另一个跟着改变。 从理论上讲，你的生产力提高了2倍。
HTML CSS Support - 对HTML文档的CSS支持。这对获取一些整齐的语法高亮和代码建议非常有用。
HTML Snippets - 有用的代码片段。这又是一个节省时间的利器。将它与Emmet配对，你几乎不用再输入实际的HTML。
Babel ES6/ES7 - 添加JavaScript Babel语法着色。如果你使用的是Babel，那么区分你的代码将更容易。如果你喜欢使用JavaScript的现代功能，这很好。
Bracket Pair Colorizer - 在方括号中添加颜色，让它可视化。对于那些没有准确地关闭括号或圆括号的常见错误，这非常方便。
ESLint - 将ESLint集成到Visual Studio代码中。 在编写代码时，这可以方便地获得有关错误的提示，根据你的配置，它可以帮助实施良好的编码风格。
Guides - 为代码添加额外的指南。 这是另一个视觉提示，以确保你正确关闭括号。 不得不说，我是一个非常重视可视化的人。
JavaScript Console Utils - 使控制台日志记录更简单。 如果你像大多数开发人员一样，你会发现自己在调试流程中登录到控制台（我知道我们应该使用调试器）。 此工具可以轻松创建有用的console.log()语句。
Code Spell Checker - 拼写检查程序。 错误的另一个常见来源是胖大拇指变量或函数名称。 这个拼写检查器将寻找不常见的单词，并且善于考虑我们用JavaScript写东西的方式。
Git Lens - 让我们很容易看到是什么时候以及由谁做的修改。
Path Intellisense - 文件路径自动补齐。 这对于从其他文件导入东西非常方便。 这也让你查看文件的树结构变得轻而易举。
Prettier - 自动格式化代码。 忘记你必须手动缩进代码并使其易于阅读的日子。Prettier 会比你自己做得更快，更好。 我是极力推荐它的。
VSCode-Icons - 将图标添加到文件树中。 如果看着你的文件结构伤害你的眼睛，这可能会有所帮助。 对于你使用的任何类型的文件，都有一个有用的图标，可以更轻松地区分你正在查看的内容。
总结
你可能拥有自己的一套工具，这些工具对于你的开发周期是不可或缺的。 希望上面提到的一些工具可以使你的工作流程更加高效。
不过，在学习使用已有的工具之前，不要陷入安装所有工具的陷阱，因为这可能会花太多的时间。
我鼓励你在下面的评论中留下你最喜欢的工具，这样我们都可以一起学习。