正文

[转]VS Code 扩展 Angular 6 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout

IP云
IP云V管理员/6 阅读
09/01
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

PrefixDescription
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

PostfixDescription
-cheatsheetCheat 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

SnippetDescription
cli-cheatsheetCli Cheat Sheet
e-atbrExpectAsync toBeResolved
e-ntbExpect Not toBe
e-ntbdExpect not toBe Defined
e-ntbfExpect not toBe Falsy
e-ntbnExpect Not toBeNull
e-ntbtExpect not toBe Truthy
e-ntbuExpect not toBe Undefined
e-nthbcExpect Not toHaveBeenCalled
e-ntmExpect Not toMatch
e-ntmrExpect Not toMatch regex
e-tbExpect toBe
e-tbctExpect toBeCloseTo
e-tbdExpect toBe Defined
e-tbfExpect toBe Falsy
e-tbgtExpect toBeGreaterThan
e-tbgtoeExpect toBeGreaterThanOrEqual
e-tbltExpect toBeLessThan
e-tbltoeExpect toBeLessThanOrEqual
e-tbnExpect toBeNull
e-tbtExpect toBe Truthy
e-tbuExpect toBe Undefined
e-thbcExpect toHaveBeenCalled
e-thbcwExpect toHaveBeenCalledWith
e-thrtExpect toHaveReturnedTimes(2)
e-tmExpect toMatch
e-tmrExpect toMatch regex
e-tmsJest Expect toMatchSnapshot
fx-colFlex Layout Column
fx-col-elementFlex Layout Column with Element
fx-col-reverseFlex Layout Reverse Column
fx-importFlex Layout Import
fx-itemFlex Layout Item
fx-item-alignFlex Layout Item with fxFlexAlign
fx-item-fillFlex Layout Item with fxFlexFill
fx-item-offsetFlex Layout Item with fxFlexOffset
fx-item-orderFlex Layout Item with fxFlexOrder
fx-layoutFlex Layout Property
fx-layout-alignFlex Layout Align Property
fx-layout-gapFlex Layout Gap Property
fx-rowFlex Layout Row
fx-row-reverseFlex Layout Reverse Row
m-buttonRectangular Material button w/ no elevation.
m-button-fabCircular button w/ elevation.
m-button-fab-miniSmall circular button w/ elevation.
m-button-iconCircular Material button with a transparent background
m-button-raisedRectangular Material button w/ elevation.
m-button-toggleMaterial toggle button
m-cardMaterial Basic Card
m-card-fullMaterial Card
m-checkboxMaterial Checkbox
m-checkbox-ngmodelMaterial Checkbox ngmodel
m-chipMaterial Chip
m-chip-listMaterial Chip List
m-chip-list-stackedMaterial Chip Stacked List
m-datepickerMaterial Datepicker
m-dividerMaterial Divider
m-divider-insetMaterial Inset Divider
m-divider-verticalMaterial Vertical Divider
m-expansion-panelMaterial Expansion Panel
m-grid-listMaterial Grid List
m-iconMaterial Icon
m-icon-badgeMaterial Icon with a Badge
m-icon-fontawesomeMaterial Font Awesome Icon
m-icon-svgMaterial SVG Icon
m-inputMaterial Input Textbox
m-listMaterial List
m-list-itemMaterial List Item
m-list-ngforMaterial List ngFor
m-paginatorMaterial Paginator
m-progress-barMaterial Determinate Progress Bar
m-progress-bar-bufferMaterial Buffer Progress Bar
m-progress-bar-indeterminateMaterial indeterminate Progress Bar
m-progress-bar-queryMaterial Query Progress Bar
m-radiobuttonMaterial Radio Button
m-radiobutton-optionMaterial Radio Button Option
m-selectMaterial Select
m-slide-toggleMaterial Slide toggle
m-sliderMaterial Slider
m-slider-thumbLabelMaterial Slider thumbLabel
m-slider-tickIntervalMaterial Slider tickInterval
m-slider-tickInterval-autoMaterial Slider tickInterval Auto
m-slider-verticalMaterial Vertical Slider
m-spinnerMaterial Determinate Spinner
m-spinner-indeterminateMaterial Indeterminate Spinner
m-stepMaterial Vertical Stepper
m-stepper-horizontalMaterial Horizontal Stepper
m-stepper-verticalMaterial Vertical Stepper
m-tabMaterial Tab
m-tab-groupMaterial Tab Group
m-tableMaterial Table
m-table-columnMaterial Table Column
m-toolbarMaterial toolbar
m-toolbar-multiRowMaterial Toolbar with multiple rows
m-toolbar-rowMaterial toolbar row
m-tooltipMaterial Tooltip
m-tooltip-positionMaterial Tooltip position
m-tooltip-with-positionMaterial Tooltip with position
ng-afterContentCheckedLifecycle hook: Called after every check of the component's or directive's content
ng-afterContentInitLifecycle hook: Called after ngOnInit when the component's or directive's content has been initialized
ng-afterViewCheckedLifecycle hook: Called after every check of the component's view. Applies to components only
ng-afterViewInitLifecycle hook: Called after ngAfterContentInit when the component's view has been initialized
ng-binding-onewayProperty: [property]="expression"
ng-binding-twowayTwo-way data binding with the NgModel
ng-bootstrapingBootstraping example
ng-buttonA button element with a click event
ng-button-submitA submit button element with a click event
ng-classCSS class
ng-clickClick event
ng-componentComponent with template and style urls
ng-component-inlineComponent with inline Template and Styles
ng-component-value-accessorAngular Component With NG_VALUE_ACCESSOR
ng-confThe World's Original Angular Conference
ng-controllerUse component instead.
ng-debugpre obj pipe json
ng-debug-asyncpre obj pipe async pipe json
ng-directiveDirective template
ng-directive-attributeAttribute directive
ng-directive-cssCSS directive
ng-doCheckLifecycle hook: Called every time that the input properties of a component or a directive are checked
ng-eventEvent: (event) = "onEvent()"
ng-filterFor 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-forFor-loop directive
ng-for-indexFor-loop directive with index
ng-for-liFor-loop directive with li element
ng-for-trackByFor-loop directive with trackBy
ng-girlsAngular Girls
ng-hideUsage: Bind to the hidden property.
ng-hrefUsage: Bind to the href property.
ng-http-getHttp observable get request
ng-http-get-postHttp observable get & post request
ng-http-interceptorIntercept an outgoing HttpRequest and optionally transform it or the response.
ng-httpClient-getHttpClient observable get request
ng-ifIf directive: *ngIf="expression"
ng-if-elsev4: If else directive: *ngIf="expression; else"
ng-if-then-elsev4: If then else directive: *ngIf="expression; then; else"
ng-importimport module or component from path;
ng-inputClass Input Property
ng-interpolationInterpolation: {{ interpolation }}
ng-material-moduleApp Material Module
ng-modelngModel directive: [(ngModel)]="name"
ng-moduleFeature Module
ng-module-rootApp root module
ng-ngOnChangesLifecycle hook: Called before any other lifecycle hook
ng-onDestroyLifecycle hook: Called before the instance is destroyed
ng-onInitLifecycle hook: Called after the constructor
ng-orderByFor 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-outputClass Output Event
ng-pipePipe template
ng-pipe-asyncAsync pipe - Usage: observable_or_promise_expression | async
ng-pipe-currencyCurrency pipe - Usage: money | currency:'EUR'
ng-pipe-dateDate pipe - Default format: 09/15/1971
ng-pipe-date-customDate pipe - Format: "MM/dd/yy" = 09/15/71
ng-pipe-date-fullFull date pipe - Format: Wednesday, September 15, 1971
ng-pipe-date-shortShort date pipe - Format: 09/15/1971
ng-pipe-decimalDecimal pipe - Usage: number_expression | decimal[:digitInfo]
ng-pipe-exampleAngular pipe example
ng-pipe-jsonJson pipe - Usage: object | json
ng-pipe-lowercaseLowercase pipe
ng-pipe-percentPercent pipe - Usage: number_expression | percent[:digitInfo]
ng-pipe-sliceSlice pipe - Usage: array_or_string_expression | slice:start[:end]
ng-pipe-titlecasev4: Titlecase pipe
ng-pipe-uppercaseUppercase pipe
ng-propertyProperty: [property]="expression"
ng-repeatUse ngFor instead.
ng-route-guard-canactivateCanActivate Guard Route
ng-route-guard-canactivatechildCanActivateChild Route
ng-route-guard-candeactivateCanDeactivate Guard Route
ng-route-guard-canloadCanLoad Guard Route
ng-route-guard-resolveResolve Guard Route
ng-routerRouter template
ng-router-appmoduleRoutes to include in root module
ng-router-attributeRouter link
ng-router-featuremoduleRoutes to include in a feature module
ng-router-linkRouter link
ng-router-linkActiveRouter active link
ng-router-outletRouter outlet element
ng-router-outlet-nameRouter outlet element with name
ng-serviceBasic service
ng-showUsage: Bind to the hidden property.
ng-srcUsage: Bind to the src property.
ng-styleCSS style
ng-switchSwitch template
ng-test-directiveTODO
ng-test-serviceTODO
ng-validatorAngular validator snippet
ngrx-action-constngRx Single action
ngrx-action-creatorngRx Single action with const
ngrx-action-creator-enumngRx Single action creator for enum
ngrx-actionsngRx Actions class
ngrx-actiontype-enumngRx enum action type
ngrx-actiontypes-enumngRx enum action types
ngrx-effectngRx Effect
ngrx-modulengRx Root Module
ngrx-reducerngRx Reducer
ngrx-utilngRx Util
ngxs-actionNgxs Action
ngxs-action-payloadNgxs Action with Payload
ngxs-selectNgxs Select
ngxs-stateNgxs State
ngxs-state-modelNgxs State Model
ngxs-storeNgxs Store
ngxs-store-importNgxs Import Store
nx-cheatsheetNx Cheat Sheet
nx-ngrx-cheatsheetNx Cheat Sheet
pwa-link-manifestPWA Link Manifest
pwa-manifestPWA Json Manifest
rx-import-observableRxJS Import Observable
rx-import-operatorRxJS Import Add Operator
rx-import-subjectRxJS Import Subject
rx-mergeMapRxJS MergeMap Example
sw-registerRegister Service Worker
sw-register-and-checkRegister Service Worker and Check
t-afterAllafterAll
t-afterEachafterEach
t-beforeAllbeforeAll
t-beforeEachbeforeEach
t-component-asyncTODO
t-component-synchronousTODO
t-describe-itDescribe, It & Expect
t-itIt
t-iteIt and Expect
t-pipeTest a pipe
watA 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. 写在最前面 - 每天5分钟玩转 OpenStack（1）

    <每天5分钟玩转 OpenStack>是一个 OpenStack 教程,这是第 1 篇. 这个教程有下面两个特点: 系统讲解 OpenStack 从架构到各个组件:从整体到细节逐一讨论 重 ...

  2. 【2】认识Bootstrap

    作为当下最流行的前端开发框架Bootstrap,它可大大简化网站开发过程,从而深受广大开发者的喜欢,当然你去它的官网中文网站就能看到大大的小标定义:“简洁.直观.强悍.移动设备优先的前端开发框架,让w ...

  3. JAVA 保留两位小数的四种方法

    import java.math.BigDecimal; import java.text.DecimalFormat; import java.text.NumberFormat; publiccl ...

  4. AJAX及其跨域的主要解决方法

    AJAX = Asynchronous JavaScript andXML(异步的 JavaScript 和 XML).通过在后台与服务器进行少量数据交换,使网页实现异步更新.要明白异步交互可以通过同 ...

  5. Java多线程（一）多线程基础

    一.进程 进程是操作系统结构的基础:是一次程序的执行:是一个程序及其数据在处理机上顺序执行时所发生的活动.操作系统中,几乎所有运行中的任务对应一条进程(Process).一个程序进入内存运行,即变成一 ...

  6. CSS hover

    CSS hover hover 鼠标移动到当前标签上时,以下css属性才能生效 <!DOCTYPE html> <html lang="en"> <h ...

  7. Javascript 对象复制

    如果对象只是一个数据集,可采用json化再反json化的方式克隆一个对象,这个过程会丢失对象的方法.效率比较低. 可以采用如下递归的方式复制一个对象. function clone(target) { ...

  8. metasploit的安装

    //直接安装 apt-get update apt-get install metasploit-framework //连接和安装postgresql apt-get install postgre ...

  9. MVC003之调用BLL层方法&lpar;BLL层调用了WebService&rpar;

    项目又BLL类库,在类库中引用了webservice.在web层调用BLL的方法时 错误如下: 在 ServiceModel 客户端配置部分中,找不到引用协定“OAService.IntranetSe ...

  10. bitnami redmine配置全过程

    常见问题: 我在自己的机器上面配置完毕以后,移植到另外一台机器上面,登陆页面总是在检查network,并且最后网络加载失败,不论我是用桥接还是NAT方式连接.登陆系统以后,我尝试连接网络失败,尝试执行 ...