isual Studio Code是一个免费跨平台的开源代码编辑器，具有广泛的预构建扩展库，具备很多有用的附加功能。但是在使用过程中，我们有时不需要所有的功能，例如Python扩展（超过220万次安装）提供很多支持，IntelliSense、代码格式化等等，而我们往往指示想要快速查汝之行有用且重复的较小代码块，例如循环或条件语句。

现在已经有人编写了这种小的代码块，并且打包好供其他程序员使用。

为什么我们不使用 Visual Studio Code Marketplace，而是要选择"Snippets"呢？因为这种小的代码片段不仅可以在扩展类别中使用，也适用于不同语言、调试器、格式化程序等等。

由于 VS Code是运行在Windows、Linux和MacOS上的跨平台工具，而JavaScript正在成为各种跨平台项目的首选编程语言，所以今天就为大家推荐一些实用的JavaScript代码片段。评选标准主要是基于下载次数、评级以及个人主观评估。

JavaScript (ES6) Code Snippets

随着JavaScript的版本发展，ES6成为了新的JavaS核心语言标准，主流浏览器也实现了其很多功能。

为了帮助用户快速上手新功能，开发者Charalampos Karypidis发布了JavaScript (ES6) code snippets。

该代码片段包支持JavaScript和TypeScript，目前下载已超过41.5万次，评级为4.6。自首次发布以来，Charalampos Karypidis一直都在更新维护，所以不断有新功能出现，如1.4.0版本支持用户请求HTML文件。如果您也对开源项目有兴趣，可以去GitHub上查看补充。

这个代码片段包包含34个小片段： import and export、class helpers、 various methods和console methods。

Angular v4 TypeScript Snippets

最初由Google开发的AngularJS和Angular（基于TypeScript）的框架全部可以在VS Code extension marketplace 中找到。其余不兼容的框架几乎总是会出现在“XX JavaScript框架”类似的文章中。也许你现在还在看这种JavaScript顶级框架的文章，但是我已经在看 开发者John Papa为Angular 4.0.0开发的Angular v4 TypeScript Snippets。Angular v4 TypeScript Snippets三月刚刚发布，据说更快更小，同时也涵盖了很多新功能，如ahead-of-time视图引擎的改进，TypeScript 2.1和2.2兼容性，ES2015实验性构建等等。

目前Papa代码包已经被下载5.18万次，是JavaScript代码片段中下载量第一。该包中的42个片段可以分为三大类，TypeScript Angular Snippets、TypeScript RxJS Snippets (Reactive Extensions)和HTML Snippets。

使用该片段的方式与上述ES6片段相同，首先键入字母“a”，然后再输入片段的名称，直到您选择所需的选项为止。要插入一个新组件的shell代码，例如你开始输入“a-component”，直到你可以选择全名，你得到这个：

Angular v4 TypeScript片段包的平均评级为4.8，在GitHub上共获得312星，以及112位开发者的支持，拥有MIT认证。

Vue 2 Snippets

Vue.js是一个热门的JavaScript框架，StackFlow调查显示Vue.js已经呈现出快速应用的趋势，是StackFlow年度增长最快的，Backbone.js, Ember.js和Meteor等框架似乎已经开始进入到生命周期的后期了。

当你还在研究Vue是否能够打入框架的最前列时，已经有人走在了最前端。hollowtree发布了Vue 2 Snippets。Vue 2 Snippets基于vue.tmLanguage，支持vue（.vue）、HTML（.html的）、JavaScript（.js）、TypeScript（.ts）和pug（.pug）语言。

请点

该软件包包含82个片段，主要用于JavaScript，HTML和Vue Router功能。如果要收集错误，你可以使用字母“v”键入，直到找到VueConfigErrorHandler选项，按下ENTER键可以：

Vue.config.errorHandler=function（err，vm）{

//处理错误

}

所有命令都不以“v”开始，如果要快速插入渲染器，你可以使用字母“r”开始输入，直到找到渲染器选项，这样您可以：

const renderer=require（'vue-server-renderer'）.createRenderer（）

如果您必须对很多选项进行排序，那么没有一致的触发器模式可能会令人困惑，但使用情况会变得常规，有一点经验。

Vue 2 Snippets的安装近5.4万次，获得了4.9的评级，在GitHub上获得了九颗星，目前的发展比较积极规律。

React标准样式代码片段

开发者Timon van Spronsen发布了React 标准样式代码片段，比照ES6 语法中的JavaScript标准样式指南开发的React代码片段。

React是由Facebook创建和开源的流行框架。虽然Spronsen并不是安装量第一的Reactjs代码片段，

但是我还是建议希望遵循JavaScript标准样式的开发者使用这一产品，它的安装量达到21610，同时也为Karypidis项目提供了支持。

Spronsen说，他的片段基于babel-sublime-snippets package，可预见地提供了与Karypidis包相同的功能。支持以下文件类型：JavaScript（.js）; TypeScript（.ts）; JavaScript React（.jsx;）和TypeScript React（.tsx） 。

它包括51个片段，其中29个专门用于支持类型。例如，触发器“rccp [TAB key]”在类之后引入了一个带有prop类的类组件框架，如下所示：

该软件包评论不多，但5.0的评级还是比较难得的，GitHub项目获得了10颗星。

ES6 / ES7的React-Native / React / Redux代码片段

相信React Native是众多程序员的心头之爱，虽然我已经安装了完整的React Native Tools扩展，但是我相信EQuimper的ES6 / ES7软件包的React-Native / React / Redux代码片段对于功能需求范围较窄的程序员来说还是很有吸引力的。

它一共提供了30个片段，包括从导入到测试，例如生成组件类的ccs触发器，

该代码片段包虽然已经被安装了36000次，但是遗憾的是现在还没有评价。

Visual Studio Marketplace中仅在代码片段选项中搜索“JavaScript”就会出现105个相关结果，而且这些都是免费来源的，程序员还可以获取源代码，然后根据自己的需求来做定制化的修改。这么赞的资源，程序员快快行动起来吧。

/喜汤

编者按：Mario Hoyos在Medium上写了文章Tools I wish I had known about when I started coding，给新入行的开发工程师提供了几款好用的工具。

科技行业里，可供人们使用的工具成百上千，你要怎么知道用哪一种上手最合适呢？

拿最近刚进入编程这行的人来说吧，大量的工具信息堆砌过来其实毫无益处，反而会无从下手。我发现在自己的开发过程中，很多安装的扩展工具不仅没有真正起到助益作用，反而常常妨碍了正常的开发工作。

我不是专家，不过随着时间的推移，我还是编制了一份工具清单，这些工具已经证明对我非常有用。如果你刚刚开始学习怎么编程的话，这个清单能给你提供一些指导。如果你是个经验丰富的开发人员，也希望你能从中学到一些新的东西。

我将把这篇文章分为Chrome扩展程序和VS代码扩展扩展程序两部分。我知道还有其他的浏览器和文本编辑器，但是我想你当然只能在你能找到的工具里选择，所以还是别因为个人喜好而引起一场宗教般的争论。

请随便选。

Chrome扩展程序

现在设我是一位web开发人员，以Chrome为阵地。下面是一些能让我少花点时间的工具：

• WhatFont?——?名字就说明了一切。这是找出你最喜欢网站使用的字体的简单方法，这样你就可以为己所用了。

• Pesticide——?修改CSS的绝佳程序。当我试着学习匣子模型的时候，它简直就是救命稻草般的存在。

• Colorzilla?——用于复制确切颜色的一个网站，用它可以将颜色直接复制到剪贴板上，这样你就没必要花太多时间获得正确的RGBA组合了。

• CSS Peeper——查看网站使用的颜色时非常方便。在你一开始山寨你认为酷的网站的时候很管用。这个程序能让你查看它们的幕后的色彩方案。

• Wappalyzer?——想要获悉你在网站上看到的是什么技术，这个程序很有用。想知道某网站使用什么样的框架或者它承载了什么服务？这个照样管用。

• React Dev Tools——一款用于调试应用程序的工具。有一点要提一下，它只有在你编写React程序时才有用。

• Redux Dev Tools——一款用于调试应用程序的工具。有一点要提一下，它只有在你编写Redux程序时才有用。

• JSON Formatter?——让JSON在浏览器中看起来更一目了然的不二之选。也许麻烦的JSON让你苦不堪言，不过只要用了这个软件，找到你要找的东西，所花费的时间会大幅缩短。

• Vimeo Repeat and Speed?——加速Vimeo视频的绝佳工具。如果你像大多数的web开发人员一样观看视频教程，你就会知道用1.25倍的常规回放速度观看它们是多么的方便。本程序同时也有适用于YouTube的版本。

VS Code扩展程序

Visual Studio Code是我写代码时的不二之选。

每个人都有他自己喜欢的文本编辑器，我也不例外。不过，我还是想把这些扩展程序介绍给你，而它们对你所使用的大多数编辑器都适用。看看我最喜欢的扩展程序有哪些：

• Auto Rename Tag?——自动重命名成对的HTML标记。假如你创建了一个<p>标记。现在你想更改它。有了这个软件，你只需要更改一个就行，另一个会自动修改。从理论上来说，使用这个软件可以把你的工作效率提升一倍。

• HTML CSS Support?——HTML文档的CSS支持工具。该工具在获得一些简洁的语法高亮显示和代码建议方面非常有用。

• HTML Snippets?——这一工具在代码分段方面非常有用，可以为你节省大量的时间。它能跟Emmet配对，这样一来你甚至都不用再真正键入HTML了。

• Babel ES6/ES7?——JavaScript Babel的辅助工具。如果你用的是Babel，这个工具可以让你更容易区分代码。如果你喜欢JavaScript，那务必也不要错过这款软件。

• Bracket Pair Colorizer?——色彩可视化工具。如果你没有准确地括号，那这个工具对于发现因此导致的许多常见漏洞十分方便。

• ESLint?——你在编写代码的时候，利用这个软件可以轻易获取有关漏洞的提示，而且在编码过程中，它还可以帮助你养成良好的编码习惯。

• Guides?——这一工具可以被用来添加额外的指导行代码。这是另一个视觉提示，以确保你正确地括号了。

• JavaScript Console Utils?——使控制台日志记录变得更为简单可行。如果你像大多数开发人员一样，你会发现自己需要在调试流中登录到控制台（我知道我们应该使用调试器）。这个实用的程序使得创建有用的console.log()语句变得易如反掌。

• Code Spell Checker?——这一工具正如其名，是拼写检查程序。漏洞的的另一个常见来源是变量或函数名。这一拼写检查工具可以查找不常见的单词，而且还可以把我们用JavaScript编写的东西进行有效的审核。

• Git Lens?——可以让我们对某文件何时、以及由何人进行更改变得一目了然。当代码被破坏时，我们就能找到该负责任的人，而不是让你当替罪羊了。

• Path Intellisense?——文件路径自动完成程序。这样一来从其他文件中导入重要的东西就非常方便了。这一工具使文件导航变得轻而易举。

• Prettier?——自动代码格式化程序。忘掉那些你不得不手动缩进代码的日子吧，有了这个工具，事情就变得简单多啦。这个程序会比你自己做得更快更好。对这个程序我是鼎力推荐的。

• VSCode-Icons?——将图标添加到文件谱中。如果文件结构非常不科学，你的眼睛想罢工的话，这个程序可能会有所帮助。它对于你正在制作的任何文件都能提供有用的图标辅助，能使你更为轻易地区分看到的内容。

总结

你肯定也有自己中意的工具，这些工具对你的开发工作来说是必不可少的。也希望我上面提到的一些工具能够提高你的工作效率。

但是千万不要落入贪多不烂的陷阱，因为它可能耗费很多时间。

希望你能在评论区留下你最喜欢的工具，这样我们就可以共同进步了。