作为JavaScript开发⼈员，这些必备的VSCode插件你都⽤过
吗？
如今，Visual Studio Code⽆疑是最流⾏的轻量级代码编辑器。它确实从其他代码编辑器那借鉴了很多，最主要是从Sublime和Atom那⾥。然⽽它的成功关键是源于能提供更好的性能和稳定的表现。另外，它还提供了如代码智能提⽰等开发者⾮常需要的功能。⽽这些功能，曾经只在像Eclipse或者Visual Studio 2017这样的完整集成开发环境(IDEs)中才有。
VS Code的强⼤⽆疑来⾃于它的插件市场。多亏了开源社区，VS Code现在⼏乎对所有的编程语⾔、框架和开发技术都有⽀持。提供这种⽀持的⽅式是多样的，主要包括了为特定技术提供代码⽚段、语法⾼亮、Emmet以及智能提⽰功能。
VS Code插件的种类
计算机c语言考试题
在本⽂，我主要介绍专门针对JavaScript开发者的VS Code插件。有很多满⾜此条件的VS Code插件，当然我不会都作介绍。相反，我会着重介绍那些已经相当流⾏⽽且对JavaScript开发者来说必不可少的VS Code插件。为简单起见，我把它们分为10类。
在这之中可能有你已经知道并且正在使⽤的插件，但也很有可能有⼀些是你听说过但未曾使⽤过的，我
也希望通过本⽂能为你简要的介绍⼀下这些插件。
1. 代码⽚段插件
当你第⼀次安装VS Code时，它会附带⼀些JavaScript和TypeScript的代码⽚段。在你开始上⼿现代JavaScript之前，你将需要⼀些额外的代码⽚段来帮助你快速地编写ES6/ES7代码：
VS Code JavaScript(ES6) snippets：当前最流⾏的，已有超过120万的下载量。这个插件为JavaScript、TypeScript、HTML、React 和Vue提供了ES6的语法⽀持。
beautify ⽤于格式化代码，右击格式化代码
JavaScript Snippet Pack：提供了有⽤的JavaScript代码⽚段集合。（这个链接打不开了）
Atom JavaScript Snippet：移植⾃Atom的JavaScript插件。
JavaScript Snippets：提供了ES6代码⽚段的集合。它包含对Mocha、Jasmine等其他BBD(Behavior-Driven Development)测试框架的⽀持。
2. 语法⾼亮插件
VS Code⾃带很好的JavaScript代码语法⾼亮。你可以通过安装主题改变这些颜⾊。然⽽，如果你想要更⾼⽔平的可读性，就得安装语法⾼亮的插件了。这⾥有⼀些：
JavaScript Atom Grammar：它⽤Atom编辑器⾥的JavaScript语法⾼亮替换VS Code原来的。
Babel JavaScript：⽀持ES201X、React、FlowType以及GraphQL的语法⾼亮。
DotENV：⽀持.env⽂件语法⾼亮，在你使⽤Node时会⾮常有⽤。
3. 代码检测插件
以最⼩的烦恼⾼效编写JavaScript代码，需要⼀个代码检测(linter)⼯具。它强制团队所有成员遵循特定的代码规范。ESLint是最受欢迎的，它⽀持许多代码风格，包括Standard、Google和Airbnb的JavaScript代码规范。这⾥是最流⾏的VS Code代码检查插件：
ESLint：这个插件把ESLint集成到VS Code中。它是最流⾏的代码检测插件，已有超过670万下载量。它的规则在.eslintrc.json⾥配置。
crontab语法
JSHint：基于JSHint的代码检测插件。在项⽬跟⽬录下使⽤.jshintrc⽂件作为其配置。
JavaScript Standard Style：零配置和严格规则的代码检测，强制使⽤StandardJS规则。
如果你想查看对各种代码检测优缺点的综述，可以来看看我们对代码检测⼯具的⽐较。
4. Node插件
每⼀个JavaScript项⽬都需要⾄少⼀个Node package，除⾮你是那种喜欢以艰难的⽅式做事的⼈。这⾥有⼀些VS Code插件，能帮你更容易的处理Node模块。
npm：⽤package.json来校验安装的npm包，确保安装包的版本正确，对缺少package.json⽂件的包或者未安装的包给出⾼亮提⽰。
Node.js Modules IntelliSense：提供JavaScript和TypeScript导⼊声明时的⾃动补全。源码：vscode-node-module-intellisense。
Path IntelliSense：它其实与Node没有关系，但是你肯定需要对本地⽂件的智能提⽰，这个插件会⾃动补全⽂件名。
Node exec：允许你⽤Node执⾏当前⽂件或者选中的代码。excel随机数生成范围内
View Node Package：利⽤此插件可快速查看Node包源码，让你直接在VS Code中打开Node包的代码库或⽂档。
Search node_modules：通常node_modules⽂件夹不在默认的搜索范围内，这个插件允许你搜索它。源码：vscode-search-node-modules。
shell十三问
Import Cost：显⽰导⼊的包的⼤⼩。源码：import-cost。
5. 代码格式化插件
有时，你发现⾃⼰会对以前写过的风格不太理想的代码做格式整理。为了节约时间，你可以安装以下任何的VS Code插件，来快速地格式化和重构现有代码：
Beatufy：⼀个jsBeautifier的插件，⽀持JavaScript、JSON、CSS和HTML。可通过.jsbeautifyrc⽂件⾃定义。它是最流⾏的格式化⼯具，⽬前有230万的下载量。
Prettier Code Formatter：利⽤Prettier的⽀持JavaScript、TypeScript和CSS的插件，⽬前有超过150万的下载量。
JS Refactor：提供许多重构JavaScript代码的实⽤⽅法和操作，例如抽取变量和⽅法，把现有代码转为使⽤箭头函数和模板字符串的等价形式，导出函数等。
JavaScript Booster：⼀款了不起的代码重构⼯具。拥有需要代码操作，⽐如把var转为const或者let，
去除多余的else语句，合并声明和初始化。其灵感⼤量源于WebStorm的启发。源码：vscode-javascript-booster。
6. 浏览器插件
除⾮你是在⽤JavaScript写控制台程序，否则你多半会在浏览器中执⾏你的JavaScript代码。这意味着，你会频繁地刷新浏览器以观察每次你更新代码的效果。这⾥有⼀些⼯具，能极⼤地减少你开发时的这种重复流程，⽽不是每次都⼿动刷新浏览器：
Debugger for Chrome：在编辑器中打断点，让你轻松地在Chrome⾥调试JavaScript。源码：vscode-chrome-debug。
Live Server：开启本地开发时服务器，为静态和动态页⾯提供实时刷新功能。源码：vscode-chrome-debugvscode-live-server。
Preview on Web Server：提供web服务器和实时预览功能。
PHP Server：对测试只能在客户端运⾏的JavaScript代码很有⽤。
Rest Client：相较于⽤浏览器或者⼀个CURL程序来测试你的REST API端点，你可以安装这个⼯具，直接在编辑器⾥相互性地发HTTP请求。
7. 框架类插件
对于⼤多数项⽬，你会使⽤合适的框架去构建你的代码，以减少开发时间。VS Code通过插件对⼤多数主流框架都做了⽀持。然⽽，仍有⼀些特定框架没有得到完全的⽀持。下⾯是⼀些提供了强⼤功能的VS Code插件。
Angular 6：提供Angular 6的代码⽚段，⽀持TypeScript、HTML、Angular Material ngRx、RxJS和Flex Layout。⽬前有220多万的下载量和172个Angular代码⽚段。
Angular v5 snippets：提供针对TypeScript、RxJS、HTML和Docker⽂件的代码⽚段。⽬前有270多万的下载量。
React Native/React/Redux snippets for es6/es7：提供对这些框架的ES6/ES7语法的代码⽚段。
React Native Tools：为React Native框架提供代码智能提⽰、命令⾏⼯具和调试特性。
Vetur：为Vue框架提供语法⾼亮、代码⽚段、Emmet、代码检测、智能提⽰和调试⽀持。它带有很好的发布在GitBook上的⽂档。
Ember：为Ember提供了命令⾏⽀持和智能提⽰。安装完后，所有ember cli的命令可直接在VS Code⾃⼰的命令⾏列表中使⽤。
Cordava Tools：⽀持Cordava插件和Ionic框架，提供基于Cordova的项⽬的智能提⽰、调试已经其他特性的⽀持。
jquery下载文件插件
jQuery Code Snippets：提供了超过130个jQuery的代码⽚段，使⽤jq前缀来激活。
8. 测试类插件
测试是软件开发中的关键环节，对于⽣产阶段的项⽬来说更是如此。你可以通过阅读我们的指南-JavaScript测试：单元测试 vs 功能测试 vs 集成测试-来获得对JavaScript测试的⼀个概观。这⾥有⼀些针对测试的VS Code插件：
Mocha sidebar：利⽤Mocha库为项⽬提供单元测试。这个框架帮你直接在代码⾥跑测试，把错误信息以装饰器形式显⽰出来。
ES Mocha Snippets：提供ES6语法的Mocha代码⽚段。这个插件的重点在于利⽤箭头函数，尽可能减少花括号的使⽤，保持代码的紧凑。可通过设置允许使⽤分号。
Jasmine Code Snippets：针对Jasmine测试框架的代码⽚段。
Protractor Snippets：针对Protractor端到端测试框架的代码⽚段。⽀持JavaScript和TypeScript。
Node TDD：为Node和JavaScript项⽬提供测试驱动开发的⽀持。能在源码的更新后，⽴即触发⾃动化测试的构建。源码：node-tdd
9. 其他棒棒的插件
我把下⼀批VS Code的插件归为"厉害的"(awesome)这⼀类，因为这个描述恰到好处。
Quokka.js：⾮常厉害的调试⼯具，为JavaScript提供了快速构建原型的演练场，并且附带有很好的⽂档。
Paste as JSON：快速地将JSON数据转为JavaScript代码。源码：quick-type。
Code Metrics：这是另⼀个⾮常棒的插件，计算JavaScript和TypeScript代码中复杂度。源码：codemetrics。
10. 插件包
现在我们来到了最后⼀类，我想让你知道，VS Code市场有有⼀个插件包的分类。本质上，它们是相关联的⼀些VS Code插件的集合，打成⼀个包，⽅便安装。这⾥有些较好的：
Nodejs Extension Pack：这个包⾥有ESLint、npm、JavaScript(ES6) snippets、Search node_modules、NPM IntelliSense和Path IntelliSense。
VS Code for Node.js - Development Pack：这个包含NPM IntelliSense、ESLint、Debugger for Chrome、Code Metrics、Docker和Import Cost。
c语言char的用法
Vue.js Extension Pack：⼀些Vue和JavaScript插件的集合。⽬前它含有12个VS Code的插件，有⼀些之前我们没有提到的，⽐如auto-rename-tag和auto-close-tag。
Ionic Extesion Pack：这个包⾥有针对Ionic、Angular、RxJS、Cordova和HTML开发的插件。
：可嵌⼊你系统的在线Excel，功能布局与 Excel ⾼度类似，完全兼容 Excel 的 450 种公式和 92 种图表。
总结
VS Code拥有⼤量的⾼质量插件，这让它在JavaScript开发者体中⼴受欢迎。写JavaScript代码，再没有⽐现在更容易了。
像ESLint这样的插件，帮助你避免代码中的常见错误；Debugger for Chrome，帮助你更容易地调试代
码；带有智能提⽰的Node.js插件帮助你正确引⽤模块；像Live Server和REST client这样的可⽤⼯具，让你在完成⼯作时减少了对外部⼯具的依赖；再⽐如SpreadJS纯前端表格控件，让嵌⼊您的应⽤。所有这些⼯具，都极⼤地加快了你的迭代流程。
我希望这些列表让你接触到新的VS Code插件，对你的⼯作流程有帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。