[转]VS Code 扩展 Angular 6 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout
本文转自:https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode
VSCode Angular TypeScript & Html Snippets
Visual Studio Code TypeScript and Html snippets and code examples for Angular 2,4,5 & 6.
All code snippets are based on and follow the Angular style guide https://angular.io/docs/ts/latest/guide/style-guide.html
Snippet Prefixes
Prefix | Description |
---|---|
ng- | Angular Snippets |
fx- | Angular Flex Layout Snippets |
ngrx- | Angular NgRx Snippets |
ngxs- | Angular Ngxs Snippets |
m- | Angular Material Design Snippets |
rx- | RxJS Snippets for both TypeScript and JavaScript |
sw- | Service Workers Snippets |
t- | Test Snippets |
e- | Test Expect Snippets |
pwa- | Progressive Web Applications Snippets |
Snippet Postfix
Postfix | Description |
---|---|
-cheatsheet | Cheat Sheet |
Important
This extension is optimized for developers that use Angular and are no longer using AngularJS (Angular 1). If you type in AngularJS keywords, it will suggest an Angular solutions. This is by design and meant to help developers learn how AngularJS concepts and techniques map to Angular.
See example below for ng-repeat and ng-click:
Usage
All Angular snippets starts with "ng-". Multiple snippets come in multiple variations. For instance when you want to create a new component you can choose between having the template and css inline or not:
- ng-component
- ng-component-inline
ng-component
ng-for
ng-for currently has even more variations, so make sure you pick the one you want before you press enter:
- ng-for
- ng-for-index
- ng-for-li
- ng-for-trackBy
Angular Material
All Material snippets starts with "m-" and there are now over 50 Material snippets in this package.
Pro Tip
You don't need to type any dashes: "ngrxr" -> "ng-rx-reducer" snippet
TypeScript & Html Snippets
Snippet | Description |
---|---|
cli-cheatsheet | Cli Cheat Sheet |
e-atbr | ExpectAsync toBeResolved |
e-ntb | Expect Not toBe |
e-ntbd | Expect not toBe Defined |
e-ntbf | Expect not toBe Falsy |
e-ntbn | Expect Not toBeNull |
e-ntbt | Expect not toBe Truthy |
e-ntbu | Expect not toBe Undefined |
e-nthbc | Expect Not toHaveBeenCalled |
e-ntm | Expect Not toMatch |
e-ntmr | Expect Not toMatch regex |
e-tb | Expect toBe |
e-tbct | Expect toBeCloseTo |
e-tbd | Expect toBe Defined |
e-tbf | Expect toBe Falsy |
e-tbgt | Expect toBeGreaterThan |
e-tbgtoe | Expect toBeGreaterThanOrEqual |
e-tblt | Expect toBeLessThan |
e-tbltoe | Expect toBeLessThanOrEqual |
e-tbn | Expect toBeNull |
e-tbt | Expect toBe Truthy |
e-tbu | Expect toBe Undefined |
e-thbc | Expect toHaveBeenCalled |
e-thbcw | Expect toHaveBeenCalledWith |
e-thrt | Expect toHaveReturnedTimes(2) |
e-tm | Expect toMatch |
e-tmr | Expect toMatch regex |
e-tms | Jest Expect toMatchSnapshot |
fx-col | Flex Layout Column |
fx-col-element | Flex Layout Column with Element |
fx-col-reverse | Flex Layout Reverse Column |
fx-import | Flex Layout Import |
fx-item | Flex Layout Item |
fx-item-align | Flex Layout Item with fxFlexAlign |
fx-item-fill | Flex Layout Item with fxFlexFill |
fx-item-offset | Flex Layout Item with fxFlexOffset |
fx-item-order | Flex Layout Item with fxFlexOrder |
fx-layout | Flex Layout Property |
fx-layout-align | Flex Layout Align Property |
fx-layout-gap | Flex Layout Gap Property |
fx-row | Flex Layout Row |
fx-row-reverse | Flex Layout Reverse Row |
m-button | Rectangular Material button w/ no elevation. |
m-button-fab | Circular button w/ elevation. |
m-button-fab-mini | Small circular button w/ elevation. |
m-button-icon | Circular Material button with a transparent background |
m-button-raised | Rectangular Material button w/ elevation. |
m-button-toggle | Material toggle button |
m-card | Material Basic Card |
m-card-full | Material Card |
m-checkbox | Material Checkbox |
m-checkbox-ngmodel | Material Checkbox ngmodel |
m-chip | Material Chip |
m-chip-list | Material Chip List |
m-chip-list-stacked | Material Chip Stacked List |
m-datepicker | Material Datepicker |
m-divider | Material Divider |
m-divider-inset | Material Inset Divider |
m-divider-vertical | Material Vertical Divider |
m-expansion-panel | Material Expansion Panel |
m-grid-list | Material Grid List |
m-icon | Material Icon |
m-icon-badge | Material Icon with a Badge |
m-icon-fontawesome | Material Font Awesome Icon |
m-icon-svg | Material SVG Icon |
m-input | Material Input Textbox |
m-list | Material List |
m-list-item | Material List Item |
m-list-ngfor | Material List ngFor |
m-paginator | Material Paginator |
m-progress-bar | Material Determinate Progress Bar |
m-progress-bar-buffer | Material Buffer Progress Bar |
m-progress-bar-indeterminate | Material indeterminate Progress Bar |
m-progress-bar-query | Material Query Progress Bar |
m-radiobutton | Material Radio Button |
m-radiobutton-option | Material Radio Button Option |
m-select | Material Select |
m-slide-toggle | Material Slide toggle |
m-slider | Material Slider |
m-slider-thumbLabel | Material Slider thumbLabel |
m-slider-tickInterval | Material Slider tickInterval |
m-slider-tickInterval-auto | Material Slider tickInterval Auto |
m-slider-vertical | Material Vertical Slider |
m-spinner | Material Determinate Spinner |
m-spinner-indeterminate | Material Indeterminate Spinner |
m-step | Material Vertical Stepper |
m-stepper-horizontal | Material Horizontal Stepper |
m-stepper-vertical | Material Vertical Stepper |
m-tab | Material Tab |
m-tab-group | Material Tab Group |
m-table | Material Table |
m-table-column | Material Table Column |
m-toolbar | Material toolbar |
m-toolbar-multiRow | Material Toolbar with multiple rows |
m-toolbar-row | Material toolbar row |
m-tooltip | Material Tooltip |
m-tooltip-position | Material Tooltip position |
m-tooltip-with-position | Material Tooltip with position |
ng-afterContentChecked | Lifecycle hook: Called after every check of the component's or directive's content |
ng-afterContentInit | Lifecycle hook: Called after ngOnInit when the component's or directive's content has been initialized |
ng-afterViewChecked | Lifecycle hook: Called after every check of the component's view. Applies to components only |
ng-afterViewInit | Lifecycle hook: Called after ngAfterContentInit when the component's view has been initialized |
ng-binding-oneway | Property: [property]="expression" |
ng-binding-twoway | Two-way data binding with the NgModel |
ng-bootstraping | Bootstraping example |
ng-button | A button element with a click event |
ng-button-submit | A submit button element with a click event |
ng-class | CSS class |
ng-click | Click event |
ng-component | Component with template and style urls |
ng-component-inline | Component with inline Template and Styles |
ng-component-value-accessor | Angular Component With NG_VALUE_ACCESSOR |
ng-conf | The World's Original Angular Conference |
ng-controller | Use component instead. |
ng-debug | pre obj pipe json |
ng-debug-async | pre obj pipe async pipe json |
ng-directive | Directive template |
ng-directive-attribute | Attribute directive |
ng-directive-css | CSS directive |
ng-doCheck | Lifecycle hook: Called every time that the input properties of a component or a directive are checked |
ng-event | Event: (event) = "onEvent()" |
ng-filter | For performance reasons, no comparable pipe exists in Angular 2. Do all your filtering in the component. If you need the same filtering code in several templates, consider building a custom pipe. |
ng-for | For-loop directive |
ng-for-index | For-loop directive with index |
ng-for-li | For-loop directive with li element |
ng-for-trackBy | For-loop directive with trackBy |
ng-girls | Angular Girls |
ng-hide | Usage: Bind to the hidden property. |
ng-href | Usage: Bind to the href property. |
ng-http-get | Http observable get request |
ng-http-get-post | Http observable get & post request |
ng-http-interceptor | Intercept an outgoing HttpRequest and optionally transform it or the response. |
ng-httpClient-get | HttpClient observable get request |
ng-if | If directive: *ngIf="expression" |
ng-if-else | v4: If else directive: *ngIf="expression; else" |
ng-if-then-else | v4: If then else directive: *ngIf="expression; then; else" |
ng-import | import module or component from path; |
ng-input | Class Input Property |
ng-interpolation | Interpolation: {{ interpolation }} |
ng-material-module | App Material Module |
ng-model | ngModel directive: [(ngModel)]="name" |
ng-module | Feature Module |
ng-module-root | App root module |
ng-ngOnChanges | Lifecycle hook: Called before any other lifecycle hook |
ng-onDestroy | Lifecycle hook: Called before the instance is destroyed |
ng-onInit | Lifecycle hook: Called after the constructor |
ng-orderBy | For performance reasons, no comparable pipe exists in Angular 2. Instead, use component code to order or sort results. If you need the same ordering or sorting code in several templates, consider building a custom pipe. |
ng-output | Class Output Event |
ng-pipe | Pipe template |
ng-pipe-async | Async pipe - Usage: observable_or_promise_expression | async |
ng-pipe-currency | Currency pipe - Usage: money | currency:'EUR' |
ng-pipe-date | Date pipe - Default format: 09/15/1971 |
ng-pipe-date-custom | Date pipe - Format: "MM/dd/yy" = 09/15/71 |
ng-pipe-date-full | Full date pipe - Format: Wednesday, September 15, 1971 |
ng-pipe-date-short | Short date pipe - Format: 09/15/1971 |
ng-pipe-decimal | Decimal pipe - Usage: number_expression | decimal[:digitInfo] |
ng-pipe-example | Angular pipe example |
ng-pipe-json | Json pipe - Usage: object | json |
ng-pipe-lowercase | Lowercase pipe |
ng-pipe-percent | Percent pipe - Usage: number_expression | percent[:digitInfo] |
ng-pipe-slice | Slice pipe - Usage: array_or_string_expression | slice:start[:end] |
ng-pipe-titlecase | v4: Titlecase pipe |
ng-pipe-uppercase | Uppercase pipe |
ng-property | Property: [property]="expression" |
ng-repeat | Use ngFor instead. |
ng-route-guard-canactivate | CanActivate Guard Route |
ng-route-guard-canactivatechild | CanActivateChild Route |
ng-route-guard-candeactivate | CanDeactivate Guard Route |
ng-route-guard-canload | CanLoad Guard Route |
ng-route-guard-resolve | Resolve Guard Route |
ng-router | Router template |
ng-router-appmodule | Routes to include in root module |
ng-router-attribute | Router link |
ng-router-featuremodule | Routes to include in a feature module |
ng-router-link | Router link |
ng-router-linkActive | Router active link |
ng-router-outlet | Router outlet element |
ng-router-outlet-name | Router outlet element with name |
ng-service | Basic service |
ng-show | Usage: Bind to the hidden property. |
ng-src | Usage: Bind to the src property. |
ng-style | CSS style |
ng-switch | Switch template |
ng-test-directive | TODO |
ng-test-service | TODO |
ng-validator | Angular validator snippet |
ngrx-action-const | ngRx Single action |
ngrx-action-creator | ngRx Single action with const |
ngrx-action-creator-enum | ngRx Single action creator for enum |
ngrx-actions | ngRx Actions class |
ngrx-actiontype-enum | ngRx enum action type |
ngrx-actiontypes-enum | ngRx enum action types |
ngrx-effect | ngRx Effect |
ngrx-module | ngRx Root Module |
ngrx-reducer | ngRx Reducer |
ngrx-util | ngRx Util |
ngxs-action | Ngxs Action |
ngxs-action-payload | Ngxs Action with Payload |
ngxs-select | Ngxs Select |
ngxs-state | Ngxs State |
ngxs-state-model | Ngxs State Model |
ngxs-store | Ngxs Store |
ngxs-store-import | Ngxs Import Store |
nx-cheatsheet | Nx Cheat Sheet |
nx-ngrx-cheatsheet | Nx Cheat Sheet |
pwa-link-manifest | PWA Link Manifest |
pwa-manifest | PWA Json Manifest |
rx-import-observable | RxJS Import Observable |
rx-import-operator | RxJS Import Add Operator |
rx-import-subject | RxJS Import Subject |
rx-mergeMap | RxJS MergeMap Example |
sw-register | Register Service Worker |
sw-register-and-check | Register Service Worker and Check |
t-afterAll | afterAll |
t-afterEach | afterEach |
t-beforeAll | beforeAll |
t-beforeEach | beforeEach |
t-component-async | TODO |
t-component-synchronous | TODO |
t-describe-it | Describe, It & Expect |
t-it | It |
t-ite | It and Expect |
t-pipe | Test a pipe |
wat | A lightning talk by Gary Bernhardt from CodeMash 2012. ng-wat talk by Shai Reznik in 2015 |
Installation (Mac)
- Launch VS Code
- Quick Open (⌘+P)
- Enter the following command and press enter: 'ext install Angular-BeastCode'
- Choose extension (Author: Mikael Morlund)
- Reload VS Code
Installation (Windows, Linux)
- Launch VS Code
- Quick Open (Ctrl-Shift-P)
- Enter the following command and press enter: 'ext install Angular-BeastCode'
- Choose extension (Author: Mikael Morlund)
- Reload VS Code
Emmets
If you want intellisense to show emmets before the snippets, you can force the emmets suggestions to show up at the top, by add the following to your editor user settings:
{
"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "top"
}
Feedback
Please send any feedback or suggestions to @Mike_BeastCode (Twitter) or create an issue on GitHub.
Open Source
This is an open source project and if you want to contribute I've added issues on github that are easy to start with.
Disclaimer
Important: This extension due to the nature of it's purpose will create files on your hard drive and if necessary create the respective folder structure. While it should not override any files during this process, I'm not giving any guarantees or take any responsibility in case of lost data.
License
MIT
[转]VS Code 扩展 Angular 6 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout的更多相关文章
- 如何创建一个简单的Visual Studio Code扩展
注:本文提到的代码示例下载地址>How to create a simple extension for VS Code VS Code 是微软推出的一款轻量级的代码编辑器,免费,开源,支持多种 ...
- Visual Studio Code扩展
Visual Studio Code扩展 注:本文提到的代码示例下载地址>How to create a simple extension for VS Code VS Code 是微软推出的一 ...
- TypeScript 5 Angular 2
TypeScript 5 分钟快速入门 翻译:Angular 2 - TypeScript 5 分钟快速入门 原文地址:https://angular.io/docs/ts/latest/quicks ...
- Visual Studio Code扩展:
Auto Close TagAuto Rename TagBeautifyChinese (Simplified) Language Pack for Visual Studio CodeClass ...
- Angular 个人深究(一)【Angular中的Typescript 装饰器】
Angular 个人深究[Angular中的Typescript 装饰器] 最近进入一个新的前端项目,为了能够更好地了解Angular框架,想到要研究底层代码. 注:本人前端小白一枚,文章旨在记录自己 ...
- Angular:了解Typescript
Angular是用Typescript构建的.因此在学习Angular之前有必要了解一下Typescript. [ 类型 ] Typescript增加了类型系统,好处是: 1. 有助于代码编写,预防在 ...
- angular源码分析:angular的整个加载流程
在前面,我们讲了angular的目录结构.JQLite以及依赖注入的实现,在这一期中我们将重点分析angular的整个框架的加载流程. 一.从源代码的编译顺序开始 下面是我们在目录结构哪一期理出的an ...
- angular源码分析:angular中jqLite的实现——你可以丢掉jQuery了
一.从function JQLite(element)函数开始. function JQLite(element) { if (element instanceof JQLite) { //情况1 r ...
- angular源码分析:angular中各种常用函数,比较省代码的各种小技巧
angular的工具函数 在angular的API文档中,在最前面就是讲的就是angular的工具函数,下面列出来 angular.bind //用户将函数和对象绑定在一起,返回一个新的函数 angu ...
随机推荐
- 2018上IEC计算机高级语言(C)作业 第1次作业
1.经过这几周的学习,总结一下学习的心得与体会.(不少于100字:10分) 学习c语言已经一个学期了,刚开始学习的时候老是感觉力不从心.虽然认真听课了, 但是并不能理解它.这种情况到了后来才有所改变. ...
- HTML语言
复习: 1.Web项目的部署结构 静态Web技术(客户端技术):提供的内容任何人在任何时间访问都是一样的 HTML/CSS/JS/Flash.... 动态Web技术(服务器端技术):提供的内容不同人 ...
- 别人的Linux私房菜(6)文件权限与目录配置
账号与一般身份用户存放在/etc/passwd文件中 个人密码存放在/etc/shadow文件中 Linux所有组名存放在/etc/group中 ls -al查看所有信息并显示权限等 文件权限的10字 ...
- sock5协议转换http协议工具polipo使用笔记(Centos7)
一.安装 Shadowsocks使用socks5协议,而终端很多工具目前只支持http和https等协议,所以我们为终端设置Shadowsocks的思路就是将socks5协议转换成http协议,然后为 ...
- validatord的使用方法理解
今天是周日,自己已经在公司上班一周啦,可是这是我感觉最难熬 一周之一,上一次还是在高考失利的时候,自己整整一个月没有出去,在家里呆着,不知道干什么,这一此自己也是,感觉自己很难在这个公司熬下去,但是, ...
- swiper,一个页面使用多个轮播
代码示例: <html> <head> <link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper. ...
- php SQL 防注入的一些经验
产生原因 一方面自己没这方面的意识,有些数据没有经过严格的验证,然后直接拼接 SQL 去查询.导致漏洞产生,比如: $id = $_GET['id']; $sql = "SELECT nam ...
- while循环 格式化输出 密码本 编码的初识
第二天课程整理 while 循环 why : while ' 循环' 的意思 what : while 无限循环 how : 1.基本结构 while + 条件 循环的代码 初识循环 while tr ...
- JavaScript中JSON对象和JSON字符串的相互转化
一.JSON字符串转换为JSON对象 var str = '{"name":"cxh","sex":"man",&quo ...
- 使用js做LeetCode
概述 无意中得知了LeetCode这个刷题网站, 深得我意. 其实作为一个程序员, 我是很看重写基础代码的, 因为这个写熟了, 以后学各种语言就不会太困难. 所以我觉得有必要把这件事记下来, 供以后开 ...