13个有用的javascript开发人员工具，用于编写高质量的代码

Today I’m going to show you 13 well-know and popular tools to write better and cleaner JavaScript code.

今天，我将向您展示13种知名且流行的工具，以编写更好，更简洁JavaScript代码。

These are tools that I’m using right now on my JavaScript developer journey.

这些是我现在在JavaScript开发人员旅程中使用的工具。

So if you want to improve the quality of your projects, this list is for you.

因此，如果您想提高项目质量，则此列表适合您。

1. npm (1. npm)

NPM is a package manager for Nodejs with hundreds of thousands of packages, and you can use it for front-end development too.

NPM是Nodejs的软件包管理器，具有成千上万个软件包，您也可以将其用于前端开发。

The main purpose of using NPM is automating dependency and package management. If you use a library by importing it directly without using NPM, you will do it every time you want to update the library. It’s a heavy time-consuming as your project grows. Instead of spending time on invaluable tasks, install NPM once and it will take care of all of them for you.

使用NPM的主要目的是使依赖关系和程序包管理自动化。 如果您通过不使用NPM的方式直接导入库来使用库，则每次更新库时都将这样做。 随着项目的发展，这是很费时间的。 不用花时间在无价的任务上，只需安装一次NPM，它将为您解决所有这些问题。

2. JSFiddle (2. JSFiddle)

When I come up with a new idea for my projects, I’ll test it out on JSFiddle to see how everything goes. For a quick test before adding things to the real project, JSFiddle is the perfect solution.

当我为我的项目提出一个新想法时，我将在JSFiddle上对其进行测试，以查看一切如何进行。 对于在添加到真实项目之前的快速测试，JSFiddle是完美的解决方案。

More JavaScript online editors:

更多JavaScript在线编辑器：

3. Chrome DevTools (3. Chrome DevTools)

I don’t need to talk much about this tool. With its help, you can inspect almost everything of your project so that you can debug and know what’s wrong on a certain page.

我不需要过多地谈论这个工具。 借助它的帮助，您可以检查项目的几乎所有内容，以便可以调试并了解特定页面上的问题。

More about Chrome DevTools:

有关Chrome DevTools的更多信息：

4.自动前缀 (4. Autoprefixer)

Autoprefixer is a CSS post-processor. It parses CSS files and adds vendor prefixes to CSS rules using caniuse.com database. You don’t have to write any vendor prefixes while writing CSS code. Autoprefixer will take care of everything for you.

Autoprefixer是CSS后处理器。 它使用caniuse.com数据库解析CSS文件，并将供应商前缀添加到CSS规则。 在编写CSS代码时，您不必写任何供应商前缀。 Autoprefixer将为您处理一切。

All you have to do is just write regular CSS code like:

您所要做的只是编写常规CSS代码，例如：

.my-box {
  box-sizing: border-box;
}

And let Autoprefixer does its job:

并让Autoprefixer发挥作用：

.my-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Don’t want to do the dirty work? Add Autoprefixer to your list.

不想做肮脏的工作吗？ 将自动前缀添加到您的列表。

5. Docco (5. Docco)

I can’t stress enough that every project must have a document, which we sometimes skip.

我不能强调每个项目都必须有一个文档，有时我们会跳过它。

With that in mind, and to ease the process of creating documents, Docco is here for you. It’s a quick and dirty documentation generator that takes your source code and create annotated documentation.

考虑到这一点，并且为了简化创建文档的过程， Docco在这里为您服务。 这是一个快速而肮脏的文档生成器，它可以获取您的源代码并创建带注释的文档。

If you have something you want to create documentation for, all you do is to write descriptive comments, and Docco will generate a clean layout for them.

如果您有想要为其创建文档的内容，那么您所要做的就是编写描述性注释，然后Docco会为其生成干净的布局。

Want a result of using Docco? Check this page.

想要使用Docco的结果吗？ 检查此页面。

6.通天塔 (6. Babel)

Babel is a JavaScript compiler. It’s used to convert ES6 code into a compatible JS version for different environments.

Babel是JavaScript编译器。 它用于将ES6代码转换为适用于不同环境的兼容JS版本。

Not everything supports ES6. If you’re using a modern syntax like React, you will need Babel in your hand.

并非所有人都支持ES6。 如果您正在使用像React这样的现代语法，那么您将需要Babel。

We hope that all browsers will support ES6 one day. But for now, to make sure everything works perfectly, Babel can’t be missed in your project.

我们希望所有浏览器一天都将支持ES6。 但是就目前而言，要确保一切正常，Babel不可错过您的项目。

7. Visual Studio代码 (7. Visual Studio Code)

VS Code is the best code editor I’ve ever used. According to the Stackoverflow 2019 Developer survey, it’s the most popular editor of all with 50.7% of respondents using it.

VS Code是我用过的最好的代码编辑器。 根据Stackoverflow 2019开发人员调查，它是最受欢迎的编辑器，有50.7％的受访者使用它。

Besides, VS Code comes with a lot of great plugins making your development easier.

此外，VS Code附带了许多出色的插件，使您的开发更加轻松。

8.密码战 (8. Codewars)

Aspiring developers practice regularly. There are no other ways around it.

有抱负的开发人员定期练习。 周围没有其他方法。

One of the best places to practice your JavaScript skills (and other programming languages) is Codewars. It’s a website where provides programming challenges called Kata to sharpen your skills.

练习JavaScript技能(和其他编程语言)的最佳场所之一是Codewars 。 该网站提供称为Kata的编程挑战，以提高您的技能。

So it’s time to make no excuse and try some Katas.

因此，是时候不要找任何借口尝试一些Katas了。

9.咕unt (9. Grunt)

Grunt is a JavaScript task runner built on top of NodeJS. So why should you use Grunt?

Grunt是一个基于NodeJSJavaScript任务运行程序。 那么，为什么要使用Grunt？

If you’re anything like me, you don’t like repetitive tasks. They’re boring and less productive. So, leave it to something like Grunt, the tool will help you automate repetitive tasks with minimum effort which gives you more time to focus on things really matter.

如果您像我一样，就不喜欢重复的任务。 他们很无聊，生产力低下。 因此，将其留给Grunt之类的东西，该工具将帮助您以最小的努力自动执行重复性任务，从而使您有更多时间专注于真正重要的事情。

Once you get your Gruntfile.js done for the project, your life would be much easier.

一旦为项目完成了Gruntfile.js，您的生活就会轻松得多。

10.开玩笑 (10. Jest)

Created by Facebook, Jest is a delightful JavaScript testing library and one of the most popular test runner these days. It’s even more useful when it comes to React.

Jest由Facebook创建，是一个令人愉悦JavaScript测试库，并且是当今最受欢迎的测试运行程序之一。 对于React来说，它甚至更有用。

Needless to say, testing is one of the most crucial parts of the development process. It’d be a shame for someone who writes code without testing in my team. Fortunately, my team members loves to write tests because they got the right mindset when joining the team in the first place.

毋庸置疑，测试是开发过程中最关键的部分之一。 对于那些未经我团队测试而编写代码的人来说，这是一种耻辱。 幸运的是，我的团队成员喜欢编写测试，因为他们在加入团队时就拥有正确的心态。

11.斯奈克 (11. Snyk)

Security should be a top priority when developing your project. We love open-source, but we’re also not sure one hundred percent whether the libraries we’re using are safe in terms of security. Importing a library without examining its vulnerabilities is too risky since hackers can take advantage of it to attack your application.

在开发项目时，安全性应该是头等大事。 我们喜欢开源，但是我们也不确定百分百使用的库在安全性方面是否安全。 在不检查漏洞的情况下导入库的风险太大，因为黑客可以利用它来攻击您的应用程序。

To prevent dangerous attacks to your website, one of the best solutions is using Synk. It will help you find and fix vulnerabilities in open source libraries.

为了防止对您的网站进行危险攻击，最好的解决方案之一是使用Synk 。 它将帮助您查找和修复开放源代码库中的漏洞。

12. ESLint (12. ESLint)

Website: https://eslint.org

网站： https ： //eslint.org

Every programmer loves clean code. At the end of the day, you want to smile at every line of code you write. And sure, you don’t want to inherit messing legacies from someone else.

每个程序员都喜欢干净的代码。 最终，您希望对编写的每一行代码都微笑。 而且可以肯定的是，您不想继承别人的混乱遗产。

By using ESLint, you make your source code more consistent. By following lint rules, the project will look like it was written by one person even there are many developers in the team and everyone has their own coding style.

通过使用ESLint，可以使源代码更加一致。 通过遵循lint规则，即使团队中有很多开发人员，每个人都有自己的编码风格，该项目看起来就像是由一个人编写的。

13. PageSpeed见解 (13. PageSpeed Insights)

Talking about performance auditing, PageSpeed Insights is the tool you need. It is designed to help optimize your website performance.

谈到性能审核， PageSpeed Insights是您需要的工具。 它旨在帮助优化您的网站性能。

You definitely want your website to be as fast as possible. PageSpeed Insights will show you the performance metrics of your site and suggestions that you can take advantage of to fix the site.

您绝对希望您的网站尽可能快。 PageSpeed Insights将为您显示网站的性能指标，并提供可用于修复网站的建议。

结论 (Conclusions)

So you have my list now: 13 tools for writing high-quality code.

因此，您现在有了我的清单：13种用于编写高质量代码的工具。

Are you using them now or if any of them are new to you?

您现在正在使用它们还是对您来说是新手？

Or maybe you use some tools that aren’t on the list. I’d appreciate it if you leave the tools you’re using in the comment below.

或者，也许您使用了一些不在列表中的工具。 如果您将正在使用的工具留在下面的评论中，我们将不胜感激。

进一步阅读 (Further reading)

普通英语JavaScript(JavaScript In Plain English)

Enjoyed this article? If so, get more similar content by subscribing to Decoded, our YouTube channel!

喜欢这篇文章吗？ 如果是这样，请订阅我们的YouTube频道解码，以获得更多类似的内容！

翻译自: https://medium.com/javascript-in-plain-english/13-useful-javascript-developer-tools-for-writing-high-quality-code-37dd63263a43