Comment intégrer WebStorm avec Vue.js

Question

WebStorm ne supporte pas Vue.js en mode natif (du moins pour l'instant - avril 2016).

J'ai trouvé quelques conseils pour améliorer l'expérience de WebStorm. Je veux maintenant les énumérer en un seul endroit (je répondrai à ma propre question ci-dessous).

N'hésitez pas à améliorer la réponse

Answer 1

WebStorm prend désormais en charge vue.js (à partir de 2017.1 [blog] )

Aucune étape supplémentaire n'est donc nécessaire

---

DÉCRYPTÉ

Voici la liste de contrôle des moyens d'améliorer l'expérience de WebStorm (PhpStorm, Idea, etc.) :

1. Utiliser le plugin Vue.js .

UPDATE : Les deux plugins ont leurs propres problèmes à l'heure actuelle

• vue-for-idea est bizarre effets secondaires (cachant node_modules de la vue du projet) ;
• Le plugin Vue.js de John Kelly vous obligent à utiliser des déclarations spéciales pour ES6 et scss, sass (voir la section dépréciée ci-dessous)

Vous pouvez l'installer via Settings(Preferences) => Plugins => Browse repositories => (recherche de) "vue

choisissez-en un ou les deux : "Vue.js" ou "vue-for-idea". C'est vous qui décidez.

2. Définissez "Version du langage Javascript" sur ES6 .

Abrir Settings(Preferences) => Language & Frameworks => JavaScript . Set Javascript Language Version a ECMAcript6

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

3. Améliorer la mise en évidence des attributs des balises HTML

Abrir Settings(Preferences) => Editor => Inspection => HTML => sélectionnez Unknown HTML tag attributes => cliquer Custom HTML tag attributes . Ajoutez vos attributs.

Par exemple, ma liste :

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

P.S. Pour la liste complète des balises personnalisées, voir @Alex réponse ci-dessous

P.P.S. En fait, cela devrait fonctionner de manière plus courante :

Abrir Settings(Preferences) => Languages & Frameworks => Javascript => Libraries => cliquer Add (après cela, vous devez définir le chemin d'accès au vue.js . Vous pouvez le télécharger avec npm ou autre).

(Plus d'informations dans cette réponse : https://stackoverflow.com/a/28903910/930170 )

Mais je n'ai pas eu de succès avec ça.

4. Activez l'assistance au codage de Node.js :

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

Si "la bibliothèque Node.js core n'est pas activée", cliquez sur le bouton Enabled

---

DÉCRYPTÉ (peut être nécessaire si vous n'utilisez pas les plugins Vue pour l'IDE) :

1. *Faire `.vue` pour être reconnus comme des mouches html** .

Abrir Settings(Preferences) => Editor => File Types trouver HTML sur Recognized File Types puis ajoutez *.vue comme un nouveau Registered Patterns.

2. Améliorer la mise en évidence de l'ES6 .

Dans chaque vue avec une étiquette :

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

(Cela aiderait à reconnaître les constructions comme setTimeout(() => {console.log(1) }, 100) )

3. Améliorer la mise en évidence des styles . (sass, scss, etc)

Dans chaque vue avec une étiquette :

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

Pour scss ça va être <style lang="scss" type="text/scss">

Pour stylus veuillez essayer <style lang="stylus" type="text/stylus">

---

UPD : Les étapes ci-dessous ne sont pas si fiables, elles puede aide, ou peut ne pas aider, certains d'entre eux je n'ai pas vérifié personnellement, ou je n'ai pas saisi si un effet existe ou non.

1. Importer la fonctionnalité de TextMate Bundle .

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

2. Importer des tableaux TypeScript pour vue .

Abrir Settings(Preferences) => Language & Frameworks => JavaScript => Libraries . Cliquez sur Download Passez à TypeScript community stubs . Et téléchargez tous les onglets avec vue mot.

Exemple : https://youtu.be/4mKiGkokyx8?t=84 (à partir de 1:24)

---

UPD2 : Pour plus d'infos Vérifiez le problème sur github : https://github.com/vuejs/vue-syntax-highlight/issues/3

---

UPD3 : FAQ :

1. Puis-je améliorer pug ( jade ) mettre en évidence ?

   • Non . Parce que Webstorm ne supporte pas l'injection de langage de modèle... Numéro est en place depuis 2013, sans aucune annonce officielle.

Answer 2

J'ai mis à jour la liste des balises HTML inconnues, il suffit donc de copier-coller cette liste dans les paramètres de 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

J'aurais bien commenté votre réponse précédente, mais la limite de caractères m'en empêche.

Note : il y en a beaucoup d'autres événements disponibles, et je n'ai choisi que les plus courantes, à mon avis.

Answer 3

Je contourne l'injection de modèles avec des fichiers de modèles séparés, ce qui n'est pas très agréable ...

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

Answer 4

WebStorm a commencé à supporter officiellement VueJS Voir leur blog

Mais maintenant, il ne fonctionne que dans Version préliminaire de l'accès anticipé