はじめに
これは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に移行する予定があるようなので移行後にやってみます。