Question

我的项目使用Vue和Vuetify，并且每次编译时，此错误总是在CLI中出现：“不允许尾随空格 src \ App.vue：39：11“

我正在使用ESlint，但是我已经添加了注释“ / * eslint-disable eol-last * /”，但是规则仍然没有被禁用。

这是我的App.vue文件：

<template>
  <div id="app">
    <div class="header">
      <h4>VUE.js SPA</h4>
     </div>
<v-card class="align-left">
  <v-navigation-drawer permanent>
    <v-list-item>
      <v-list-item-content>
        <v-list-item-title class="title">
          <router-link to="/" class="nav-link">Home</router-link>
        </v-list-item-title>
      </v-list-item-content>
      <v-list-item-content>
        <v-list-item-title class="title">
          <router-link to="/about" class="nav-link">About Me</router-link>
        </v-list-item-title>
      </v-list-item-content>
      <v-list-item-content>
        <v-list-item-title class="title">
          <router-link to="/works" class="nav-link">Works</router-link>
        </v-list-item-title>
      </v-list-item-content>
    </v-list-item>

    <v-divider></v-divider>

    <v-list dense nav>
      <v-list-item link>
        <v-list-item-content>
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>
</v-card>
<div class="content">
  <router-view></router-view>
</div>  
 </div>
</template>

<script>
 export default {
  data () {
    return {
      items: [
        { title: 'Home' },
        { title: 'About' },
        { title: 'Works' }
      ]
    }
   }
  }
 </script>

Answer 1

您应该运行 npm run lint -- --fix 以继续。

Answer 2

我复制了您的代码，然后在第39行中看到，</div>之后有一些空格。很简单，您应该删除空间以忽略错误。

Answer 3

我认为这是一个vscode问题。请尝试以下操作：

在vscode中转到设置（ctrl +，）
在设置搜索栏中，键入“修剪尾随空格”
在下面选中“修剪尾随空白”选项。
重新启动vscode。
现在，每当您保存文件时，vscode都会自动修剪尾随空格。

让我知道问题是否仍然存在。

以上解决方案不起作用，但仍将以上解决方案保留给他人。

而不是使用“ / * eslint-disable eol-last /”，而不是使用“ / eslint-disable no-trailing-spaces * /”

在VueJS中总会出现“不允许尾随空格”错误

3 个答案: