web-dev-qa-db-de.com

So integrieren Sie WebStorm in Vue.js

WebStorm hat Vue.js nativ nicht unterstützt (zumindest für den Moment - April 2016).

Ich habe nur wenige Ratschläge zur Verbesserung der WebStorm-Erfahrung gefunden. Jetzt möchte ich sie an einer Stelle auflisten (ich beantworte meine eigene Frage unten).

Fühlen Sie sich frei, um die Antwort zu verbessern

32
Sergei Panfilov

WebStorm unterstützt jetzt vue.js (ab 2017.1 [blog] )

Es sind also keine zusätzlichen Schritte erforderlich


[~ # ~] veraltet [~ # ~]

Dies ist die Checkliste mit Möglichkeiten zur Verbesserung des WebStorm-Erlebnisses (PhpStorm, Idea usw.):

  1. Verwenden Sie das Vue.js-Plugin .

[~ # ~] Update [~ # ~] : Beide Plugins haben eigene Probleme atm

Sie können es über Settings(Preferences) => Plugins => Browse repositories => (Suche nach) "vue" installieren.

wählen Sie eines oder beide aus: "Vue.js" oder "vue-for-idea". Es liegt an dir.

  1. Setzen Sie "Javascript Language Version" auf ES6 .

Öffnen Sie Settings(Preferences) => Language & Frameworks => JavaScript. Setze Javascript Language Version Auf ECMAcript6

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

  1. Verbessere die Hervorhebung von HTML-Tags

Öffne Settings(Preferences) => Editor => Inspection => HTML => wähle Unknown HTML tag attributes => Klicke auf Custom HTML tag attributes . Fügen Sie Ihre Attribute hinzu.

Zum Beispiel meine Liste:

v-on, v-on: klicken, v-on: ändern, v-on: fokussieren, v-on: verwischen, v-on: keyup,: klicken, @ klicken, 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- sonst, schreibgeschützt, v-link,: title,: for, tab-index,: name,: id,: checked, transit, @ submit.prevent, autocapitalize, autocorrect, slot, v-html,: style

P.S. Die vollständige Liste der benutzerdefinierten Tags finden Sie in @ Alex's Antwort unten

P.P.S. Eigentlich sollte es auf üblichere Weise funktionieren:

Öffnen Sie Settings(Preferences) => Languages & Frameworks => Javascript => Libraries => klicken Sie auf Add (danach sollten Sie den Pfad zum festlegen vue.js. Sie können es mit npm oder was auch immer herunterladen.)

(Weitere Informationen in dieser Antwort: https://stackoverflow.com/a/28903910/93017 )

Aber damit habe ich keinen Erfolg gehabt.

  1. Codierungsunterstützung für Node.js aktivieren:

Öffne Settings(Preferences) => Languages & Frameworks => Node.js and NPM

Wenn "Node.js Kernbibliothek nicht aktiviert ist", klicken Sie auf die Schaltfläche Enabled


[~ # ~] veraltet [~ # ~] (wird möglicherweise benötigt, wenn Sie keine vue plugins) verwenden für IDE):

  1. Erstellen Sie *.vue - Dateien, die als HTML-Dateien erkannt werden sollen .

Öffne Settings(Preferences) => Editor => File Types Finde HTML in Recognized File Types Und füge dann *.vue Als neues hinzu Registrierte Muster.

  1. ES6-Hervorhebung verbessern .

In jeder vue Datei mit dem Tag:

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

(Dies würde helfen, Konstruktionen wie setTimeout(() => {console.log(1) }, 100) zu erkennen.)

  1. Stile verbessern markieren . (sass, scss, etc)

In jeder vue Datei mit dem Tag:

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

Für scss wird es <style lang="scss" type="text/scss">

Für stylus bitte versuchen Sie <style lang="stylus" type="text/stylus">


[~ # ~] upd [~ # ~] : Die folgenden Schritte sind nicht so vertrauenswürdig, sie können helfen Einige davon habe ich nicht persönlich überprüft, oder ich habe nicht festgestellt, ob ein Effekt vorliegt oder nicht.

  1. Importieren Sie die TextMate-Bundle-Funktionalität .

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

  1. Importieren Sie TypeScript-Tabellen für vue .

Öffnen Sie Settings(Preferences) => Language & Frameworks => JavaScript => Libraries. Klicken Sie auf Download und wechseln Sie zu TypeScript community stubs. Laden Sie alle Registerkarten mit vue Word herunter.

Beispiel: https://youtu.be/4mKiGkokyx8?t=84 (von 1:24)


UPD2: Für weitere Informationen überprüfen Sie das Problem bei Github: https://github.com/vuejs/vue-syntax-highlight/issues/


UPD3: FAQ:

  1. Kann ich pug (jade) highlight verbessern?

    • Nein . Weil Webstorm die Sprachinjektion von Vorlagen nicht unterstützt ... Ausgabe ist seit 2013 ohne offizielles Word aktiv.
76
Sergei Panfilov

Ich habe die Liste der unbekannten HTML-Tags aktualisiert, sodass Sie diese nur in die PhpStorm-Einstellung kopieren und einfügen müssen:

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

Ich hätte Ihre vorherige Antwort kommentiert, aber die Zeichenbeschränkung hat mich daran gehindert.

Hinweis: Es gibt noch viele weitere Ereignisse und ich habe meiner Meinung nach nur die häufigsten ausgewählt.

16
Alex

WebStorm hat offiziell begonnen, VueJS zu unterstützen siehe Blog

Aber jetzt funktioniert es nur in Early Access Preview Build

3
Ahmed Sabry

Ich umgehe die Template-Injektion mit separaten Template-Dateien, was nicht sehr schön ist ...

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