Visual Studio CodeのES6用拡張機能で爆速ES6コーディング

Visual Studio CodeがES6をサポートして久しい。

既に、Visual Studio Codeのインテリセンスを使ってバリバリES6を書いているプロジェクトもあると思う。

今回は、Visual Studio CodeによるES6コーディングを更に加速させる拡張機能 JavaScript (ES6) code snippetsを紹介する。

JavaScript (ES6) code snippetsとは

名前のとおり、ES6用のスニペットを提供してくれる拡張機能。

インポートやエクスポート、クラス、for ofなど、ES6の嬉しい新機能をたった4キーで実装できる。

インストール方法

他の拡張機能と同じく、インストールするにはVisual Studio Codeを起動している状態でShift + Command + Pでコマンドパレットを立ちあげ、”ext inst”と打って出てきた拡張機能一覧から”JavaScript (ES6) code snippets”を選べばOK

使い方

インストールを終えて再起動すればES6のスニペットが使えるようになっている。

エディター上で三文字打ってenterを押せばスニペットコードを入れてくれる。

Class helpers

まずはクラス用のスニペットから。

con

コンストラクターを書いてくれる。引数やコンストラクター内の処理はもちろん自分で書かないといけないけれど、こんなコードを書いてくれる。

constructor() {

}

constructor() {

}

met

関数の雛形を書いてくれる。

methodName(params) {

}

methodName(params) {

}

pge

プロパティのゲッター用。C#でやってるような簡略化されたプロパティへのアクセサーや、Swiftのようなプロパティの書き方が出来ないから、このスニペットをザクザク使っていきたい。

get propertyName() {
    return this.;
}

get propertyName() {

return this.;

}

pse

プロパティのセッター用。

set propertyName(value) {
    ;
}

set propertyName(value) {

;

}

Various methods

for … ofや無名関数など、ロジックを書いていくときにお世話になるスニペット。

fof

for … ofループを書くのに使う。

for(let item of object) {

}

for(let item of object) {

}

afn

無名関数を使いたい時に。

(params) => {
	
}

(params) => {

}

nfn

afnに対して、名前付きの関数を作りたい時に使う。

const name = (params) => {
	
}

const name = (params) => {

}

sti

setInterval()を書いてくれる。

setInterval(() => {

}, intervalInms);

setInterval(() => {

}, intervalInms);

sto

こちらはsetTimeout()を書いてくれる。

setTimeout(() => {

}, delayInms);

setTimeout(() => {

}, delayInms);

Import and export

imd

外部モジュールをインポートし、その一部を使いたい時に。

import { } from 'module';

1	import { } from 'module';

ime

外部モジュールのすべてをインポートしたい時に使う。

import * as alias from 'module';

1	import * as alias from 'module';

ima

外部モジュールの一部にエイリアスを付けてインポートする時用のスニペット。

import {originalName as alias } from 'module';

1	import {originalName as alias } from 'module';

enf

ここからはエクスポート用のスニペット。

enfは名前付きの関数をエクスポートする時に使う。

export const functionName = (params) => {

};

export const functionName = (params) => {

};

ecl

クラスをエクスポートする時に使う。

export default class className {

};

export default class className {

};

ece

eclと同じくクラスをエクスポートする時用だけれど、そのクラスが別のクラスを継承している時はこちら。

export default class className extends baseclassName {

};

export default class className extends baseclassName {

};

Console methods

最後はコンソール用のスニペット。

ccl

コンソールのクリアー。

console.clear();

1	console.clear();

clg

ログ出力する時に使う。

console.log(object);

1	console.log(object);

cer

エラー出力用。

console.error(object);

1	console.error(object);

他にも便利なスニペットがたくさん

この拡張機能には他にもスニペットが入っている。

個人的には、map()で “arg =>” みたいなのを入れてくれるスニペットが欲しかったけど、これぐらいなら自分で書くのと変わらないか（笑）

ともあれ、紹介しきれなかった便利スニペットがたくさん入っているから、是非この拡張機能を使ってES6開発を爆速にしてほしい。

ざっとES6の勉強がしたい方へオススメです。

Visual Studio Code関連記事

Visual Studio CodeでTypeScriptをトランスパイルする方法

Visual Studio Code 拡張機能を使ってASP.NET 5によるWebアプリを作ってみる。