Visual Studio Code的高质量插件推荐

Visual Studio Code的高质量插件推荐

Visual Studio Code作为小邹最喜爱的编辑器之一，毫无疑问也是目前市场上最流量的轻量级代码EDE之一。它确实从其它代码编辑器吸收了大量的概念，特别是SublimeText和Atom。不过，它受欢迎的原因主要还是在于它的性能更好，并且十分稳定。另外，它还提供了我们最想要的原本只能在那种复杂的大型IDE像Eclipse或者VisualStudio2017里面才有的智能代码提示(IntelliSense)这样的功能。VSCode能够如此强大还源自于它的插件市场。归功于其开源社区，VSCode几乎支持所有的编程语言、框架和开发技术。并且有各种各样的支持方案，包括代码片段(snippets)，语法高亮、Emmet和IntelliSense功能相关的技术。下面小邹就给大伙推荐几个插件，希望能帮助大伙进行快速开发：

代码片段(Snippet)插件

当你第一次安装VSCode，它会提供基本的针对JavaScript/TypeScript的代码片段支持。当你要从事更加前沿的开发的时候，你就需要一些额外的代码片段插件来辅助你编写ES6/ES7代码。VSCodeJavaScript(ES6)snippets：它是如今最流行的，安装了超过120万的插件。该插件为JavaScript、TypeScript、HTML、React和Vue提供了ES6语法支持。JavaScriptSnippetPack：JavaScript代码片段集合。AtomJavaScriptSnippet：从Atom移植过来的JavaScript代码片段。JavaScriptSnippets：ES6代码片段，并且包含Mocha、Jasmine和其它BDD测试框架的代码片段。

语法插件

VSCode自带的针对JavaScript的语法高亮已经相当不错。你可以安装不同的主题来改变代码的颜色。不过，如果你想要更好的可读性，可以安装代码高亮插件。这里有一些推荐：JavaScriptAtomGrammar：该插件将VisualStudioCode自带的JavaScript语法替换成了Atom编辑器的版本。BabelJavaScript：支持ES201xJavaScript、React、FlowType和GraphQL代码的语法高亮。DotENV：如果你使用Node，你需要它。DotEnv提供.env文件的语法高亮。

代码风格检查插件

为了保证整个团队代码格式的一致性，使用一个代码风格检查工具可以做到。ESLint是最流行的一个工具，因为它支持非常多的代码风格，包括标准的、Google和Airbnb。下面列出一些推荐的插件：ESLint：这个是最流行的代码风格检查插件，有超过670万的安装量。你可以在.eslintrc.json中配置。JSHint：JSHint的代码风格检查插件。在项目的根目录下面，用.jshintrcfile配置。JavaScriptStandardStyle:一个无需配置的自带非常严格规则的代码风格检查插件。它强制要求你所有代码要遵循标准规则。JSLint：JSLint的代码风格检查插件。

浏览器插件

除非你直接在控制台写JavaScript代码，大多数时候是在浏览器中执行的。也就是说，每一次代码更新，你都需要刷新页面来重写载入代码。如果一直手动操作，是很繁琐的。我们可以用插件来替代。DebuggerforChrome：你只需要在代码编辑器中设置断点，在浏览器中会在断点处暂停。LiveServer：在本地开发环境中，实时重新加载(reload)页面。PreviewonWebServer：提供web服务器和实时预览。PHPServer：对于仅需要在客户端运行JavaScript代码做测试非常有用。RestClient：你不需要使用浏览器或则一个CURL程序来测试RESTAPI，通过RestClient可以在编辑器内交互式运行HTTP请求。

框架插件

对于大多数项目，为了节省开发时间，你往往会使用一个合适的开发框架来快速开发。在VSCode上，大多数框架都有相应的插件支持。但是依然有很多框架并没有对应的插件。Angular6：超过220万的安装量，支持TypeScript、HTML、AngularMaterialngRx、RxJS和FlexLayout。并且有172个Angular的代码片段。Angularv5snippets：超过270万的安装量，提供TypeScript、RxJS、HTML和Docker文件的代码片段。ReactNative/React/Reduxsnippetsfores6/es7：为这些框架提供ES6/ES7语法的代码片段。ReactNativeTools：提供智能提示、命令行工具和Debugging功能。Vetur：为Vue框架提供语法高亮、代码片段、Emmet、格式化、代码风格检查、智能提示、调试帮助等。有非常详细的文档:vetur。Ember：为Ember提供命令工具和智能提示。安装后，所有的embercli命令都可以使用。CordovaTools：为Cordova插件和Ionic框架提供支持。提供代码智能提示、调试辅助以及其他特性。jQueryCodeSnippets：提供超过130个jQuery代码片段。

测试插件

在软件开发中，测试是必可不少的一个环节，特别是那些要上线到生产环境的项目。你可以看看我们这篇讲测试的文章:JavaScriptTesting:UnitvsFunctionalvsIntegrationTests。下面是一些流行的测试插件：Mochasidebar：使用Mocha库来提供测试支持。使用该插件可以直接在代码中运行测试并将提示错误。ES6MochaSnippets：提供ES6语法的Mocha代码片段。充分利用箭头函数，尽量不使用大括号来保持代码的简洁，可配置允许使用分号。JasmineCodeSnippets：Jasmine测试框架的代码片段。ProtractorSnippets：Protractor框架的端到端(end-to-end)测试片段，支持JavaScript和Typescript。NodeTDD：为Node和JavaScript项目提供test-drivendevelopment支持。在代码更新的时候可以自动触发代码的测试。

其它很酷的插件

我把它们分类到awesome类别，是因为它们真的很酷。Quokka.js：一个很棒的调试工具，可以为您正在编写的代码提供实时反馈,能够预览变量的函数和计算值结果。请查看文档：文档PasteasJSON：快速将JSON数据转换为JavaScript代码。CodeMetrics：这是一个用来计算JavaScript和TypeScript代码复杂度的插件。

插件包

VSCode的插件市场有一个类型叫插件包。它实际上已一个相互关联的插件的集合，方便一起安装，协同使用。NodejsExtensionPack：包含了ESLint、npm、JavaScript(ES6)代码片段、node_modules搜索、NPM智能提示和文件路径智能提示。VSCodeforNode.js–DevelopmentPack：NPM智能提示，ESLint，Chrome调试器，CodeMetrics，Docker和导入包的开销计算。Vue.jsExtensionPack：包含大约12个VSCode插件，有些在本文没有提到，比如auto-rename-tag和auto-close-tag。IonicExtesionPack：包含许多用于Ionic、Angular、RxJS、Cordova和HTML开发的插件。

VSCode能够如此流行的一个原因就是拥有大量的高质量插件。它前所未有的提高了编码的效率。比如ESLint助你减少代码失误，DebuggerforChrome让你更加方便去Debugging。Node.js的智能引入提示让你可以让你正确引入所需模块，LiveServer和RESTClient可以让你省去频繁切换到外部工具的麻烦。小邹希望今天介绍的这些插件可以帮助你提高工作效率。