Angular Snippets (Version 13)

在日常开发工作中，经常需要频繁的创建Component，Directive，Service，Pipe，Ngrx片段，每次都徒手写一个，或者Copy一个，还是挺麻烦的，如果想要快速的写出一些代码片段，可以使用这个插件，非常的实用。

This extension for Visual Studio Code adds snippets for Angular for TypeScript and HTML.

提示的片段支持很多种，Angular片段，Ngrx片段，JS片段，HTML片段。

TypeScript Angular Snippets

Snippet	Purpose
a-component	component
a-component-inline	component with inline template
a-component-root	root app component
a-ctor-skip-self	angular NgModule's skipself constructor
a-directive	directive
a-guard-can-activate	CanActivate guard
a-guard-can-activate-child	CanActivateChild guard
a-guard-can-deactivate	CanDeactivate guard
a-guard-can-load	CanLoad guard
a-httpclient-get	httpClient.get with Rx Observable
a-http-interceptor	Empty Angular HttpInterceptor for HttpClient
a-http-interceptor-headers	Angular HttpInterceptor that sets headers for HttpClient
a-http-interceptor-logging	Angular HttpInterceptor that logs traffic for HttpClient
a-module	module
a-module-root	root app module
a-output-event	@Output event and emitter
a-pipe	pipe
a-preload-opt-in-strategy	custom preload strategy that allows choosing which routes to preload
a-preload-network-strategy	custom preload strategy that preloads based on network connectivity
a-resolver	resolver
a-routes	Route definition file
a-rxjs-import	import RxJs features
a-rxjs-operators	import RxJs operators
a-route-path-404	404 route path
a-route-path-default	default route path
a-route-path-with-children	route path with children
a-route-path-eager	eager route path
a-route-path-lazy	lazy route path
a-router-events	listen to one or more router events
a-route-params-subscribe	subscribe to route parameters
a-service	service with injectable provided in root
a-service-httpclient	service with HttpClient
a-subscribe	Rx Observable subscription
a-trackby	to create a trackby function in TypeScript for the ngFor

NgRx Snippets

Snippet	Purpose
a-ngrx-store-module	create an NgRx store module
a-ngrx-create-action	create an NgRx action with createAction
a-ngrx-create-action-props	create an NgRx action with createAction with props
a-ngrx-create-reducer	create an NgRx reducer with createReducer
a-ngrx-create-effect	create an NgRx effect with createEffect
a-ngrx-create-effect-api	create an NgRx effect with createEffect for an API call
a-ngrx-create-selector	create an NgRx selector with createSelector
a-ngrx-create-selector-props	create an NgRx selector with createSelector with props
a-ngrx-data-entity-data-module-import	add EntityDataModule
a-ngrx-data-entity-metadata	create the entity metadata for NgRx
a-ngrx-data-entity-collection-data-service

JavaScript Snippets

Snippet	Purpose
ex-simple-server	Node.js Express Server

HTML Snippets

Snippet	Purpose
a-class	[class] binding
a-select	control
a-style	[style] binding
a-ngClass	ngClass
a-ngFor	*ngFor
a-ngForAsync	*ngFor with async
a-ngFor-trackBy	*ngFor with trackBy
a-form	create a form tag with ngSubmit and form attributes
a-formArrayName	formArrayName
a-formControlName	formControlName
a-formGroup	formGroup
a-formGroupName	formGroupName
a-form-submit	create a submit button for a form
a-ngIf	*ngIf
a-ngIfElse	*ngIf with else
a-ngModel	ngModel
a-routerLink	routerLink
a-routerLink-param	routerLink with a route parameter
a-ngStyle	ngStyle
a-ngSwitch	ngSwitch
a-prej	show the JSON form of a model
a-preja	show the JSON form of a model, using async
a-ng-container	element
a-ng-template	element
a-ng-content	element

功能逆天了，太方便了。

Angular Language Service

在Angular中，如果你想在HTML模板中引用内部或者外部变量时，VSCode不会有提示功能。但是，作为开发者，你希望在模板中对引用的内部或外部变量时，有所提示，提高开发体验，那就可以使用Angular Language Service这个插件。

This extension provides a rich editing experience for Angular templates, both inline and external：

Completions lists
Go to definition
AOT Diagnostic messages
Quick info

这个插件基于内部或外部的变量，对Angular的模板提供丰富的编辑体验。对于模板中引用的变量有智能提示，还可以转到定义，这个功能实在是太有用了。

Code Spell Checker

这个插件是对代码中单词拼写错误的进行提示，妈妈在也不用担心我写错单词了。尽管大部分情况下，我们拼写英文单词出现了错误，虽然不影响阅读，但是显得不专业哦。

A basic spell checker that works well with camelCase code.

Code Runner

日常写一段JS代码做个测试什么的，用VSCode自带的运行工具有点麻烦，有没有一键运行的啊？当然是有了。

一键运行多种语言运行代码片段或代码文件: C，C+ + ，Java，JavaScript，PHP，Python，Perl，Perl 6，Ruby，Go，Lua，Groovy，PowerShell，BAT/CMD，BASH/SH，f # Script，f # (.NET 核心) ，C# 脚本，多到你想不到。