intellij-idea - style - webstorm vuejs




Come integrare WebStorm con Vue.js (3)

WebStorm non supportava Vue.js modo nativo (almeno per ora - aprile 2016).

Ho trovato alcuni consigli su come migliorare l'esperienza di WebStorm. Ora voglio elencarli in un posto (risponderò alla mia domanda qui sotto).

Sentiti libero di migliorare la risposta


Evito l'iniezione di modelli con file modello separati che non è molto bello ...

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

Ho aggiornato l'elenco di tag HTML sconosciuti, quindi è sufficiente copiare e incollare questo nell'impostazione di 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

Avrei commentato la tua risposta precedente, ma il limite di caratteri mi ha impedito di farlo.

Nota: ci sono molti altri events disponibili, e ho scelto solo quelli più comuni, secondo la mia opinione.


WebStorm ora supporta vue.js (a partire dal 2017.1 [blog] )

Quindi non sono necessari passaggi aggiuntivi

DEPRECATO

Questa è la lista di controllo per migliorare l'esperienza di WebStorm (PhpStorm, Idea, ecc.):

  1. Utilizza il plug-in Vue.js.

AGGIORNAMENTO : entrambi i plugin hanno problemi di autenticazione

Puoi installarlo tramite Settings(Preferences) => Plugins => Browse repositories => (cerca per) "vue"

scegli uno o entrambi: "Vue.js" o "vue-for-idea". Tocca a voi.

  1. Imposta "Versione lingua Javascript" su ES6 .

Apri Settings(Preferences) => Language & Frameworks => JavaScript . Imposta la Javascript Language Version su ECMAcript6

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

  1. Migliora l'evidenziazione degli attributi del tag HTML

Apri Settings(Preferences) => Editor => Inspection => HTML => seleziona Unknown HTML tag attributes => fai clic Custom HTML tag attributes . Aggiungi i tuoi attributi.

Ad esempio, la mia lista:

v-on, v-on: clic, v-on: il cambiamento, v-on: messa a fuoco, v-on: sfocatura, v-on: keyup,: fare clic su, fare clic su @, v-model, v-text, v- bind,: disabili, @ presentare, v-class,: di classe, v-se,: il valore, v-per, ambito, @ click.prevent, numero,: sola lettura, @ ingresso, @ cliccare, v-spettacolo, v- altrimenti, sola lettura, v-link,: titolo,: per, scheda-index,: nome,: id,: controllato, di transizione, @ submit.prevent, autocapitalize, correzione automatica, fessura, v-html,: stile

PS Per l'elenco completo dei tag personalizzati, controllare @Alex's risposta @Alex's seguito

PPS In realtà dovrebbe funzionare in modo più comune:

Apri Settings(Preferences) => Languages & Frameworks => Javascript => Libraries => fai clic su Add (dopo questo dovresti impostare il percorso per vue.js Puoi scaricarlo con npm o qualsiasi altra cosa)

(Maggiori informazioni in questa risposta: https://.com/a/28903910/930170 )

Ma non ho avuto successo con quello.

  1. Abilita l'assistenza per la codifica Node.js:

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

Se "Libreria principale Node.js non è abilitata", fare clic sul pulsante Enabled

DEPRECATED (potrebbe essere richiesto se non si utilizzano i plugin di vue per IDE):

  1. Rendere i file *.vue riconosciuti come mosche HTML .

Apri Settings(Preferences) => Editor => File Types trovano l' HTML in Recognized File Types , quindi aggiungi *.vue come nuovi Pattern registrati.

  1. Migliora l'evidenziazione ES6 .

In ogni file vue con tag:

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

(Questo sarebbe utile per riconoscere costruzioni come setTimeout(() => {console.log(1) }, 100) )

  1. Migliora l'evidenziazione degli stili . (sass, scss, ecc)

In ogni file vue con tag:

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

Per scss sarà <style lang="scss" type="text/scss">

Per lo stylus , prova <style lang="stylus" type="text/stylus">

UPD : I passaggi sottostanti non sono così attendibili, possono essere d' aiuto, o meno, alcuni di essi che non ho controllato personalmente, o non ho capito se esiste o meno un effetto.

  1. Importa la funzionalità Bundle TextMate .

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

  1. Importa tabelle TypeScript per vue .

Apri Settings(Preferences) => Language & Frameworks => JavaScript => Libraries . Fai clic su Download , Passa agli TypeScript community stubs . E scarica tutte le schede con la parola vue .

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

UPD2: per maggiori informazioni controlla il problema su github: https://github.com/vuejs/vue-syntax-highlight/issues/3

UPD3: domande frequenti:

  1. Posso migliorare l' pug ( jade ) ?

    • No Perché Webstorm non supporta l'inserimento del linguaggio modello ... Il Issue è rimasto attivo dal 2013 senza una parola ufficiale.




jetbrains