我希望在开始编码时就已经知道的工具 (Tools I wish I had known about when I started coding)

In the tech world, there are thousands of tools that people will tell you to use. How are you supposed to know where to start?

在技术世界中，有成千上万的工具会让人告诉您使用。您应该如何知道从哪里开始？

As somebody who started coding relatively recently, this downpour of information was too much to sift through. I found myself installing extensions that did not really help me in my development cycle, and often even got in the way of it.

作为最近才开始编码的人，信息的泛滥太多了以至于无法筛选。我发现自己安装的扩展在开发周期中并没有真正帮助我，甚至经常妨碍了我。

I am by no means an expert, but over time I have compiled a list of tools that have proven extremely useful to me. If you are just starting to learn how to program, this will hopefully offer you some guidance. If you are a seasoned developer, hopefully you will still learn something new.

我绝不是专家，但是随着时间的推移，我整理了一系列对我非常有用的工具。如果您刚刚开始学习如何编程，那么有望为您提供一些指导。如果您是一位经验丰富的开发人员，希望您仍然可以学习一些新知识。

I am going to break this article up into Chrome Extensions and VS Code extensions. I know there are other browsers and other text editors, but I am willing to bet most of the tools are also available for your platform of choice, so let’s not start a religious argument over our personal preferences.

我将把这篇文章分为Chrome扩展和VS Code扩展。我知道还有其他浏览器和其他文本编辑器，但是我敢打赌，大多数工具也可用于您选择的平台，因此，请不要就我们的个人喜好开诚布公地争论。

Feel free to jump around.

随时跳来跳去。

Chrome扩展程序 (Chrome Extensions)

Now that I am a self-proclaimed web developer, I practically live in my Chrome console. Below are some tools that allow me to spend less time there:

现在，我是一个自称为Web开发人员，现在我几乎生活在Chrome控制台中。以下是一些工具，这些工具可以让我减少在这里的时间：

WhatFont — The name says it all. This is an easy way of finding out the fonts that your favorite website is using, so that you can borrow them for your own projects.
WhatFont —名称说明了一切。这是一种找出您喜欢的网站所使用的字体的简便方法，以便您可以为自己的项目借用它们。
Pesticide — Useful for seeing the outlines of your <div>s and modifying CSS. This was a lifesaver when I was trying to learn my way around the box-model.
农药 -有助于查看<d iv>的轮廓和修改CSS。当我尝试学习盒式模型时，这是一个救命稻草。
Colorzilla — Useful for copying exact colors off of a website. This copies a color straight to your clipboard so you don’t spend forever trying to get the right RGBA combination.
Colorzilla-用于复制网站上的确切颜色。这样可以直接将颜色复制到剪贴板，这样您就不会花很多时间尝试获得正确的RGBA组合。
CSS Peeper — Useful for looking at colors and assets used on a website. A good exercise, especially when starting out, is cloning out websites that you think look cool. This gives you a peek under the hood at their color scheme and allows you to see what other assets exist on their page.
CSS Peeper-用于查看网站上使用的颜色和资产。一项不错的练习，尤其是在入门时，最好是克隆出您认为很酷的网站。这使您可以窥探其配色方案，并可以查看其页面上还有哪些其他资产。
Wappalyzer — Useful for seeing the technologies being used on a website. Ever wonder what kind of framework a website is using or what service it is hosted on? Look no further.
Wappalyzer —对查看网站上正在使用的技术很有用。有没有想过网站使用哪种框架或托管哪种服务？别再看了。
React Dev Tools — Useful for debugging your React applications. It bears mentioning that this is only useful if you are programming a React application.
React Dev Tools-对调试React应用程序很有用。值得一提的是，这仅在您编写React应用程序时才有用。
Redux Dev Tools — Useful for debugging applications using Redux. It bears mentioning that this is only useful if you are implementing Redux in your application.
Redux Dev Tools-对于使用Redux调试应用程序很有用。值得一提的是，这仅在您在应用程序中实现Redux时有用。
JSON Formatter — Useful for making JSON look cleaner in the browser. Have you ever stared an ugly JSON blob in the face, trying to figure out how deeply nested the information you want is? Well this makes it so that it only takes 2 hours instead of 3.
JSON格式化程序 —用于使JSON在浏览器中看起来更干净。您是否曾经在脸上盯着一个丑陋的JSON Blob，试图弄清楚所需信息的嵌套深度？好吧，这使得它只需要2个小时而不是3个小时。
Vimeo Repeat and Speed — Useful for speeding up Vimeo videos. If you watch video tutorials like most web developers, you know how handy it is to consume them at 1.25 times the regular playback speed. There are also versions for YouTube.
Vimeo重复和速度 -用于加快Vimeo视频的速度。如果您像大多数Web开发人员一样观看视频教程，就会知道以1.25倍常规播放速度消费它们是多么方便。还有YouTube版本。

VS代码扩展 (VS Code Extensions)

Visual Studio Code is my editor of choice.

Visual Studio Code是我选择的编辑器。

People love their text editors, and I am no exception. However, I’m willing to bet most of these extensions work for whatever editor you are using as well. Check out my favorite extensions:

人们喜欢他们的文本编辑器，我也不例外。但是，我敢打赌，这些扩展中的大多数都可以在您使用的任何编辑器上使用。查看我最喜欢的扩展程序：

Auto Rename Tag — Auto rename paired HTML tags. You created a <p> tag. Now you want to change it, as well as its enclosing </p> tag to something else. Simply change one and the other will follow. Theoretically improves your productivity by a factor of 2.
自动重命名标签 -自动重命名配对HTML标签。您创建了一个< p>标记。现在，您想要将其及其osin </ p>标记更改为其他名称。只需更改一个，另一个将随之而来。从理论上讲，您的生产率提高了2倍。
HTML CSS Support — CSS support for HTML documents. This is useful for getting some neat syntax highlighting and code suggestions so that CSS only makes you want to quit coding a couple of times a day.
HTML CSS支持 -HTML文档CSS支持。这对于获得一些简洁的语法突出显示和代码建议很有用，这样CSS只会使您每天只想退出几次编码。
HTML Snippets — Useful code snippets. Another nice time saver. Pair this with Emmet and you barely ever have to type real HTML again.
HTML代码段 —有用的代码段。另一个节省时间的好方法。将其与Emmet配对，您几乎无需再次键入真实HTML。
Babel ES6/ES7 — Adds JavaScript Babel syntax coloring. If you are using Babel, this will make it much easier to differentiate what is going on in your code. This is neat if you like to play with modern features of JavaScript.
Babel ES6 / ES7-添加JavaScript Babel语法颜色。如果您使用的是Babel，这将使区分代码中发生的事情变得更加容易。如果您喜欢玩JavaScript的现代功能，那就太好了。
Bracket Pair Colorizer — Adds colors to brackets for easier block visualization. This is handy for those all-too-common bugs where you didn’t close your brackets or parentheses accurately.
括号对着色器 —将颜色添加到括号中，以便于块可视化。对于那些您没有正确关闭方括号或括号的常见错误，这很方便。
ESLint — Integrates ESLint into Visual Studio Code. This is handy for getting hints about bugs as you are writing your code and, depending on your configuration, it can help enforce good coding style.
ESLint —将ESLint集成到Visual Studio Code中。这对于在编写代码时获得有关错误的提示非常方便，并且根据您的配置，它可以帮助强制执行良好的编码样式。
Guides — Adds extra guide lines to code. This is another visual cue to make sure that you are closing your brackets correctly. If you can’t tell, I’m a very visual person.
指南 -在代码中添加额外的指南。这是另一个视觉提示，可确保您正确关闭了括号。如果你说不清，我是一个非常有远见的人。
JavaScript Console Utils — Makes for easier console logging. If you are like most developers, you will find yourself logging to the console in your debugging flow (I know that we are supposed to use the debugger). This utility makes it easy to create useful console.log() statements.
JavaScript控制台实用程序 -使控制台记录更加容易。如果您像大多数开发人员一样，会发现自己在调试流程中登录到控制台(我知道我们应该使用调试器)。使用此实用程序可以轻松创建有用的console.log()语句。
Code Spell Checker — Spelling checker that accounts for camelCase. Another common source of bugs is fat-thumbing a variable or function name. This spell checker will look for uncommon words and is good about accounting for the way we write things in JavaScript.
Code Spell Checker ( 代码拼写检查器) —占驼峰大小写的拼写检查器。错误的另一个常见来源是胖用变量或函数名。该拼写检查器将查找不常见的单词，并且很好地说明了我们用JavaScript编写事物的方式。
Git Lens — Makes it easier to see when, and by whom, changes were made. This is nice for blaming the appropriate person when code gets broken, since it is absolutely never your fault.
Git Lens-使您更容易查看何时以及由谁进行更改。这很容易在代码损坏时责怪适当的人，因为这绝对不是您的错。
Path Intellisense — File path autocompletion. This is super handy for importing things from other files. It makes navigating your file tree a breeze.
路径智能感知 -文件路径自动完成。这对于从其他文件导入内容非常方便。它使导航文件树变得轻而易举。
Prettier — Automatic code formatter. Forget about the days where you had to manually indent your code and make things human-legible. Prettier will do this for you much faster, and better, than you ever could on your own. I can’t recommend this one enough.
更漂亮 —自动代码格式化程序。忘记了必须手动缩进代码并使代码清晰易懂的日子。与以往相比，Prettier将为您提供更快，更好的解决方案。我不能推荐这一点。
VSCode-Icons — Adds icons to the file tree. If looking at your file structure hurts your eyes, this might help. There is a helpful icon for just about any kind of file you are making which will make it easier to distinguish what you are looking at.
VSCode图标 -将图标添加到文件树。如果查看文件结构使您的眼睛受伤，则可能会有所帮助。对于您正在制作的任何类型的文件，都有一个有用的图标，这将使您更容易区分正在查看的内容。

结论 (In Conclusion)

You likely have your own set of tools that are indispensable to your development cycle. Hopefully some of the tools I mentioned above can make your workflow more efficient.

您可能拥有自己的一组开发周期必不可少的工具。希望上面提到的某些工具可以使您的工作流程更高效。

Do not fall into the trap, however, of installing every tool you run across before learning to use the ones you already have, as this can be a huge time-sink.

但是，在学习使用已有工具之前，请不要陷入安装所有遇到的工具的陷阱，因为这可能会浪费大量时间。

I encourage you to leave your favorite tools in the comments below here, so that we can all learn together.

我鼓励您在下面的评论中留下您喜欢的工具，以便我们大家一起学习。

If you liked this article please give it some claps and check out other articles I’ve written here, here, here, and here. Also, give me a follow on Twitter.

如果您喜欢这篇文章，请给它一些鼓掌并看看我在这里，这里，这里和这里写的其他文章。另外，请在Twitter上关注我。