vue中npm打包遇到× eslint —fix found some errors. Please fix them and try committing again.husky > pre-commit hook failed (add —no-verify to bypass)报错解决方案-卓伊凡

问题背景

今天也是更新蜻蜓Q系统旗舰版遇到的报错，主要是更新下后台说明

husky > pre-commit (node v16.14.2)
↓ Stashing changes… [skipped]
→ No partially staged files found…

Running linters…
Running tasks for src/*/.{js,vue}
× eslint —fix
git add

× eslint —fix found some errors. Please fix them and try committing again.

G:\clone\st-qingting-admin\src\views\login\index.vue
52:72 error Parsing error: x-invalid-end-tag vue/no-parsing-error
55:9 error Parsing error: x-invalid-end-tag vue/no-parsing-error
56:52 error Parsing error: x-invalid-end-tag vue/no-parsing-error
57:70 error Parsing error: x-invalid-end-tag vue/no-parsing-error
151:2 error Mixed spaces and tabs no-mixed-spaces-and-tabs
152:2 error Mixed spaces and tabs no-mixed-spaces-and-tabs

G:\clone\st-qingting-admin\src\views\dashboard\admin\components\PanelGroup.vue
31:46 error Parsing error: x-invalid-end-tag vue/no-parsing-error

✖ 7 problems (7 errors, 0 warnings)

husky > pre-commit hook failed (add —no-verify to bypass)

这个错误信息表明在提交代码时，Husky 钩子中的 pre - commit 钩子执行 ESLint 检查失败，从而阻止了代码的提交。下面为你详细分析错误原因并给出解决办法：

错误分析

• x - invalid - end - tag 错误：这是 Vue 模板中出现了无效的结束标签，可能是标签没有正确闭合，或者存在不匹配的标签。
• no - mixed - spaces - and - tabs 错误：代码中混合使用了空格和制表符，违反了 ESLint 的规则。

解决办法

1. 修复 x - invalid - end - tag 错误

你需要检查 G:\clone\st - qingting - admin\src\views\login\index.vue 和 G:\clone\st - qingting - admin\src\views\dashboard\admin\components\PanelGroup.vue 文件，确保所有的 HTML 标签和 Vue 自定义标签都正确闭合。

例如，错误可能出现在类似以下的代码中：

<template>
  <div>
    <p>Some text
    <!-- 这里的 <p> 标签没有正确闭合 -->
    <button>Click me</button>
  </div>
</template>

需要修改为：

<template>
  <div>
    <p>Some text</p>
    <button>Click me</button>
  </div>
</template>

2. 修复 no - mixed - spaces - and - tabs 错误

你可以使用代码编辑器的功能将代码中的制表符统一替换为空格，或者将空格统一替换为制表符。

以 Visual Studio Code 为例：

• 打开文件，在编辑器右下角可以看到当前使用的缩进方式（如 Spaces: 2 或 Tab Size: 4）。
• 点击它，选择 Convert Indentation to Spaces 或 Convert Indentation to Tabs 来统一缩进方式。

3. 手动运行 ESLint 检查并修复

你可以手动运行 ESLint 命令来检查并尝试自动修复错误：

npx eslint --fix src/**/*.{js,vue}

运行该命令后，ESLint 会尝试自动修复一些可以修复的错误。然后再次尝试提交代码：

git add .
git commit -m "Your commit message"

4. 绕过 pre - commit 钩子（不推荐）

如果你确实需要暂时绕过 pre - commit 钩子进行提交，可以使用 --no - verify 选项：

git commit --no-verify -m "Your commit message"

但这种方法只是暂时的解决方案，不建议经常使用，因为 pre - commit 钩子的目的是确保代码质量。

通过以上步骤，你应该能够解决 ESLint 检查失败的问题，顺利提交代码。

我们采用第一种方法修复确保所有的 HTML 标签和 Vue 自定义标签都正确闭合，这个报错引起的原因可能是同事改过后台代码造成的。

还有就是同事是做web前端以前的习惯用
，这个也是问题原因，其次问题分析

标签使用错误：在 HTML 里，
是自闭合标签，在 HTML5 中可写成
，在 XHTML 等严格模式下需写成
。但代码里使用的
是错误的，应替换为
。
注释未正确结束：代码里有未正确结束的注释，如 <— 应该是 <!— ，虽然当前代码中这部分注释没影响标签闭合，但要保证注释格式正确。

将代码里所有的
替换成
，保证标签正确闭合。同时，要确保注释格式正确，虽然当前未正确结束的注释不影响标签闭合，但规范的注释格式有助于代码的可读性和维护性。

ok完美解决打包了后台