Vue报错：Mixed spaces and tabs no-mixed-spaces-and-tabs

最新推荐文章于 2025-03-04 15:19:55 发布

沐日（Shrek）

最新推荐文章于 2025-03-04 15:19:55 发布

阅读量7.2k

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_53499304/article/details/125253741

版权

vue 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了在Vue开发中遇到的ESLint错误`no-mixed-spaces-and-tabs`的问题分析、规则详情及两种解决办法，包括取消eslint规则和使用Vetur代码格式化插件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

no-mixed-spaces-and-tabs

1、问题分析

在开发过程中使用了ESLint，用来规范代码风格。在Webpack配置中使用了eslint-loader。eslint是语法检查工具，缺点是对所写代码要求过于严格。
在"extends": "eslint:recommended" 配置文件中的属性启用此规则。
大多数代码惯例要求使用制表符或空格来缩进。因此，如果单行代码与制表符和空格缩进，通常会出现错误。

2、规则细节

此规则不允许使用混合空格和制表符进行缩进。

此规则的错误代码示例：

/*eslint no-mixed-spaces-and-tabs: "error"*/

function add(x, y) {
// --->..return x + y;

      return x + y;
}

function main() {
// --->var x = 5,
// --->....y = 7;

    var x = 5,
        y = 7;
}

此规则的正确代码示例：

/*eslint no-mixed-spaces-and-tabs: "error"*/

function add(x, y) {
// --->return x + y;
    return x + y;
}

3、解决办法

3.1 取消eslint

打开 build\webpack.base.conf.js 这个文件
找到rules下的config.dev.useEslint
将createLintingRule方法删除。
重启项目

ESLint官方文档

3.2 代码格式化
需要插件：Vetur
Vetur是一个功能非常强大的插件，为Vscode 编写Vue(shifr + alt + f 快捷键)代码提供了强大支持，也支持大多数主流的前端开发脚本。
Vetur官方文档