JavaScript 开发者 10 种必备 VS Code 扩展

2018-11-0810:22:12WEB前端开发Comments3,640 views字数 4899阅读模式

VS Code 扩展的类别

在本文中，我将重点介绍专门针对 JavaScript 开发人员的 VS Code 扩展。 目前，有许多符合此条件的 VS Code 扩展，当然这意味着我无法提及所有这些这类扩展。 相反，我将重点介绍已经流行的，以及那些对 JavaScript 开发人员来说不可或缺的 VS Code 扩展。 为简单起见，我将它们分为10个特定类别。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7750.html

在这之中可能有你已经知道并且正在使用的插件，但也很有可能有一些是你听说过但未曾使用过的，我也希望通过本文能为你简要的介绍一下这些插件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7750.html

代码片段扩展

当您第一次安装 VS Code 时，它附带了几个 JavaScript 和 Typescript 的代码片段功能。在开始编写现代 JavaScript 之前，您需要一些额外的代码片段来帮助您快速编写重复的 ES6 / ES7 代码：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7750.html

愚人码头注：另外你也可以根据自己的习惯创建代码片段，请参阅 如何在 Visual Studio Code 中创建代码片段 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7750.html

语法扩展

VS Code 为 JavaScript 代码提供了非常好的语法高亮显示。 您可以通过安装主题来更改颜色。 但是，如果您想要增强代码的可读性，则需要语法高亮显示扩展。 以下是其中几个：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7750.html

  • JavaScript Atom Grammar：此扩展使用 Atom 编辑器中的 JavaScript 语法替换 Visual Studio Code 中的 JavaScript 语法。
  • Babel JavaScript：支持 ES201x JavaScript，React，FlowType和GraphQL代码的语法高亮显示。
  • DotENV：支持.env文件语法高亮显示。如果您正在使用Node，请使用方便。

代码检测扩展

编写有效的 JavaScript 代码时，需要一个能够为所有团队成员强制执行特定编码风格的检测工具(linter)。 ESLint 是最受欢迎的，因为它支持许多编码风格，包括 Standard ，Google 和 Airbnb 。 以下是 Visual Studio Code 最流行的 linter 插件：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7750.html

  • ESLint ：此扩展将 ESLint 集成到 VS Code 中。它是最受欢迎的 linter 扩展，迄今为止安装量超过670万。规则在 .eslintrc.json 中配置。
  • JSHint ：JSHint 的代码检查器扩展。在项目的根目录使用 .jshintrcfile 进行配置。
  • JavaScript Standard Style ：零配置和严格规则的检测工具。执行 StandardJS 规则。
  • JSLint ：JSLint的 linter 扩展。

如果您想了解可用的 检测工具(linter) 及 各自的优缺点，请查看我们对 JavaScript linting 工具的比较 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7750.html

Node 扩展

每个 JavaScript 项目都需要至少一个 Node 包，除非你是一个喜欢艰苦工作的人。以下是一些 VS Code 扩展，可帮助您更轻松地使用 Node 模块。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7750.html

  • npm ：使用 package.json 验证已安装的软件包。确保已安装的软件包版本号正确，高亮显示 package.json 中缺少的已安装软件包以及尚未安装的软件包。
  • Node.js Modules IntelliSense：自动补全 import 语句中的 JavaScript 和 TypeScript 模块。源码：vscode-node-module-intellisenseJavaScript 开发者 10 种必备 VS Code 扩展
  • Path IntelliSense ：它和 Node 其实并不相关，但你肯定需要对本地文件的智能提示，这个扩展将自动补全文件名。
  • Node exec ：允许您使用Node.js执行当前文件或您选择的代码。
  • View Node Package ：使用此扩展快速查看 Node 包源，允许您直接从 VS Code 打开 Node 包仓库库/文档。
  • Node Readme ：快速打开npm包文档。
  • Search node_modules ：此扩展允许您搜索 node_modules 文件夹，该文件夹不在默认的搜索范围内。源码：vscode-search-node-modules。JavaScript 开发者 10 种必备 VS Code 扩展
  • Import Cost ：显示导入的包的大小。源码：import-cost。JavaScript 开发者 10 种必备 VS Code 扩展

代码格式化扩展

偶尔，您会发现自己格式化的代码并非以首选的编码风格编写。为了节省时间，您可以以下任何的 VS Code 扩展来快速格式化和重构现有代码：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7750.html

  • Beatufy ：一个支持 JavaScript，JSON，CSS 和 HTML 的 jsBeautifier(代码美化) 扩展。可以通过 .jsbeautifyrc 文件进行自定义。迄今为止最流行的格式化工具，安装量为 230 万次。
  • Prettier Code Formatter ：一个扩展，支持使用Prettier（一种固定代码格式化程序）格式化JavaScript，TypeScript和CSS。迄今已安装超过150万。
  • JS Refactor ：提供了许多用于重构 JavaScript 代码的实用程序和操作，例如提取变量/方法，将现有代码转换为使用箭头函数或模板字面量以及导出函数。
  • JavaScript Booster ：一个牛逼的代码重构工具。具有多种编码操作，例如将 var 转换为 const 或 let ，删除冗余的 else语句，以及合并声明和初始化。很大程度上受到WebStorm 的启发。源码：vscode-javascript-booster。JavaScript 开发者 10 种必备 VS Code 扩展

浏览器扩展

除非你是在用 JavaScript 编写控制台程序，否则您很可能会在浏览器中执行 JavaScript 代码。 这意味着,您需要经常刷新页面来查看您所做的每次代码更新的效果。 这里有一些工具可以显着减少重复过程的开发时间，而不是每次都手动刷新浏览器：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7750.html

框架类扩展

对于大多数项目，您需要一个合适的框架来构建代码并缩短开发时间。 VS Code 通过扩展支持大多数主流框架。 但是，仍然有许多已建立的框架尚未完全支持。 以下是一些提供重要功能的 VS Code 扩展。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7750.html

  • Angular 6 ：提供 Angular 6 的代码片段。支持 Typescript，HTML，Angular Material ngRx，RxJS 和 Flex Layout。到目前为止，已安装了220多万个安装和 172 个 Angular 代码片段。
  • Angular v5 snippets ：为 TypeScript，RxJS，HTML 和 Docker 文件提供 Angular 代码片段。迄今为止已有 270多 万个安装量。
  • React Native/React/Redux snippets for es6/es7 ：为所有这些框架提供 ES6 / ES7 语法的片段。
  • React Native Tools ：为 React Native 框架提供智能提示，命令行工具和调试功能。
  • Vetur ：为Vue框架提供语法高亮，代码片段，Emmet，linting（代码检测），格式化，智能提示和调试支持。它附带了在 GitBook 上发布的使用文档 。
  • Ember ：为Ember提供命令支持和智能提示。安装后，所有 ember cli 命令都可以通过 VS Code 自己的命令行列表中使用。
  • Cordava Tools ：支持 Cordova 插件和 Ionic 框架。为基于 Cordova 的项目提供智能提示，调试和其他支持功能。
  • jQuery Code Snippets ：提供了超过130个jQuery的代码片段，使用 jq 前缀来激活。

测试类扩展

测试是软件开发的关键环节，特别是对于处于生产阶段的项目。 您可以全面了解 JavaScript 的测试，并且你可以通过阅读我们的指南：JavaScript测试：单元测试 vs 功能测试 vs 集成测试 来获得更多不同类型的测试的信息。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7750.html

  • Mocha sidebar ：为使用 Mocha 库进行测试的项目提供支持。此扩展可帮助您直接在代码上运行测试，并将错误信息以装饰器形式显示。
  • ES Mocha Snippets ：提供 ES6 语法的 Mocha 代码片段。这个插件的重点在于利用箭头函数，尽可能减少花括号的使用，保持代码的紧凑。可通过设置允许使用分号。
  • Jasmine Code Snippets ：针对Jasmine测试框架的代码片段。
  • Protractor Snippets ：Protractor 框架的端到端测试片段。支持 JavaScript 和 Typescript 。
  • Node TDD ：为Node和JavaScript项目的测试驱动开发提供支持。可以在更新源时触发自动测试构建。源码：node-tdd 。 JavaScript 开发者 10 种必备 VS Code 扩展

还有一些非常棒的扩展

我只是将下一批 VS Code 扩展归入到 “awesome” 类别中，因为它最能描述它们！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7750.html

扩展包

现在我们已经进入最后一个类别，我想告诉您，VS Code 市场有 一个扩展包类别 。 从本质上讲，它们是相关联的一些 VS Code插件的集合，打成一个包，方便安装。这里有些较好的：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7750.html

总结

VS Code 的大量质量扩展使其成为 JavaScript 开发人员的热门选择。 有效地编写 JavaScript 代码从未如此简单。 诸如 ESLint 之类的扩展可以帮助您避免常见错误，而其他诸如 Debugger for Chrome 则可以帮助您更轻松地调试代码。 具有智能提示功能的 Node.js 扩展可帮助您正确导入模块，Live Server 和 REST client 等工具的可用性减少了您对外部工具的依赖，从而完成您的工作。 所有这些工具都使您的迭代过程变得更加容易。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7750.html

我希望这些列表让你接触到新的 VS Code 扩展，对你的工作流程有帮助。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7750.html

  • 本站内容整理自互联网，仅提供信息存储空间服务，以方便学习之用。如对文章、图片、字体等版权有疑问，请在下方留言，管理员看到后，将第一时间进行处理。
  • 转载请务必保留本文链接：https://www.cainiaoxueyuan.com/gcs/7750.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定