Edited at

Visual Studio CodeでPolymer

More than 1 year has passed since last update.


はじめに

これは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では1ファイル内の言語コードは1つと決まっているため、デフォルトでの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に移行する予定があるようなので移行後にやってみます。