|
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完美解决打包了后台
| 
