当前位置：首页 > 软件库 > Web应用开发 > Web框架 >

vscode-angular-snippets

Angular Snippets for VS Code

授权协议 MIT License

开发语言 JavaScript

所属分类 Web应用开发、 Web框架

软件类型开源软件

地区不详

投递者阎涵容

操作系统跨平台

开源组织无

适用人群未知

软件概览

Angular TypeScript Snippets for VS Code

Now Updated for Angular 12.0.0 release

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

See the CHANGELOG for the latest changes

Angular Essentials

Check out the Angular Essentials extension for more great extensions for developing with JavaScript and Angular.

Usage

Type part of a snippet, press enter, and the snippet unfolds.

Alternatively, press Ctrl+Space (Windows, Linux) or Cmd+Space (macOS) to activate snippets from within the editor.

Command Palette Commands

Command	Purpose
express: Add simple Express server file to workspace	Adds Node.js express server

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`	create a data service using NgRx

Dockerfile Snippets

Snippet	Purpose
`docker-angular-node-multi-stage`	Multi-stage Dockerfile for Node with Angular

JavaScript Snippets

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

HTML Snippets

Snippet	Purpose
`a-class`	`[class]` binding
`a-select`	`<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`	`<ng-container>` element
`a-ng-template`	`<ng-template>` element
`a-ng-content`	`<ng-content>` element

VS Code Snippets

Snippet	Purpose
`a-launch-chrome`	launch/debug configuration for VS Code for Chrome
`a-launch-edge`	launch/debug configuration for VS Code for Edge
`a-task-start`	create a task configuration for starting the Angular app for VS Code

Installation

Install Visual Studio Code 1.10.0 or higher
Launch Code
From the command palette Ctrl-Shift-P (Windows, Linux) or Cmd-Shift-P (OSX)
Select Install Extension
Choose the extension
Reload Visual Studio Code

Credits

Thanks to the following contributors for the NgRx snippets:

使用案例

记一次使用VSCode开发angular项目中使用的插件

1.Angular 8 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout 2.Angular Files 3.Angular Language Service 4.Angular Support 5.Auto Import 6.Beautify css/sass/scss/less 7.Chinese (
VsCode开发Angular的必备插件

1 概述一般个人开发或者小公司开发都会使用破解版软件，除非比较尊重正版且不太缺钱的人才会用正版，但是大型公司有严格的规定，不允许员工使用盗版软件。这时候我就不得不从WebStorm转向VsCode，至于为什么选择VsCode就不解释了，VsCode天下无敌就完事了。不过想要搭建一套完整且顺手的环境是真的费劲，于是花了点时间试了很多插件，最后整理出一套插件。下面的插件不是都必须的，以后发现好
Vscode配置---转载

vscode最佳配置配置说明详解 vscode配置内容在最后，已附上 editor是针对vscode的风格设置例如 tabSize：一个tab等于2个空格，行高为24px workbench是针对vscode的主题设置例如 iconTheme（图标风格）：使用插件 vscode-great-icons （需搜索安装）例如 colorTheme（代码颜色风格）：使用插件One Dar
【前端工程化】- 2 -VSCode插件

2 - VSCode 插件如果使用好了 VSCode 插件，可以让写代码时不仅美观统一，还能帮助避免一些常见错误。这里列举了一些目前觉得好用的 VSCode 插件，以供参考。代码检查和美化： 1. ESLint 主要针对 JS & JSX，非常心水它的美化代码和 Auto Fix on Save，同时也可以在 .eslintrc.js 中配置一些规则，让代码统一、规范，比如每个函数的最大行数
【必备】VSCode开发Angular的必备插件

[热门]AutoScssStruct4Vue：自动构建SCSS代码 [推荐]Angular File Changer (Supporting Touch Bar and NgRx)→用于快速切换同名HTML/SCSS/TS文件，非常的实用 TSLint：Typescript语法检查 Prettier：代码格式化 IntelliJ IDEA Keybindings：IDEA风格的快捷键 Angula
Angular——vscode插件

TSLint：Typescript语法检查 Prettier：代码格式化 IntelliJ IDEA Keybindings：IDEA风格的快捷键 Angular 7 Snippets：Angular语法填充（标签） Angular Files：生成Angular的文件模板（Component、Module、Pipe等等） Angular Follow Selector：文件跳转（Componen