##はじめに

これはVisual Studio Code AdventCalendarの16日目です。

VSCode触り始めて半年ちょっとほどです。
Angular2/TypeScriptでさくさく書けていたVSCodeを、Polymerでも使いたく調べてみました。
（ただAngular2/TypeScriptは密接にVSCodeと対応しているとこの間聞いてきたので、同じさくさく感は得られなさそうです…）

本記事の対象バージョン

Visual Studio Code version1.8
Polymer version1.7

#Extensions
下記を一通り入れてみて、感触をみてみました。

##Polymer Snippets
主にTemplate周りのSnippet。
ElementCatalogとの親和性が高いです。

##Polymer Syntax
Polymerなところをハイライト表示してくれます。
ユーザー設定に

"files.associations": {
    "*.html": "polymer"
}

を記載すると良い感じにハイライトが適用されますが、
言語コード：HTMLではなくなるので、言語コード：HTMLに依存する機能（URLジャンプなどなど）が使えなくなる弊害が少なくないかもしれません。

##polymer-ide
カスタムエレメントへのジャンプ、属性の先読みなど。
Windowsでは使えないみたい。（ジャンプ先の参照先がおかしくなってる？）

##User Snippets
※Polymerというより、HTMLファイルにscriptタグを定義して
JavaScriptをごりごり書いていく場合に有用な手法かもしれません。

Polymerの記法としてHTML内にscript,styleタグを記載しそれぞれを定義していきます。
VSCodeでは１ファイル内の言語コードは１つと決まっているため、デフォルトでのPolymerのカスタムエレメントは
言語コード：HTMLとして認識されます。
~~そのため、scriptタグ内に記載したJavaScriptのインテリセンスが効かない事象が発生しています。~~
~~（対応する気配：JS intellisense doesnt work in HTML script tag · Issue #4369 · Microsoft/vscode）~~
昨日（12/15）リリースされたversion1.8でHTML内JavaScriptのインテリセンスが対応されました🎉🎉👏👏
Visual Studio Code November 2016 -JavaScript language support in HTML

※styleタグ内はversion1.7よりインテリセンスが効くようになりました。
Visual Studio Code October 2016 1.7　-CSS completions in HTML

HTMLのUserSnippetsにJavaScriptやPolymerのSnippetを設定しておくことで、インテリセンスライクな動きをしてくれます。
定義内に$nと記載したところには、Tabで順番に移動できます。
UserSnippetsの詳しい解説：Snippets in Visual Studio Code

example:

"Print to function": {
    "prefix": "function",
    "body": [
        "$1: function() {",
        "},"
    ],
    "description": "Create Polymer New Function"
},

"Print to property": {
    "prefix": "property",
    "body": [
        "$1: {",
        "	type:$2,",
        "	notify: true,",
        "	value: $3",
        "},"
    ],
    "description": "Create Polymer New Property"
}

##おわりに
チーム内ではインテリセンス、GUIからAdobe Bracketsを選択するユーザーが多いです。
ですが、コマンド入力に慣れれば軽量感のあるVSCodeも悪くないと思っています！

本当はPolymerなExtensionの作成までやってみたかったのですが、
Polymer2.xに移行する予定があるようなので移行後にやってみます。