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

Posted 2023-03-27

【中文标题】在 VueJS 中总是出现“不允许尾随空格”的错误

【英文标题】：Always Getting an Error of "Trailing Spaces not Allowed" in VueJS

【发布时间】：2020-03-06 17:56:18

【问题描述】：

我的项目使用 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>

【问题讨论】：

你用什么IDEA？它可能会自动启用 eslint

抱歉，你说的IDEA是什么意思？你说的是IDE吗？

是的，对不起，我的错误:)

好的，实际上我使用 vscode 作为我的 IDE/编辑器。

【参考方案1】：

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

在 vscode 中进入设置 (ctrl+,) 在设置搜索栏中输入“修剪尾随空格” 在下方选中“修剪尾随空格”选项。 重启 vscode。 现在，每当您保存文件时，vscode 都会自动修剪尾随空格。

如果问题仍然存在，请告诉我。

上述解决方案不起作用，但仍为其他人保留上述解决方案。

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

【参考方案2】：

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

【参考方案3】：

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