Javascript(ECMAScript) Snippets for VS Code
03 Jun 2016 - by @黄野1. Javascript(ES6) Code Snippets
1.1. Installation
Launch VS Code Quick Open (⌘+P), paste the following command, and type enter.
> ext install JavaScriptSnippets
1.2. Snippets
Below is a list of all available snippets and the triggers of each one. The → means the TAB key.
Import and export
imp→: import
// Imports entire module statement in ES6 syntax.
import module from 'module';
imd→: importDestructing
// Imports only a portion of the module in ES6 syntax.
import { } from 'module';
ime→: importEverything
// Imports everything as alias from the module in ES6 syntax.
import * as alias from 'module';
ima→: importAs
// Imports a specific portion of the module by assigning a local alias in ES6 syntax.
import {originalName as alias } from 'module';
enf→: exportNamedFunction
// Export named function in ES6 syntax.
export const functionName = (params) => {};
edf→: exportDefaultFunction
// Export default function in ES6 syntax.
export default (params) => {};
ecl→: exportClass
// Export default class in ES6 syntax.
export default class className {};
ece→: exportClassExtends
// Export default class which extends a base one in ES6 syntax.
export default class className extends baseclassName {};
Class helpers
con→: constructor
// Add default constructor in a class in ES6 syntax.
constructor(params) {}
met→: method
// Creates a mehtod inside a class in ES6 syntax.
methodName(params) {}
pge→: propertyGet
// Creates a getter property inside a class in ES6 syntax.
get propertyName() {
return this.;
}
pse→: propertySet
// Creates a setter property inside a class in ES6 syntax.
set propertyName(value) {}
Various methods
fre→: forEach
// Creates a forEach statement in ES6 syntax.
array.forEach(currentItem => {});
fof→: forOf
// Iterating over property names of iterable objects.
for(let item of object) {}
fin→: forIn
// Iterating over property values of iterable objects.
for(let item in object) {}
afn→: anonymousFunction
// Creates an anonymous function in ES6 syntax.
(params) => {}
nfn→: namedFunction
// Creates a named function in ES6 syntax.
const name = (params) => {}
dob→: destructingObject
// Creates and assigns a local variable using object destructing.
const {propertyName} = objectToDestruct;
dar→: destructingArray
// Creates and assigns a local variable using array destructing.
const [propertyName] = arrayToDestruct;
sti→: setInterval
// Executes the given function at specified intervals in ES6 syntax.
setInterval(() => {}, intervalInms);
sto→: setTimeOut
// Executes the given function after the specified delay in ES6 syntax.
setTimeout(() => {}, delayInms);
Console methods
cas→: consoleAssert
// If the specified expression is false,
// the message is written to the console along with a stack trace.
console.assert(expression, object);
ccl→: consoleClear
// Clears the console.
console.clear();
cco→: consoleCount
// Writes the the number of times that
// count() has been invoked at the same line and with the same label.
console.count(label);
cdi→: consoleDir
// Prints a JavaScript representation of the specified object.
console.dir(object);
cer→: consoleError
// Displays a message in the console and also includes a stack trace
// from where the method was called.
console.error(object);
cgr→: consoleGroup
// Groups and indents all following output by an additional level,
// until console.groupEnd() is called.
console.group("label");
cge→: consoleGroupEnd
// Closes out the corresponding console.group().
console.groupEnd();
clg→: consoleLog
// Displays a message in the console.
console.log(object);
ctr→: consoleTrace
// Prints a stack trace from the point where the method was called.
console.trace(object);
cwa→: consoleWarn
// Displays a message in the console
// but also displays a yellow warning icon along with the logged message.
console.warn(object);
2. ReactJS(ES6) Code Snippets
2.1. Installation
Launch VS Code Quick Open (⌘+P), paste the following command, and type enter.
> ext install ReactSnippets
2.2. Snippets
Below is a list of all available snippets and the triggers of each one. The -> means the TAB key.
Main methods
rcc→: reactClassCompoment
// Creates a React component class with ES6 module system.
import React, {Component} from 'react';
class componentName extends Component {
render() {
return ();
}
}
export default componentName;
rccp→: reactClassCompomentPropTypes
// Creates a React component class with PropTypes and ES6 nodule system.
import React, {Component, PropTypes} from 'react';
class componentName extends Component {
render() {
return ();
}
}
componentName.propTypes = {};
export default componentName;
rcjc→: reactJustClassCompoment
// Creates a React component class with ES6 module system.
class componentName extends Component {
render() {
return ();
}
}
rcfc→: reactClassCompomentWithMethods
// Creates a React component class with PropTypes and all lifecycle methods in ES6 nodule system.
import React, {Component, PropTypes} from 'react';
class componentName extends Component {
constructor(props) {
super(props);
}
componentWillMount() {}
componentDidMount() {}
componentWillReceiveProps(nextProps) {}
shouldComponentUpdate(nextProps, nextState) {}
componentWillUpdate(nextProps, nextState) {}
componentDidUpdate(prevProps, prevState) {}
componentWillUnmount() {}
render() {
return ();
}
}
componentName.propTypes = {};
export default componentName;
rsc→: reactStateless
// Creates a stateless React component without PropTypes in ES6 nodule system.
import React from 'react';
const componentName = () => {
return ();
};
export default componentName;
rscp→: reactStatelessProps
// Creates a stateless React component with PropTypes in ES6 nodule system.
import React, {PropTypes} from 'react';
const componentName = props => {
return ();
};
componentName.propTypes = {};
export default componentName;
con→: classConstructor
// Adds a default construcotr for the class that contains props as arguments.
constructor(params) {}
conc→: classConstructorContext
// Adds a default construcotr for the class that contains props and context as arguments.
constructor(props, context) {
super(props, context);
}
cwm→: componentWillMount
// Invoked once, both on the client and server, immediately before the initial rendering occurs.
componentWillMount() {}
cdm→: componentDidMount
// Invoked once, only on the client (not on the server), immediately after the initial rendering occurs.
componentDidMount() {}
cwr→: componentWillReceiveProps
// Invoked when a component is receiving new props. This method is not called for the initial render.
componentWillReceiveProps(nextProps) {}
scu→: shouldComponentUpdate
// Invoked before rendering when new props or state are being received.
shouldComponentUpdate(nextProps, nextState) {}
cwup→: componentWillUpdate
// Invoked immediately before rendering when new props or state are being received.
componentWillUpdate(nextProps, nextState) {}
cdup→: componentDidUpdate
// Invoked immediately after the component's updates are flushed to the DOM.
componentDidUpdate(prevProps, prevState) {}
cwun→: componentWillUnmount
// Invoked immediately before a component is unmounted from the DOM.
componentWillUnmount() {}
ren→: componentRender
// When called, it should examine this.props and this.state and return a single child element.
render() {
return ();
}
sst→: componentSetStateObject
// Performs a shallow merge of nextState into current state.
this.setState();
ssf→: componentSetStateFunc
// Performs a shallow merge of nextState into current state.
this.setState((state, props) => { return { }});
props→: componentProps
// Access component's props.
this.props.
state: componentState
// Access component's state.
this.state.
bnd→: bindThis
// Access component's state.
this. = this..bind(this);
PropTypes methods
pta→: propTypeArray
// Array prop type.
PropTypes.array,
ptar→: propTypeArrayRequired
// Array prop type required.
PropTypes.array.isRequired,
ptb→: propTypeBool
// Bool prop type.
PropTypes.bool,
ptbr→: propTypeBoolRequired
// Bool prop type required.
PropTypes.bool.isRequired,
ptf→: propTypeFunc
// Func prop type.
PropTypes.func,
ptfr→: propTypeFuncRequired
// Func prop type required.
PropTypes.func.isRequired,
ptn→: propTypeNumber
// Number prop type.
PropTypes.number,
ptnr→: propTypeNumberRequired
// Number prop type required.
PropTypes.number.isRequired,
pto→: propTypeObject
// Object prop type.
PropTypes.object,
ptor→: propTypeObjectRequired
// Object prop type required.
PropTypes.object.isRequired,
pts→: propTypeString
// String prop type.
PropTypes.string,
ptsr→: propTypeStringRequired
// String prop type required.
PropTypes.string.isRequired,
ptnd→: propTypeNode
// Anything that can be rendered: numbers, strings, elements or an array.
PropTypes.node,
ptndr→: propTypeNodeRequired
// Anything that can be rendered: numbers, strings, elements or an array required.
PropTypes.node.isRequired,
ptel→: propTypeElement
// React element prop type.
PropTypes.element,
ptelr→: propTypeElementRequired
// React element prop type required.
PropTypes.element.isRequired,
pti→: propTypeInstanceOf
// Is an instance of a class prop type.
PropTypes.instanceOf(),
ptir→: propTypeInstanceOfRequired
// Is an instance of a class prop type required.
PropTypes.instanceOf().isRequired,
pte→: propTypeEnum
// Prop type limited to specific values by treating it as an enum.
PropTypes.oneOf(['']),
pter→: propTypeEnumRequired
// Prop type limited to specific values by treating it as an enum required.
PropTypes.oneOf(['']).isRequired,
ptet→: propTypeOneOfType
// An object that could be one of many type.
PropTypes.oneOfType([]),
ptao→: propTypeArrayOf
// An array of a certain type.
PropTypes.arrayOf(),
ptaor→: propTypeArrayOfRequired
// An array of a certain type required.
PropTypes.arrayOf().isRequired,
ptoo→: propTypeObjectOf
// An object with property values of a certain type.
PropTypes.objectOf(),
ptoor→: propTypeObjectOfRequired
// An object with property values of a certain type required.
PropTypes.objectOf().isRequired,
ptsh→: propTypeShape
// An object taking on a particular shape.
PropTypes.shape({}),
ptshr→: propTypeShapeRequired
// An object taking on a particular shape required.
PropTypes.shape({}).isRequired,
3. Angular 2(TypeScript) Code Snippets
3.1. Installation
Launch VS Code Quick Open (⌘+P), paste the following command, and type enter.
> ext install Angular2
3.2. Snippets
TypeScript Snippets
ng2-component-root→: Angular 2 root App component
import { Component } from '@angular/core';
import { HTTP_PROVIDERS } from '@angular/http';
import { Routes, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';
import 'rxjs/Rx'; // load the full rxjs
@Component({
moduleId: module.id,
selector: 'selector',
templateUrl: 'name.component.html',
directives: [ROUTER_DIRECTIVES],
providers: [
HTTP_PROVIDERS,
ROUTER_PROVIDERS
]
})
@Routes([
])
export class AppComponent {}
ng2-bootstrap→: Angular 2 bootstraping, for main.ts
import { enableProdMode } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './name.component';
// enableProdMode();
bootstrap(AppComponent)
.then(success => console.log(`Bootstrap success`))
.catch(error => console.log(error));
ng2-component→: Angular 2 component
import { Component, OnInit } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'selector',
templateUrl: 'name.component.html'
})
export class ComponentNameComponent implements OnInit {
constructor() { }
ngOnInit() { }
}
ng2-pipe→: Angular 2 pipe
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'name'
})
export class PipeNamePipe implements PipeTransform {
transform(value: any, args: any[]): any {
}
}
ng2-route-path→: Angular 2 routing path
{ path: '/path', component: Component }
ng2-service→: Angular 2 service
import { Injectable } from '@angular/core';
@Injectable()
export class ServiceNameService {
constructor() { }
}
ng2-subscribe→: Angular 2 observable subscription
this.service.function
.subscribe(arg => this.property = arg);
HTML Snippets
ng2-ngClass→: ngClass
[ngClass]="{cssClass: expression}"
ng2-ngFor→: ngFor
*ngFor="let item of list"
ng2-ngIf→: ngIf
*ngIf="Property"
ng2-ngModel→: ngModel
[(ngModel)]="binding"
ng2-routerLink→: routerLink
[routerLink]="['routeName']"
ng2-ngStyle→: ngStyle
[ngStyle]="{style: expression}"
ng2-ngSwitch→: ngSwitch
<div [ngSwitch]="conditionExpression">
<div *ngSwitchWhen="expression">output</div>
<div *ngSwitchDefault>output2</div>
</div>