web-dev-qa-db-ja.com

WebStormとVue.jsを統合する方法

WebStormはネイティブに Vue.js をサポートしていませんでした（少なくとも今のところ-2016年4月）。

WebStormのエクスペリエンスを改善する方法はほとんどありません。ここで、それらを1つの場所にリストしたいと思います（以下に自分の質問に答えます）。

自由に答えを改善してください

intellij-ideaphpstormwebstormvue.jsjetbrains-ide
32
Sergei Panfilov

WebStormはvue.jsをサポートするようになりました（2017.1から開始） [ブログ] ）

したがって、追加の手順は必要ありません

[〜＃〜]廃止予定[〜＃〜]

これは、WebStorm（PhpStorm、Ideaなど）のエクスペリエンスを改善する方法のチェックリストです。

  1. Vue.jsプラグインを使用します。

[〜＃〜] update [〜＃〜]：両方のプラグインには独自の問題がありますatm

  • vue-for-idea は奇妙です 副作用 （プロジェクトビューからnode_modulesを非表示にする）;
  • John KellyのVue.jsプラグイン ES6およびscss、sassの特別な宣言を使用することを強制します（以下の非推奨セクションを参照）

Settings(Preferences) => Plugins => Browse repositories =>（検索） "vue"経由でインストールできます。

「Vue.js」または「vue-for-idea」のいずれかまたは両方を選択します。それはあなた次第です。

  1. 「Javascript言語バージョン」をES6に設定します。

Settings(Preferences) => Language & Frameworks => JavaScriptを開きます。 Javascript Language VersionをECMAcript6に設定します

https://github.com/postalservice14/vuejs-plugin

  1. HTMLタグの属性強調表示を改善する

Settings(Preferences) => Editor => Inspection => HTML => Unknown HTML tag attributesを選択=> Custom HTML tag attributesをクリックします。属性を追加します。

たとえば、私のリスト：

v-on、v-on：click、v-on：change、v-on：focus、v-on：blur、v-on：keyup、：click、@ click、v-model、v-text、v- bind、：disabled、@ submit、v-class、：class、v-if、：value、v-for、scoped、@ click.prevent、number、：readonly、@ input、@ click、v-show、v- else、readonly、v-link、：title、：for、tab-index、：name、：id、：checked、transition、@ submit.prevent、autocapitalize、autocorrect、slot、v-html、：style

追伸カスタムタグの完全なリストについては、 @ Alex's 以下の回答を確認してください

P.P.S.実際には、より一般的な方法で動作するはずです：

Settings(Preferences) => Languages & Frameworks => Javascript => Libraries => Addをクリックします（この後、パスをvue.jsに設定する必要があります。ダウンロードできます。 npmまたは何でも）

（この回答の詳細： https://stackoverflow.com/a/28903910/93017 ）

しかし、私はそれで成功しませんでした。

  1. Node.jsコーディング支援を有効にする：

Settings(Preferences) => Languages & Frameworks => Node.js and NPMを開きます

「Node.jsコアライブラリが有効になっていない」場合は、ボタンEnabledをクリックします

[〜＃〜] deprecated [〜＃〜]（vueプラグインを使用しない場合に必要になる場合がありますIDEの場合）：

  1. *.vueファイルをhtmlハエとして認識されるようにします。

File TypesでSettings(Preferences) => Editor => Recognized File Types find HTMLを開き、*.vueを新しい登録パターンとして追加します。

  1. ES6ハイライトを改善します。

タグ付きの各vueファイル：

    <script type="text/babel">
        // your code here...
    </script>

（これは、setTimeout(() => {console.log(1) }, 100)のような構文を認識するのに役立ちます）

  1. スタイルの強調表示を改善します。 （sass、scssなど）

タグ付きの各vueファイル：

    <style lang="sass" rel="stylesheet/sass">
        // your style here...
    </style>

scssの場合は、<style lang="scss" type="text/scss">になります

stylusについては、<style lang="stylus" type="text/stylus">を試してください

[〜＃〜] upd [〜＃〜]：以下の手順はそれほど信頼されていないため、may私が個人的にチェックしなかったもののいくつかを助けたり、助けなかったりするかもしれません。

  1. TextMateバンドル機能をインポートします。

https://www.jetbrains.com/help/phpstorm/2016.1/textmate-bundles.html?origin=old_help

  1. vueのTypeScriptテーブルをインポートします。

Settings(Preferences) => Language & Frameworks => JavaScript => Librariesを開きます。 Downloadをクリックし、TypeScript community stubsに切り替えます。そして、vue Wordですべてのタブをダウンロードします。

例： https://youtu.be/4mKiGkokyx8?t=84 （1:24から）

UPD2：For詳細githubで問題を確認してください： https://github.com/vuejs/vue-syntax-highlight/issues/

UPD3：FAQ：

  1. pug（jade）highlightを改善できますか？

    • いいえ。 Webstormはテンプレート言語のインジェクションをサポートしていないため... Issue は公式のWordなしで2013年以降稼働しています。
76
Sergei Panfilov

未知のHTMLタグのリストを更新したので、PhpStorm設定でこれをコピーして貼り付けるだけです。

nobr, noembed, comment, noscript, embed, script, :checked, :class, :click, :disabled, :for, :id, :name, :readonly, :style, :title, :value, @click, @click.prevent, @click.stop, @click.capture, @click.self, @drag, @drag.prevent, @drag.stop, @drag.capture, @drag.self, @dragend, @dragend.prevent, @dragend.stop, @dragend.capture, @dragend.self, @dragenter, @dragenter.prevent, @dragenter.stop, @dragenter.capture, @dragenter.self, @dragleave, @dragleave.prevent, @dragleave.stop, @dragleave.capture, @dragleave.self, @dragover, @dragover.prevent, @dragover.stop, @dragover.capture, @dragover.self, @dragstart, @dragstart.prevent, @dragstart.stop, @dragstart.capture, @dragstart.self, @drop, @drop.prevent, @drop.stop, @drop.capture, @drop.self, @input, @input.prevent, @input.stop, @input.capture, @input.self, @submit, @submit.prevent, @submit.stop, @submit.capture, @submit.self, scoped, slot, tab-index, v-bind, v-class, v-else, v-for, v-html, v-if, v-link, v-model, v-on, v-on:input, v-on:input.prevent, v-on:input.stop, v-on:input.capture, v-on:input.self, v-on:submit, v-on:submit.prevent, v-on:submit.stop, v-on:submit.capture, v-on:submit.self, v-on:blur, v-on:blur.prevent, v-on:blur.stop, v-on:blur.capture, v-on:blur.self, v-on:change, v-on:change.prevent, v-on:change.stop, v-on:change.capture, v-on:change.self, v-on:click, v-on:click.prevent, v-on:click.stop, v-on:click.capture, v-on:click.self, v-on:focus, v-on:focus.prevent, v-on:focus.stop, v-on:focus.capture, v-on:focus.self, v-on:keypress, v-on:keypress.prevent, v-on:keypress.stop, v-on:keypress.capture, v-on:keypress.self, v-on:keyup, v-on:keyup.prevent, v-on:keyup.stop, v-on:keyup.capture, v-on:keyup.self, v-on:keyup.enter, v-on:keyup.enter.prevent, v-on:keyup.enter.stop, v-on:keyup.enter.capture, v-on:keyup.enter.self, v-on:keyup.tab, v-on:keyup.tab.prevent, v-on:keyup.tab.stop, v-on:keyup.tab.capture, v-on:keyup.tab.self, v-on:keyup.delete, v-on:keyup.delete.prevent, v-on:keyup.delete.stop, v-on:keyup.delete.capture, v-on:keyup.delete.self, v-on:keyup.esc, v-on:keyup.esc.prevent, v-on:keyup.esc.stop, v-on:keyup.esc.capture, v-on:keyup.esc.self, v-on:keyup.space, v-on:keyup.space.prevent, v-on:keyup.space.stop, v-on:keyup.space.capture, v-on:keyup.space.self, v-on:keyup.up, v-on:keyup.up.prevent, v-on:keyup.up.stop, v-on:keyup.up.capture, v-on:keyup.up.self, v-on:keyup.down, v-on:keyup.down.prevent, v-on:keyup.down.stop, v-on:keyup.down.capture, v-on:keyup.down.self, v-on:keyup.left, v-on:keyup.left.prevent, v-on:keyup.left.stop, v-on:keyup.left.capture, v-on:keyup.left.self, v-on:keyup.right, v-on:keyup.right.prevent, v-on:keyup.right.stop, v-on:keyup.right.capture, v-on:keyup.right.self, v-show, v-text, v-on:drag, v-on:drag.prevent, v-on:drag.stop, v-on:drag.capture, v-on:drag.self, v-on:dragend, v-on:dragend.prevent, v-on:dragend.stop, v-on:dragend.capture, v-on:dragend.self, v-on:dragenter, v-on:dragenter.prevent, v-on:dragenter.stop, v-on:dragenter.capture, v-on:dragenter.self, v-on:dragleave, v-on:dragleave.prevent, v-on:dragleave.stop, v-on:dragleave.capture, v-on:dragleave.self, v-on:dragover, v-on:dragover.prevent, v-on:dragover.stop, v-on:dragover.capture, v-on:dragover.self, v-on:dragstart, v-on:dragstart.prevent, v-on:dragstart.stop, v-on:dragstart.capture, v-on:dragstart.self, v-on:drop, v-on:drop.prevent, v-on:drop.stop, v-on:drop.capture, v-on:drop.self, @focus, @focus.prevent, @focus.stop, @focus.capture, @focus.self, @change, @change.prevent, @change.stop, @change.capture, @change.self, @blur, @blur.prevent, @blur.stop, @blur.capture, @blur.self, @keypress, @keypress.prevent, @keypress.stop, @keypress.capture, @keypress.self, @keyup, @keyup.prevent, @keyup.stop, @keyup.capture, @keyup.self, v-on:reset, v-on:reset.prevent, v-on:reset.stop, v-on:reset.capture, v-on:reset.self, @reset, @reset.prevent, @reset.stop, @reset.capture, @reset.self, v-on:keydown, v-on:keydown.prevent, v-on:keydown.stop, v-on:keydown.capture, v-on:keydown.self, @keydown, @keydown.prevent, @keydown.stop, @keydown.capture, @keydown.self, v-on:mousenter, v-on:mousenter.prevent, v-on:mousenter.stop, v-on:mousenter.capture, v-on:mousenter.self, v-on:mouseover, v-on:mouseover.prevent, v-on:mouseover.stop, v-on:mouseover.capture, v-on:mouseover.self, v-on:mousemove, v-on:mousemove.prevent, v-on:mousemove.stop, v-on:mousemove.capture, v-on:mousemove.self, v-on:mousedown, v-on:mousedown.prevent, v-on:mousedown.stop, v-on:mousedown.capture, v-on:mousedown.self, v-on:mouseup, v-on:mouseup.prevent, v-on:mouseup.stop, v-on:mouseup.capture, v-on:mouseup.self, @mousenter, @mousenter.prevent, @mousenter.stop, @mousenter.capture, @mousenter.self, @mouseover, @mouseover.prevent, @mouseover.stop, @mouseover.capture, @mouseover.self, @mousemove, @mousemove.prevent, @mousemove.stop, @mousemove.capture, @mousemove.self, @mousedown, @mousedown.prevent, @mousedown.stop, @mousedown.capture, @mousedown.self, @mouseup, @mouseup.prevent, @mouseup.stop, @mouseup.capture, @mouseup.self, v-on:dblclick, v-on:dblclick.prevent, v-on:dblclick.stop, v-on:dblclick.capture, v-on:dblclick.self, v-on:contextmenu, v-on:contextmenu.prevent, v-on:contextmenu.stop, v-on:contextmenu.capture, v-on:contextmenu.self, v-on:wheel, v-on:wheel.prevent, v-on:wheel.stop, v-on:wheel.capture, v-on:wheel.self, v-on:mouseleave, v-on:mouseleave.prevent, v-on:mouseleave.stop, v-on:mouseleave.capture, v-on:mouseleave.self, v-on:mouseout, v-on:mouseout.prevent, v-on:mouseout.stop, v-on:mouseout.capture, v-on:mouseout.self, v-on:select, v-on:select.prevent, v-on:select.stop, v-on:select.capture, v-on:select.self, @dblclick, @dblclick.prevent, @dblclick.stop, @dblclick.capture, @dblclick.self, @contextmenu, @contextmenu.prevent, @contextmenu.stop, @contextmenu.capture, @contextmenu.self, @wheel, @wheel.prevent, @wheel.stop, @wheel.capture, @wheel.self, @mouseleave, @mouseleave.prevent, @mouseleave.stop, @mouseleave.capture, @mouseleave.self, @mouseout, @mouseout.prevent, @mouseout.stop, @mouseout.capture, @mouseout.self, @select, @select.prevent, @select.stop, @select.capture, @select.self, v-bind:key

私はあなたの前の答えにコメントしたでしょうが、文字の制限により、私はそうすることができませんでした。

注：より多くの events が利用可能であり、私自身の意見では、最も一般的なものだけを手で選択しました。

16
Alex

WebStormは公式にVueJSのサポートを開始しました 彼らのブログをご覧ください

ただし、現在はEarly Access Preview Buildでのみ機能しています

3
Ahmed Sabry

私はあまり素敵ではない別々のテンプレートファイルでテンプレートインジェクションを回避します...

<template lang="pug" src="./MyComponent.pug">
3
Psi