Visual 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个相关结果,而且这些都是免费来源的,程序员还可以获取源代码,然后根据自己的需求来做定制化的修改。这么赞的资源,程序员快快行动起来吧。