如何在vue.js文件中注释代码？

Question

我需要在vue.js文件中插入注释以备将来参考，但我在文档中找不到如何实现它。

我尝试过//、/**/、{{-- --}}和{# #}，但似乎都不起作用。

我正在使用Laravel的刀片引擎。所以这是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> 

有人知道如何插入注释和/或如何对代码片段进行注释吗？

- Pathros

---

如果你想要多行注释，标准的HTML注释将会起作用：<!-- -->。但是听起来你正在寻找内联注释？ - Adam

啊，我忘记试那个了。 它确实是“HTML”代码！谢谢 - Pathros

默认情况下，Vue会移除HTML注释。请参考https://vuejs.org/v2/api/#comments。 - Mike3355

Vue的模板语法与Handlebars非常相似。值得注意的是，Handlebars允许 {{! 这样的注释 }} 和 {{!-- 包含双括号 {{like this}} 的注释 --}}。这些在输出时不会被呈现，与 <!-- html 注释 --> 不同，它们会被呈现。我已经尝试在Vue中使用 {{! ... }} 和 {{!-- ... --}} ，但很遗憾它们并未被支持。如果有用户遇到此问题，您是否考虑将它们添加到您的问题中？ - chharvey

Answer 1

在你的情况下，应该使用标准的HTML注释在<template>标签中。它们也将从输出中剥离，这很好。

<!-- Comment -->

- Bill Criswell

---

据我所知，在Vue 3中它们并没有被剥离。 - dtk

是的，这正在破坏我的Vue 3模板。 - Adam Starrh

有没有Vue 3的解决方案？在这里配置“comments: true”不起作用。 - Rafael S. Fijalkowski

使用Vue 3.2，默认情况下，在进行生产构建时，注释会被删除，但在使用开发服务器时不会被删除。这似乎符合文档说明-https://v3.vuejs.org/api/application-config.html#compileroptions-comments - launchoverit

@launchoverit 提到的页面部分已经移动至：https://vuejs.org/api/application.html#app-config-compileroptions-comments - Lozenger

Answer 2

就像Bill Criswell所说，我们可以使用HTML注释语法。

<!-- Comment -->

但是，它也可以在模板标签之外起作用， 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

---

这会导致在Vue 2.5.13中出现“Unexpected token (1:1)”错误。 - Alen Siljak

我曾经在支持的根标签之外添加注释，发现这会根据注释内容引起问题。我希望Vue支持在根标签之外添加注释，因为这是创建README等文件最合适的位置，但没关系。 - aaaaaa

不要在支持的根标签外使用注释，而是在那里使用有效的标签。<comment> 在此处添加注释 </comment>。您将需要将这些添加到Webpack配置中。https://vue-loader.vuejs.org/guide/custom-blocks.html#example - David R.

值得注意的是，HTML注释也适用于<!-- ...多行...-->。 - Bogdan D

Answer 3

我刚刚进行了测试：

<template>
    {{ /* this is a comment */ }}
    <h1>Hello world</h1>
</template>

- Fulldump

---

很酷，它不会出现在HTML输出中。但是只有单行注释支持这种语法。 - d9k

抱歉，我无法使其工作：JavaScript 表达式解析错误：意外的标记（1:24）。 - dtk

终于！如此简单，我想知道为什么以前从未想过。现在我的评论不会传播到最终的HTML中。谢谢！@d9k，我没有看到那个。我有一个多行注释，精确地包含指向SO答案的链接 - 包括这个答案！ - 并且使用{{ /*<anything, including newlines>*/}}语法效果很棒。另一方面，如果您选择JS中的单行注释//，您将在换行符方面遇到问题。 - Ricardo

Answer 4

我注意到当您在标签内部时无法进行评论：

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

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

- Juan Vaca

---

那是因为HTML注释也是一个标签。它破坏了标记。 - Fulldump

Answer 5

如果对你的项目有用，你可以在模板上方放置没有修饰的纯文本。当渲染组件时，它会被完全忽略。

This is some documentation about this component
   - some
   - info
<template></template>
<script></script>
<style></style>

- Rory Jarrard

Answer 6

Vue Styleguidist包含最佳实践，展示如何注释您的组件的示例。 https://vue-styleguidist.github.io/docs/Documenting.html#code-comments

但总的来说...

在template或HTML部分，请使用HTML注释。

<!-- Comment -->

在 script 部分使用JavaScript注释

// Comment
/* Comment */

在 样式 部分使用 CSS 注释

/* comment */

- ScottyG

---

我的VSCode以前在我按下“Ctrl + /”时，根据我正在工作的文件区域，准确地知道要使用哪个...在搞一些React垃圾后。你有任何想法这种行为是在哪里设置的吗？ - ScumSprocket

@ScumSprocket，很不幸的是似乎没有什么简单的方法来配置它。我所看到的唯一方法是创建你自己的VSCode扩展程序，如果对Shopify Liquid comments有帮助，我在这里已经完成了：https://github.com/Christopher-Hayes/liquid-comments。唯一需要注意的是，我是基于文件扩展名进行的。对于你的用例可能行不通。你还可以查看Volar提供的配置选项。 - Chris Hayes

Answer 7

以下提示不是关于注释（即文档化代码）的技巧，而是关于如何在开发过程中临时跳过代码块。

当注释需要打开和关闭标签时，解析器匹配它们的方式可能会不方便。例如以下代码：

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

将输出and that -->。类似地，/* this will be commented /* and so will this */ but not this */。

我的解决方案是使用v-if="false"来指定我想要（暂时）跳过的块。

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

请注意，这不应该用来替代适当的注释来记录您的代码。这只是一种方便的方式，以更好地控制您在开发过程中想要跳过的块。

- Michael Ekoka

---

哦，这太酷了，正是我在寻找的东西！！！ - JosephDoggie

在我看来，这值得提出一个问题：“如何在HTML中注释掉代码块”，并自己回答，但也许已经有了。 - JosephDoggie

非常酷 - 谢谢！ - bhu Boue vidya

我总是这样做，因为注释会干扰代码，它会转义一些字符，有时会将特殊字符替换为HTML实体等。 - Lk77

Answer 8

试试这个

<template>
  <!-- Todo::  -->
</template>

- Govar

Answer 9

在 Vue 文件 / .vue 中使用

/*-- comment in Vue file */

- Jonas Oliveira

Answer 10

根据具体的期望行为，以下是在模板部分添加注释的方法：

  <template>
              <!-- comment incorporated in the rendered output. -->
              <aside v-if="false">Some comment that won’t be in the output result.</aside>
  </template>

当然，对于后者没有使用aside标签的要求，任何假的计算值都可以起作用。 因此，<i v-if="0">一些注释</i>同样有效。

诚然，这有点复杂，但Vue似乎没有提供更直接的选项。

- psychoslave