¿Cómo comentar el código en un archivo vue.js?

94

Tengo la necesidad de insertar un comentario dentro de un archivo vue.js para futuras referencias, pero no encuentro cómo hacer esto en los documentos.

He tratado //, /**/, {{-- --}}, y {# #}, pero ninguno de ellos parece funcionar.

Estoy usando la espada de Laravel. Entonces este es el sample_file.vue:

<template>
    <div class="media">

        <like-button :post="post" v-if="post.likedByCurrentUser === false && "></like-button>  {{--I want to comment this but I get an error from the gulp watch: post.canBeLikedByCurrentUser === true--}}

        <div class="media-left">
            <a href="#">
                <img class="media-object" v-bind:src="post.user.avatar" v-bind:title="post.user.name + ' image from Gravatar'">
            </a>
        </div>
        <div class="media-body">
            <strong>{{ post.user.name }}</strong>
            <p>{{post.body}}</p>
            <p>{{post.likeCount}} {{ pluralize('like', post.likeCount) }}</p>
        </div>
    </div>
</template> 

¿Alguien sabe cómo insertar un comentario y / o cómo comentar fragmentos de código?

Pathros
fuente
1
Si usted está buscando varias líneas de comentarios, el comentario HTML estándar funcionará: <!-- -->. ¿Pero parece que estás buscando comentarios en línea?
Adam
Ahh, me olvidé de intentarlo. ¡De hecho es un HTMLcódigo! Thnx
Pathros
1
Por defecto, los comentarios HTML son eliminados por vue vuejs.org/v2/api/#comments
Mike3355
1
La sintaxis de plantillas de Vue es muy similar a Handlebars . Vale la pena señalar que Handlebars permite {{! comments like this }}y {{!-- comments {{like this}} that can contain double-braces --}}. Estos no se renderizan en la salida, a diferencia de los <!-- html comments -->que sí lo hacen. Probé ambos {{! ... }}y {{!-- ... --}}con Vue, y desafortunadamente no son compatibles. ¿Consideraría agregarlos a su pregunta para los usuarios que se encuentran con ella?
chharvey

Respuestas:

167

Desea utilizar comentarios HTML estándar en la <template>etiqueta en su situación. También se eliminarán de la salida, lo cual es bueno.

<!-- Comment -->
Bill Criswell
fuente
Afaict, no se desnudan en Vue 3 🤷
dtk hace
27

Como dijo Bill Criswell, podemos usar la sintaxis de comentarios HTML.

<!-- Comment -->

Pero también funcionará fuera de la etiqueta de plantilla, comment.vue

<!-- Testing comments, this will work too. -->

<template>
    <!-- This will work too -->

    <div>
        <!-- Html Comments -->
        Hello There!
    </div>
</template>

<style><style>

<!-- Commenting here -->

<script>
    // Commenting only 1 line

    /**
      * Commenting multiple lines
      * Commenting multiple lines
      */
</script>
Vaisakh Rajagopal
fuente
1
Esto da como resultado un "token inesperado (1: 1)" con Vue 2.5.13.
Alen Siljak
Solía ​​comentar fuera de las etiquetas raíz compatibles y descubrí que causaba problemas según el contenido de los comentarios. Ojalá vue admitiera comentarios fuera de las etiquetas raíz porque es el lugar más sensato para crear archivos READMEs y demás, pero bueno.
aaaaaa
En lugar de usar comentarios fuera de las pestañas raíz admitidas, use etiquetas válidas allí. <comment>Commenting here</comment. Tendrá que agregarlos a la configuración de su paquete web. vue-loader.vuejs.org/guide/custom-blocks.html#example
David R.
18

Acabo de probar esto:

<template>
    {{ /* this is a comment */ }}
    <h1>Hello world</h1>
</template>
Fulldump
fuente
2
Genial, no aparece en la salida html. Pero solo los comentarios de una línea son compatibles con esta sintaxis.
d9k
Desafortunadamente, no puedo hacer que esto funcione:Error parsing JavaScript expression: Unexpected token (1:24)
dtk hace
9

Noté que no puedes comentar cuando estás dentro de una etiqueta:

<!-- make sure it is outside a tag -->

<autocomplete
<!-- you can't place the comment out in here -->
>
</autocomplete>
Juan Vaca
fuente
4

Vue Styleguidist contiene las mejores prácticas y muestra ejemplos de cómo comentar sus componentes. https://vue-styleguidist.github.io/docs/Documenting.html#code-comments

Pero en general...

En la sección de plantilla o HTML use comentarios HTML

<!-- Comment -->

En la sección de script , use comentarios de Javascript

// Comment
/* Comment */

En la sección de estilo , use comentarios CSS

/* comment */
ScottyG
fuente
4

Si es útil para sus proyectos, puede poner texto sin formato encima de la plantilla sin adornos. Se ignora por completo cuando renderiza su componente.

This is some documentation about this component
   - some
   - info
<template></template>
<script></script>
<style></style>
Rory Jarrard
fuente
0

El siguiente consejo no se trata tanto de comentar (como de documentar) el código en sí, sino de permitirle omitir temporalmente fragmentos de código durante el desarrollo.

Cuando los comentarios requieren etiquetas de apertura y cierre, la forma en que el analizador las compara puede ser inconveniente. Por ejemplo lo siguiente

<!-- I want to comment this <!-- this --> and that --> 

saldrá and that -->. Similarmente /* this will be commented /* and so will this */ but not this */.

Mi solución es usar v-if="false"para especificar qué bloques quiero omitir (temporalmente).

<template>
<div>
    Hello
    <div v-if="false">
        Vue will not process whatever's in here.
    </div>
    World!
</div>
</template>

Tenga en cuenta que esto no debe usarse en reemplazo de los comentarios adecuados para documentar su código. Es solo una forma conveniente de tener más control sobre los bloques que desea omitir durante el desarrollo.

Michael Ekoka
fuente
-2

Soy novato en Vue.js, pero //debería funcionar porque el código es javascript de todos modos. Buscando en los documentos encuentro este ejemplo . Si miras las primeras 2 líneas de javascript, verás comentarios con// .

ejemplo en archivo vinculado javascript:

// Full spec-compliant TodoMVC with localStorage persistence
// and hash-based routing in ~120 effective lines of JavaScript.

...
Juan
fuente
1
Sin embargo, esto no funciona dentro de la templateetiqueta, sino dentro de la scriptetiqueta
Pavindu