intellij idea - Cómo integrar WebStorm con Vue.js

intellij-idea phpstorm

Question

WebStorm no era compatible con Vue.js forma nativa (al menos por el momento, abril de 2016).

He encontrado algunos consejos sobre cómo mejorar la experiencia de WebStorm. Ahora quiero enumerarlos en un solo lugar (responderé a mi propia pregunta a continuación).

Siéntete libre de mejorar la respuesta.

Answer 1

Actualicé la lista de etiquetas HTML desconocidas, así que solo tienes que copiar y pegar esto en la configuración 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

Hubiera comentado tu respuesta anterior, pero el límite de caracteres me lo impidió.

Nota: hay muchos más events disponibles y, en mi opinión, solo seleccioné los más comunes.

Answer 2

Evito la inyección de plantillas con plantillas separadas, lo cual no es muy bueno ...

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

Answer 3

WebStorm comenzó a apoyar VueJS oficialmente. [blog]

Pero ahora solo funciona en Early Access Preview Build

Answer 4

WebStorm ahora es compatible con vue.js (a partir de 2017.1 [blog] )

Así que no se requieren pasos adicionales

OBSOLETO

Esta es la lista de verificación de maneras de mejorar la experiencia de WebStorm (PhpStorm, Idea, etc.):

1. Utilice el plugin Vue.js.

ACTUALIZACIÓN : Ambos plugins tienen problemas propios de atm.

• vue-for-idea tiene side-effects extraños (ocultar node_modules de la vista del proyecto);
• El complemento Vue.js de John Kelly lo obliga a usar declaraciones especiales para ES6 y scss, sass (consulte la sección en desuso a continuación)

Puede instalarlo a través de Settings(Preferences) => Plugins => Browse repositories => (buscar) "vue"

elija uno o ambos: "Vue.js" o "vue-for-idea". Tu decides.

2. Establezca "Versión de lenguaje Javascript" en ES6 .

Settings(Preferences) abierta Settings(Preferences) => Language & Frameworks => JavaScript . Establecer la Javascript Language Version en ECMAcript6

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

3. Mejorar el resaltado de atributos de la etiqueta HTML.

Abra Settings(Preferences) => Editor => Inspection => HTML => seleccione Unknown HTML tag attributes => haga clic en Custom HTML tag attributes . Añade tus atributos.

Por ejemplo, mi lista:

v-on, v-on: click, v-on: change, v-on: focus, v-on: blur-on, 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, @ submit.prevent, autocapitalize, autocorrect, slot, v-html,: style

PS Para ver la lista completa de etiquetas personalizadas, ver @Alex''s respuesta de @Alex''s continuación.

PPS En realidad debería funcionar de manera más común:

Abra Settings(Preferences) => Languages & Frameworks => Javascript => Libraries => haga clic en Add (después de esto, debe establecer la ruta a vue.js Puede descargarlo con npm o lo que sea)

(Más información en esta respuesta: https://.com/a/28903910/930170 )

Pero no tuve éxito con eso.

4. Habilitar asistencia de codificación Node.js:

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

Si "la biblioteca principal de Node.js no está habilitada", haga clic en el botón Enabled

DEPRECATED (puede ser necesario si no usa los complementos de vue para IDE):

1. Haga que los archivos *.vue sean reconocidos como archivos HTML .

Abra Settings(Preferences) => Editor => File Types encuentre HTML en Recognized File Types , luego agregue *.vue como nuevos patrones registrados.

2. Mejorar el resaltado de ES6 .

En cada archivo vue con etiqueta:

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

(Esto ayudaría a reconocer construcciones como setTimeout(() => {console.log(1) }, 100) )

3. Mejorar los estilos más destacados . (sass, scss, etc)

En cada archivo vue con etiqueta:

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

Para scss será <style lang="scss" type="text/scss">

Para el stylus , intente con <style lang="stylus" type="text/stylus">

UPD : Los pasos a continuación no son tan confiables, pueden ser útiles o pueden no serlo, algunos de ellos no los revisé personalmente o no detecté si existe algún efecto o no.

1. Importar la funcionalidad del paquete TextMate .

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

2. Importar tablas de TypeScript para vue .

Settings(Preferences) abierta Settings(Preferences) => Language & Frameworks => JavaScript => Libraries . Haga clic en Download , Cambiar a los TypeScript community stubs . Y descarga todas las pestañas con vue word.

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

UPD2: Para obtener más información, consulte el problema en github: https://github.com/vuejs/vue-syntax-highlight/issues/3

UPD3: FAQ:

1. ¿Puedo mejorar el resaltado de pug ( jade ) ?

   • No Debido a que Webstorm no es compatible con la inyección de idioma de la plantilla ... El Issue ha estado actualizado desde 2013 sin ninguna palabra oficial.