LoginSignup
3

More than 5 years have passed since last update.

Visual Studio CodeでPolymer

Last updated at Posted at 2016-12-15

はじめに

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
3