本文转自: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)

  1. Launch VS Code
  2. Quick Open (⌘+P)
  3. Enter the following command and press enter: 'ext install Angular-BeastCode'
  4. Choose extension (Author: Mikael Morlund)
  5. Reload VS Code

Installation (Windows, Linux)

  1. Launch VS Code
  2. Quick Open (Ctrl-Shift-P)
  3. Enter the following command and press enter: 'ext install Angular-BeastCode'
  4. Choose extension (Author: Mikael Morlund)
  5. 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的更多相关文章

  1. 如何创建一个简单的Visual Studio Code扩展

    注:本文提到的代码示例下载地址>How to create a simple extension for VS Code VS Code 是微软推出的一款轻量级的代码编辑器,免费,开源,支持多种 ...

  2. Visual Studio Code扩展

    Visual Studio Code扩展 注:本文提到的代码示例下载地址>How to create a simple extension for VS Code VS Code 是微软推出的一 ...

  3. TypeScript 5 Angular 2

    TypeScript 5 分钟快速入门 翻译:Angular 2 - TypeScript 5 分钟快速入门 原文地址:https://angular.io/docs/ts/latest/quicks ...

  4. Visual Studio Code扩展:

    Auto Close TagAuto Rename TagBeautifyChinese (Simplified) Language Pack for Visual Studio CodeClass ...

  5. Angular 个人深究(一)【Angular中的Typescript 装饰器】

    Angular 个人深究[Angular中的Typescript 装饰器] 最近进入一个新的前端项目,为了能够更好地了解Angular框架,想到要研究底层代码. 注:本人前端小白一枚,文章旨在记录自己 ...

  6. Angular:了解Typescript

    Angular是用Typescript构建的.因此在学习Angular之前有必要了解一下Typescript. [ 类型 ] Typescript增加了类型系统,好处是: 1. 有助于代码编写,预防在 ...

  7. angular源码分析:angular的整个加载流程

    在前面,我们讲了angular的目录结构.JQLite以及依赖注入的实现,在这一期中我们将重点分析angular的整个框架的加载流程. 一.从源代码的编译顺序开始 下面是我们在目录结构哪一期理出的an ...

  8. angular源码分析:angular中jqLite的实现——你可以丢掉jQuery了

    一.从function JQLite(element)函数开始. function JQLite(element) { if (element instanceof JQLite) { //情况1 r ...

  9. angular源码分析:angular中各种常用函数,比较省代码的各种小技巧

    angular的工具函数 在angular的API文档中,在最前面就是讲的就是angular的工具函数,下面列出来 angular.bind //用户将函数和对象绑定在一起,返回一个新的函数 angu ...

随机推荐

  1. 2018上IEC计算机高级语言(C)作业 第1次作业

    1.经过这几周的学习,总结一下学习的心得与体会.(不少于100字:10分) 学习c语言已经一个学期了,刚开始学习的时候老是感觉力不从心.虽然认真听课了, 但是并不能理解它.这种情况到了后来才有所改变. ...

  2. HTML语言

    复习: 1.Web项目的部署结构  静态Web技术(客户端技术):提供的内容任何人在任何时间访问都是一样的 HTML/CSS/JS/Flash.... 动态Web技术(服务器端技术):提供的内容不同人 ...

  3. 别人的Linux私房菜(6)文件权限与目录配置

    账号与一般身份用户存放在/etc/passwd文件中 个人密码存放在/etc/shadow文件中 Linux所有组名存放在/etc/group中 ls -al查看所有信息并显示权限等 文件权限的10字 ...

  4. sock5协议转换http协议工具polipo使用笔记(Centos7)

    一.安装 Shadowsocks使用socks5协议,而终端很多工具目前只支持http和https等协议,所以我们为终端设置Shadowsocks的思路就是将socks5协议转换成http协议,然后为 ...

  5. validatord的使用方法理解

    今天是周日,自己已经在公司上班一周啦,可是这是我感觉最难熬 一周之一,上一次还是在高考失利的时候,自己整整一个月没有出去,在家里呆着,不知道干什么,这一此自己也是,感觉自己很难在这个公司熬下去,但是, ...

  6. swiper,一个页面使用多个轮播

    代码示例: <html> <head> <link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper. ...

  7. php SQL 防注入的一些经验

    产生原因 一方面自己没这方面的意识,有些数据没有经过严格的验证,然后直接拼接 SQL 去查询.导致漏洞产生,比如: $id = $_GET['id']; $sql = "SELECT nam ...

  8. while循环 格式化输出 密码本 编码的初识

    第二天课程整理 while 循环 why : while ' 循环' 的意思 what : while 无限循环 how : 1.基本结构 while + 条件 循环的代码 初识循环 while tr ...

  9. JavaScript中JSON对象和JSON字符串的相互转化

    一.JSON字符串转换为JSON对象 var str = '{"name":"cxh","sex":"man",&quo ...

  10. 使用js做LeetCode

    概述 无意中得知了LeetCode这个刷题网站, 深得我意. 其实作为一个程序员, 我是很看重写基础代码的, 因为这个写熟了, 以后学各种语言就不会太困难. 所以我觉得有必要把这件事记下来, 供以后开 ...