3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Visual Studio CodeAdvent Calendar 2016

Day 16

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

3
3
0

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
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?