2019 年 JavaScript 必备的 36 个工具

JavaScript 仍然是世界上最流行的编程语言。鉴于需要与众多框架和库交互，任何 Web 设计都需要至少掌握 JS 的基本知识。随着 JS 扩展到区块链等重要的新兴技术领域，它在可预见的未来似乎仍将保持其重要性。

JavaScript 的流行也带来了大量简化 JS 编码的工具。以下列出了一些知名的、常用的 JavaScript 工具，并根据开发过程中的重要环节进行了分类。

集成开发环境和编辑器

编写代码的地方至关重要。有些开发者喜欢使用编辑器，有些则更喜欢集成开发环境（IDE）。虽然编辑器能带来流畅快速的体验，但IDE通常用于更复杂的项目，因为它们提供调试功能、支持应用生命周期管理（ALM）系统、可以与版本控制平台集成等等。

• Visual Studio Code：微软的代码编辑器。根据 Stack Overflow 2018 年开发者调查，Visual Studio Code 是最受欢迎的开发者环境工具（34% 的受访者使用它）。它支持调试、Git 管理、语法高亮、代码重构等功能。
• Brackets：一款开源、轻量级的文本编辑器。Brackets 拥有可视化工具和预处理器支持。它提供行内编辑器，并支持实时预览代码，让您在浏览器中即时查看更改。
• Atom：这是 GitHub 团队开发的一款文本编辑器。它功能丰富，开箱即用：跨平台编辑、内置包管理器、智能自动补全、查找和替换等等……Atom 还提供了大量的模板和选项，开发者可以根据需要进行自定义。
• WebStorm：由 JetBrains 开发的 JS IDE。WebStorm 为 JS、TypeScript、样式表语言以及最流行的框架提供智能代码补全、实时错误检测、导航和重构支持。

任务运行器和模块打包器

几年前，学习如何使用任务运行器和模块打包器还被认为是浪费时间，但如今，Web 应用和 JavaScript 项目整体上都变得复杂得多。因此，这些工具已成为任何 JavaScript 开发人员工作流程中必不可少的组成部分。

此外，它们还能帮助我们完成一些枯燥乏味、令人沮丧的任务，例如代码压缩、单元测试和网页刷新。虽然有些构建工具学习曲线陡峭，但它们可以帮助我们自动化那些在编程中不可避免的琐碎工作。

• Grunt：一个 JavaScript 任务运行器，可以自动化执行重复性任务，例如代码压缩、编译、代码检查、单元测试等等。Grunt 拥有庞大的生态系统，包含超过 6000 个插件。
• Gulp：与 Grunt 类似，Gulp 也定义并运行耗时的任务。但与 Grunt 不同的是，Gulp 将任务定义为 JavaScript 函数，而不是配置对象。
• Brunch：注重简洁性和速度。它配置简单，文档详尽。由于它对项目做了一些假设（或者说限制，取决于你的理解），因此使用 Brunch 设置项目通常比使用其他任何构建工具都更容易。
• Webpack：一款用于打包所有 JavaScript 应用以及各种不同资源（例如图像、字体和样式表）的软件。支持 ESM 和 CommonJS。
• Browserify：一款 JS 工具，您可以使用它编写 Node.js 风格的模块，并将其编译后在浏览器中使用。它会将所有必需的模块打包到一个名为 .js 的简洁文件中bundle.js。
• Yeoman：现代 Web 应用的 Web 脚手架工具。它提供最佳实践指南和模块化架构，让您可以快速扩展项目。Yeoman 支持代码检查、测试、压缩等功能。
• Parcel：这款模块打包工具支持多核编译，速度极快。Parcel 开箱即用，支持 JS、CSS、HTML 和文件资源。

文档软件

没有文档的软件是所有开发者的噩梦。而文档编写糟糕的软件，情况可能更糟。文档的作用在于解释软件的运行方式和使用方法。

但编写文档并非易事：它既复杂又耗时，而且大多时候也很枯燥。幸运的是，软件文档工具可以减轻编写文档的部分负担，并加快整个过程。

• Docco：这是一个用 Literate CoffeeScript 编写的文档生成器。它生成一个 HTML 文档，其中会显示您的注释和代码。所有注释都经过 Markdown 处理，代码则通过 Highlight.js 进行语法高亮显示。
• Swagger：贯穿整个 API 生命周期，从设计到文档编写。它是一套用于描述 API 的规则和工具。它与编程语言无关，并且对人和机器都易于阅读。
• YUIDoc：一个基于 Node.js 的应用，可根据源代码中的注释生成 API 文档。YUIDoc 支持多种 JS 编码风格。其输出为一组 HTML 页面格式的 API 文档。
• JSDoc：一种用于注释 JS 源代码文件的标记语言，然后用于生成 HTML 和 RTF 等格式的文档。

测试框架

软件测试是开发过程中不可或缺的一部分。你需要检验所有代码在各种不同情况下是否都能正常运行。它能帮助你发现错误、漏洞或与实际需求不符之处。

软件测试工具非常实用，因为应用程序日益复杂，手动测试变得越来越繁琐。测试工具可以运行测试脚本并自动生成测试结果。

• Mocha：一个托管在 GitHub 上的 JS 测试框架，深受众多开发者的喜爱。它可在 Node.js 和浏览器中运行，其测试是串行执行的。Mocha 通常与断言库Chai搭配使用。
• Protractor：一个用于 Angular 和 AngularJS 应用的端到端测试框架。该工具在真实的浏览器中运行测试，像最终用户一样与应用交互，使用原生事件和浏览器特定的驱动程序。
• Jasmine：一个基于行为驱动的 JavaScript 代码测试框架。Jasmine 不依赖任何其他 JavaScript 框架，也不需要 DOM 即可工作。它拥有简洁易懂的语法，使得编写测试变得轻松便捷。
• Jest：以“愉悦的 JavaScript 测试”为口号，大胆创新。Facebook 使用 Jest 来测试所有 JS 代码（包括其 React 应用），并致力于提供集成式零配置体验。

代码检查软件

虽然从技术上讲，代码检查也属于测试的一部分，但它非常重要，值得单独列为一个类别。代码检查指的是运行一个程序来检查代码的风格和编程错误。

每个JS开发者都应该使用代码检查软件来维护代码质量。它可以提高代码的可读性，识别结构性问题，找出语法错误，并且通常可以让你在无需执行代码的情况下发现JS代码中的问题。

• ESLint：这是 X-Team 开发人员最喜欢的工具之一。ESLint 是一个开源的 JS 和 JSX 插件，主要用于命令行。所有规则都是可插拔的，因此开发人员可以创建自己的代码检查规则。
• TSLint：另一个 X-Team 团队非常喜欢的工具，TSLint 可以检查 TypeScript 代码的可读性、可维护性和功能性错误。和 ESLint 一样，它也可以自定义 lint 规则。
• JSHint：一个由社区驱动的工具，用于检测JS代码中的错误和问题。JSHint还可以用于强制执行编码规范和风格指南。
• Flow：Facebook 开发的 JavaScript 代码检查器。它通过静态类型注解检查代码错误，但只需要最基本的类型描述。Flow 会自动推断其余部分。
• Prettier：一款全自动风格指南，让您无需为风格争论而烦恼，从而可以专注于更重要的决策。

调试器

啊，你难道不喜欢发现并解决自己编写的代码问题的过程吗？比如，七百行代码中你错放的一个逗号？或者导致机器陷入无限循环的不合逻辑的 if-then 语句？

调试工具可以减少调试所需的时间和精力，并帮助开发人员获得更准确的结果。在遇到棘手问题时，调试工具可以成为你的得力助手。

• Chrome 开发者工具：Chrome 开发者工具是一套直接内置于 Google Chrome 浏览器中的工具，它包含多个实用工具，可帮助您逐步调试 JS 代码。
• JavaScript 调试器：由 Mozilla 开发者网络开发的 JavaScript 调试器可用于在 Firefox 中进行调试，甚至可以作为独立的 Web 应用程序在其他浏览器或 Node.js 中调试代码。
• JavaScript 开发工具 (JSDT)：它提供插件，支持使用 Rhino 和 Crossfire 调试 JavaScript。它可以在所有主流浏览器中调试 JS。
• Node Inspect：类似于 Chrome 开发者工具，但适用于运行在 Node.js 上的应用程序。

安全分析器

网络安全已成为企业和国家最为关注的问题之一。黑客可以利用软件漏洞敲诈勒索受害者。虽然开源代码对创新至关重要，并且能够免费加快开发进程，但它也存在着不容低估的安全风险。

安全分析器会检查您的软件依赖项，并帮助降低安全风险。

• Snyk：一个开源安全平台，可以查找并修复 npm、Maven、NuGet、RubyGems、PyPi 等项目的漏洞。Salesforce、Google、Microsoft、ASOS 等众多知名公司都在使用 Snyk。
• RetireJS：RetireJS 可以帮助检测您是否存在已知存在安全漏洞的依赖项版本。它是一个命令行扫描器，并提供 Grunt 插件、Chrome/Firefox 扩展程序以及 Burp/OWASP Zap 插件。
• OWASP 依赖项检查：与 RetireJS 类似，OWASP 会识别您的项目依赖项，并检查是否存在已知的、公开披露的漏洞。
• Acunetix：这款工具会抓取您的网站，并执行黑盒和灰盒攻击技术来查找漏洞。它会扫描前端和服务器端应用程序。
• Source Clear：支持 Node.js，也支持 Ruby、Java 和 Python。Source Clear 可帮助您查找已验证的公共和私有漏洞。
• OSS Index：一项免费服务，用于查找开源依赖项并了解已知且已公开披露的漏洞。支持多种生态系统：npm、Bower、Drupal、NuGet 等。

软件包管理器

能够自动安装、升级、配置和移除软件仓库中维护的软件包的软件。但这还不是全部，软件包管理器还会检查你的依赖关系，确保新版本的软件包不会破坏你的代码。

• npm：Node.js 的默认包管理器，但也可用于前端开发。它是世界上最大的软件注册表，拥有超过 35 万个软件包。
• Yarn：npm 的主要竞争对手，以至于我专门写了一篇文章来介绍它。Yarn 由 Facebook 开发，在 2016 年发布时相比 npm 提供了一些显著的优势，尽管 npm 此后已经迎头赶上。

工具真多！当然，有些工具必不可少，有些则不然。哪些工具最适合你，取决于你的客户、项目以及你的工作方式。

每种工具都有学习曲线，很容易因为还在摸索新工具的使用方法而耽误工作。因此，只有当你确信新工具能够显著提升你的工作效率或项目质量时，才应该考虑使用它。

肯定还有一些很棒的软件我漏掉了。这份清单里有什么明显的遗漏吗？请在评论区告诉我✍。