https://github.com/evanplaice/angular2-snippets
Sublime Text Snippets and Completions for
https://github.com/evanplaice/angular2-snippets
Last synced: 9 months ago
JSON representation
Sublime Text Snippets and Completions for
- Host: GitHub
- URL: https://github.com/evanplaice/angular2-snippets
- Owner: evanplaice
- License: mit
- Archived: true
- Created: 2016-02-22T05:18:22.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-05-19T02:08:39.000Z (over 9 years ago)
- Last Synced: 2024-11-10T13:36:27.800Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://github.com/mgechev/angular2-style-guide
- Size: 23.4 KB
- Stars: 44
- Watchers: 4
- Forks: 10
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-ng2 - Sublime Text - ng2代码片段包
README
# Angular2 Snippets for Sublime Text
This package provides snippets and completions for Angular2. Sublime Text uses fuzzy searching for snippets/completions, therefore you can trigger either without having to write out the whole trigger.
## Installation
**Package Control**
**Notice: submission to package control is still pending so 'Manual' install is the only option at this time.**
- open the `Command Palette` (⌘ + ⇧ + p | SUPER + SHIFT + p)
- select `Package Control: Install Package` (p + i)
- select `Angular2 Snippets`
**Manual**
- copy/clone the files into your Sublime Text User Preferences folder
**Config**
- to enable auto-completion add the following to `User.sublime-preferences`
```json
"auto_complete_triggers": [ {"selector": "text.html", "characters": "<"}, {"selector": "text.html meta.tag", "characters": " " } ]
```
## Directory
**Snippet Categories:**
- [Component](#component)
- [Directive](#directive)
- [Service](#service)
- [Pipe](#pipe)
- [RouteConfig](#routeconfig)
- [Route](#route)
- [Test](#test)
**Completion Categories:**
- [Annotations](#annotations)
- [Decorators](#decorators)
- [Lifecycle](#lifecycle)
- [Routing](#routing)
- [Directives](#directives)
- [Attributes](#attributes)
- [Pipes](#pipes)
## Snippets
### Component
**Trigger:** `component`
description
completion
@Component
@Component(${2})
export class ${1}Component {${3}}
@Component (Basic)
@Component({
selector: '${2}',
template: '${3}',
styles: '${4}'
})
export class ${1}Component {${5}}
@Component (External)
@Component({
selector: '${2}',
templateUrl: '${3}',
styleUrls: ['${4}']
})
export class ${1}Component {${5}}
@Component (Complex)
@Component({
selector: '${2}',
providers: ['${3}'],
viewProviders: ['${4}'],
template: '${5}',
templateUrl: '${6}',
styles: '${7}',
styleUrls: ['${8}'],
directives: ['${9}'],
pipes: ['${10}']
})
export class ${1}Component {${11}}
### Directive
**Trigger:** `directive`
description
completion
@Directive
@Directive({${2}})
export class ${1}Directive {${3}}
@Directive (Basic)
@Directive({
selector: '${2}'
})
export class ${1}Directive {${3}}
@Directive (Complex)
@Directive({
selector: '${2}',
providers: ['${3}'],
properties: ['${4}'],
host: {'${5}'}
})
export class ${1}Directive {${6}}
### Service
**Trigger:** `service`
description
completion
Service
@Injectable()
export class ${1}Service {${2}}
### Pipe
**Trigger:** `pipe`
description
completion
Pipe
@Pipe({ name: '${2}' })
export class ${1}Pipe implements PipeTransform {
transform (value:number, args:${3:any}[]) : ${4:any} {${5}}
}
Pipe (ES6)
@Pipe({ name: '${2}' })
export class ${1}Pipe {
transform (value, args) {${3}}
}
### RouteConfig
**Trigger:** `routeconfig`
description
completion
@RouteConfig
@RouteConfig([
${1}
])
@RouteConfig (Basic)
@RouteConfig([
{
path: '/${1}',
name: '${2}',
component: ${2}Component,
useAsDefault: true
}${3}
]
### Route
**Trigger:** `route`
description
completion
Route
{
path: '/${1}',
name: '${2}',
component: ${2}Component
}${3}
Route (Default)
{
path: '/${1}',
name: '${2}',
component: ${2}Component,
useAsDefault: true
}${3}
Route (Redirect)
{
path: '/${1:**}',
redirectTo: ['${2}']
}${3}
Route (Param)
{
path: '/${1}:${2}',
name: '${3}',
component: ${3}Component
}${4}
Route (Wildcard)
{
path: '/${1}*${2}',
name: '${3}',
component: ${3}Component
}${4}
Route (Data)
{
path: '/${1}',
name: '${2}',
component: ${2}Component,
data: {${3}: ${4}}
}${5}
Route (Parent)
{
path: '/${1}...',
name: '${2}',
component: ${2}Component
}${3}
### Test
description
completion
## Completions
### Annotations
trigger
completion
selector
selector: '$1'
inputs
inputs: [
'$1'
]
outputs
outputs: [
'$1'
]
providers
providers: [
$1
]
viewProviders
viewProviders: [
$1
]
template
template: `
$1
`
templateUrl
templateUrl: '$1'
styles
styles: `
$1
`
styleUrls
styleUrls: [
'$1'
]
directives
directives: [
$1
]
pipes
pipes: [
$1
]
properties
properties: [
'$1'
]
host
host: {
'$1': '$2'
}
### Decorators
trigger
completion
@Inject
@Inject($1) $2
@Input
@Input($1) $2
@Output
@Output($1) $2 = $3
@HostBinding
@HostBinding($1) $2
@HostListener
@HostListener('$1', ['$2'])
@ContentChild
@ContentChild($1)
@ContentChildren
@ContentChildren($1)
@ViewChild
@ViewChild($1)
@ViewChildren
@ViewChildren($1)
### Lifecycle
trigger
completion
constructor
constructor($1) {
$2
}
ngOnChanges
ngOnChanges($1) {
$2
}
ngOnInit
ngOnInit($1) {
$2
}
ngDoCheck
ngDoCheck($1) {
$2
}
ngAfterContentInit
ngAfterContentInit($1) {
$2
}
ngAfterContentChecked
ngAfterContentChecked($1) {
$2
}
ngAfterViewInit
ngAfterViewInit($1) {
$2
}
ngAfterViewChecked
ngAfterViewChecked($1) {
$2
}
ngOnDestroy
ngOnDestroy($1) {
$2
}
### Routing
trigger
completion
@CanActivate
@CanActivate($1)
routerOnActivate
routerOnActivate($1) {
$2
}
routerCanReuse
routerCanReuse($1) {
$2
}
routerOnReuse
routerOnReuse($1) {
$2
}
routerCanDeactivate
routerCanDeactivate($1) {
$2
}
routerOnDeactivate
routerOnDeactivate($1) {
$2
}
### Directives
trigger
completion
ngClass
[ngClass]="$1"
ngIf
*ngIf="$1"
ngIf
[ngIf]="$1"
ngFor
*ngFor="let $1 of $2"
ngForOf
[ngForOf]="$1"
ngStyle
[ngStyle]="$1"
ngSwitch
[ngSwitch]="$1"
ngSwitchDefault
[ngSwitchDefault]="$1"
ngSwitchWhen
[ngSwitchWhen]="$1"
ngModel
[ngModel]="$1"
ngModel
[(ngModel)]="$1"
ngModelChange
(ngModelChange)="$1"
### Pipes
trigger
completion