十大JavaScript开发最受欢迎的VsCode插件类别_vscode javascript插件

针对 JavaScript 开发人员最受欢迎的 VS Code 扩展插件：

1、代码扩展插件

可以帮助您快速编写重复的代码。

以下是一些最受 JavaScript 开发人员欢迎的代码片段扩展：

• JavaScript (ES6) 代码片段，作者：Charalampos Karypidis。这是目前最流行的 JavaScript 代码片段扩展，迄今为止安装量已超过 3 百万。该扩展为 JavaScript、TypeScript、HTML、React 和 Vue 提供 ES6 语法。所有片段都包含最后一个分号。
• StandardJS 风格的 JavaScript (ES6) 代码片段，作者：James Vickery。对于那些喜欢StandardJS 风格约定的人来说，这基本上是上述扩展的一个分支——也就是说，片段没有分号。
• JavaScript standardjs 风格的片段，作者：capaj。另一种 StandardJS 风格的代码片段，但这个更受欢迎，安装次数超过 72k。最初是从Atom StandardJS snippets分叉出来的。包含大量方便的代码片段，并支持 JavaScript、TypeScript 和 React。
• JavaScript 片段，作者：Nathan Chapman。JavaScript 片段的集合，迄今为止安装量已超过 33k+。此代码片段扩展支持 Node.js、BDD 测试框架，例如 Mocha 和 Jasmine。
• Atom JavaScript 片段，作者：Saran Tanpituckpong。迄今为止，安装量已超过 26k，此扩展中的片段是从atom/language-javascript. 从atom/language-javascript 扩展移植的 JavaScript 片段。

2、语法突出显示扩展

一些语法突出显示扩展，当涉及到某些类型的项目和文件扩展名时，它们非常有用：

• Babel JavaScript，作者：Michael McDermott。为 ES201x JavaScript、React、FlowType 和 GraphQL 代码提供语法突出显示。
• DotENV，支持环境设置（即.env文件）的语法突出显示。
• Bracket Pair Colorizer 2，作者：CoenraadS。以不同颜色突出显示匹配的括号，帮助您识别哪个括号属于哪个块。

3、Linter 扩展

可用的扩展：

• ESLint，作者：Dirk Ba​​eumer提供支持的最受欢迎的扩展。为了使扩展正常工作，您的项目将需要安装 ESLint 包和插件。您还需要指定一个.eslintrc，它将指定扩展用于检查代码的规则。
• JSHint，作者：德克·鲍默。此扩展支持使用JSHint库进行 linting。.jshintrc扩展需要一个配置文件来检查您的代码。
• StandardJS – JavaScript 标准样式，作者：Sam Chen。只是将JavaScript 标准样式集成到 VS Code 中。您需要在项目中安装standard或作为开发依赖项。semiStandard不需要配置文件。您需要禁用 VS Code 的内置验证器才能使此扩展正常工作。
• JSLint，作者：Andrew Hyndman。此扩展提供了JSLint库的 linting。您需要jslint在本地或全局安装才能使扩展正常工作。

4、NodeJs包管理扩展

每个 JavaScript 项目都需要至少一个 npm 包，除非你是一个喜欢以困难的方式做事的人。以下是一些 VS Code 扩展，可帮助您更轻松地管理和使用 npm 包。

• npm，作者：egamma。此扩展用于package.json验证已安装的软件包。如果缺少任何内容或版本不匹配，该扩展将为您提供可单击的选项来解决问题。此外，您还可以运行package.json编辑器中定义的 npm 脚本。
• npm IntelliSense，作者：Christian Kohler。此扩展在导入语句中提供了自动完成 npm 模块的功能。
• Path IntelliSense，作者：Christian Kohler。安装量超过 270 万次后，此扩展会自动完成文件名。它也适用于 HTML 和 CSS 文件。
• Node exec，由 Miramac 编写。此扩展允许您通过按下键盘来使用 Node.js 执行当前文件或所选代码。您还可以通过按 来取消正在运行的进程F9。
• 查看Dominik Ku​​ndel 的节点包。此扩展允许您在使用代码时快速查看 Node 包源代码和文档。
• Node Readme，作者：bengreenier。此扩展允许您在 VS Code 编辑器中作为单独的选项卡快速打开 npm 包文档。
• Search node_modules，作者：Jason Nutter。默认情况下，该node_modules文件夹将从 VS Code 的内置搜索中排除。node_modules该扩展已安装超过 47 万次，允许您通过遍历文件夹树来快速导航和打开文件。

5、格式化扩展

实现返回并修复每行中的缩进。此外，我们需要确保大括号和标签的格式正确且可读。

• Prettier Code Formatter，作者：Esben Petersen。这是最流行的扩展，支持使用Prettier对 JavaScript、TypeScript 和 CSS 进行格式化。建议您prettier在本地安装作为开发依赖项。
• Beautify,作者：HookyQR。jsBeautifier扩展，支持 JavaScript、JSON、CSS 和 HTML 。它可以通过.jsbeautifyrc文件进行定制。它现在是第二受欢迎的格式化程序。
• JS 重构，作者：Chris Stead。这提供了许多用于重构 JavaScript 代码的实用程序和操作，例如提取变量/方法、转换现有代码以使用箭头函数或模板文字以及导出函数。
• JavaScript 助推器，作者：Stephan Burguchev。这是一个令人惊奇的代码重构工具。它具有多种编码操作，例如转换var为constor let、删除冗余else语句以及合并声明和初始化。很大程度上受到WebStorm的启发。

6、浏览器扩展

Microsoft 的Chrome 调试器。允许您在 Chrome 或支持 Chrome 调试器协议的任何其他目标中调试 JavaScript 代码。

• LiveServer，作者：Ritwick Dey。此扩展允许您启动具有静态和动态页面实时重新加载功能的本地开发服务器。
• 在 Web 服务器上预览，作者：YuichiNukiyama。这提供了 Web 服务器和 HTML 的实时预览。可以从上下文菜单或编辑器菜单调用这些功能。
• PHP 服务器，由 brapifra 开发。它是为 PHP 项目构建的，对于测试仅需要运行客户端的 JavaScript 代码仍然很有用。
• rest-client，作者：毛华超。您可以安装此工具以在编辑器内以交互方式运行 HTTP 请求，而不是使用浏览器或 CURL 程序来测试 REST API 端点。

7、框架扩展

对于大多数项目，您需要一个合适的框架来构建代码并缩短开发时间。VS Code 通过扩展支持大多数主要框架。然而，仍然有许多已建立的框架还没有完全开发的扩展。以下是一些提供重要功能的 VS Code 扩展。

• Angular Snippets（版本 9），作者：John Papa。这是 Angular 开发人员最流行的代码片段扩展。它为 TypeScript、RxJS、HTML 和 Docker 文件提供 Angular 片段。在撰写本文时，该扩展已更新为支持 Angular 9。
• Angular 8 片段 – TypeScript、Html、Angular Material、ngRx、RxJS 和 Flex 布局，作者：Mikael Morlund。这里有 Angular 2、4、5、6、7 和 8 Beta 的片段。它支持 Typescript、HTML、Angular Material ngRx、RxJS、PWA 和 Flex 布局。迄今为止，它包含 242 个 Angular 代码片段。
• ES7 React/Redux/GraphQL/React-Native 片段，作者：dsznajder。它为采用 ES7 语法的 React、Redux 和 Graphql 提供了 JavaScript 和 TypeScript 片段。
• React Native 工具，由 Microsoft 开发。这为 React Native 项目提供了 IntelliSense、命令和调试功能。
• es6/es7 的 React-Native/React/Redux 片段，作者：EQuimper。这提供了 ES6/ES7 语法中的 React、React Native、Redux 和 Storybook 的 ES6/ES7 语法片段。
• Vetur，作者：Pine Wu。这为 Vue 框架提供了语法突出显示、代码片段、Emmet、linting、格式化、IntelliSense 和调试支持。它附带了在GitBook上发布的适当文档。
• Ember，菲利克斯·里塞伯格著。这为 Ember 提供了命令支持和 IntelliSense。安装后，所有ember cli命令都可以通过 VS Code 自己的命令列表使用。
• Cordova 工具，由微软开发。这提供了对 Cordova 插件和 Ionic 框架的支持，并且还为基于 Cordova 的项目提供了 IntelliSense、调试和其他支持功能。
• jQuery 代码片段，作者：Don Jayamanne。这提供了超过 130 个 jQuery 代码片段。它由前缀 激活jq。

8、测试扩展

• Mocha sidebar，作者：maty。这为使用 Mocha 库进行测试提供了支持。此扩展可帮助您直接在代码上运行测试并将错误显示为装饰器。
• ES6 Mocha Snippets，作者：Cory Noonan。这提供了 ES6 语法的 Mocha 片段。此扩展的重点是保持代码干燥，利用箭头函数并尽可能省略花括号。它可以配置为允许使用分号。
• Jasmine Code Snippets，作者：Charalampos Karypidis。这提供了 Jasmine 测试框架的代码片段。该扩展在过去三年内尚未更新。
• Protractor Snippets, 作者：Budi Irawan。这为 Protractor 框架提供了端到端的测试片段。它支持 JavaScript 和 Typescript。
• Node TDD，作者：Prashant Tiwari。这为 Node 和 JavaScript 项目的测试驱动开发提供了支持。每当源更新时，它都可以触发自动测试构建。

9、很棒的扩展

• Quokka.js，作者：Wallaby.js。一个很棒的调试工具，为 JavaScript 代码提供了快速原型设计平台。它附带了优秀的文档。
• 通过 Quicktype粘贴为 JSON 。这使您可以快速将 JSON 数据转换为 JavaScript 代码。
• 代码指标，作者 Kiss Tamás。这是另一个很棒的扩展，可以计算 JavaScript 和 TypeScript 代码的复杂性。

10、扩展包

现在我们已经进入了最后一个类别，我想让您知道 VS Code 市场有一个扩展包类别。本质上，这些是相关 VS Code 扩展的集合，捆绑到一个包中以便于安装。以下是一些更好的：

• Nodejs 扩展包，作者：Wade Anderson。该包包含 ESLint、npm、JavaScript (ES6) 片段、搜索 node_modules、NPM IntelliSense 和 Path IntelliSense。
• Node.js 的 VS Code – 开发包，由 NodeSource 提供。该工具具有 NPM IntelliSense、ESLint、Chrome 调试器、代码指标、Docker 和导入成本。
• Vue.js 扩展包，作者：Muhammad Ubaid Raza。这是 Vue 和 JavaScript 扩展的集合。它目前包含大约 12 个 VS Code 扩展，其中一些此处未提及，例如auto-rename-tag和auto-close-tag。
• Ionic Extension Pack，作者：Loiane Groner。该包包含许多用于 Ionic、Angular、RxJS、Cordova 和 HTML 开发的 VS Code 扩展。

更多扩展插件：https://www.jdon.com/tag-38695/