[{ "resource": "/d:/code/自己前端代码/myapp/src/components/Leftaside.vue", "owner": "_generated_diagnostic_collection_name_#0", "severity": 8, "message": "[vue/no-parsing-error]\nParsing error: missing-whitespace-between-attributes.", "source": "eslint-plugin-vue", "startLineNumber": 9, "startColumn": 43, "endLineNumber": 9, "endColumn": 43 }]
时间: 2025-03-12 16:00:55 浏览: 41
### 解决 Vue 文件中 `eslint-plugin-vue` 报告的 `missing-whitespace-between-attributes` 错误
当遇到解析错误 `missing-whitespace-between-attributes` 时,这意味着 ESLint 发现 HTML 属性之间缺乏必要的空白字符[^1]。此问题通常发生在模板部分,即 `<template>` 中。
为了修正这个问题,可以采取以下措施:
#### 修改代码风格以遵循规则
确保所有的属性间都有至少一个空格分隔。例如:
```html
<!-- 不推荐 -->
<img src="image.png"alt="description">
<!-- 推荐 -->
<img src="image.png" alt="description">
```
#### 配置 `.eslintrc.js` 或者其他配置文件来调整规则设置
如果认为该规则对于项目不是必需的,则可以在项目的 ESLint 配置文件里禁用它或者修改其行为。具体做法是在 rules 下添加如下条目:
```javascript
module.exports = {
// ...
'rules': {
'vue/html-whitespace-sensitivity': ['error', 'strict'],
'vue/multi-word-component-names': 'off',
'vue/require-name-property': 'warn'
}
};
```
注意这里并没有直接关闭 `missing-whitespace-between-attributes` 这个特定警告,而是通过控制更广泛的 `html-whitespace-sensitivity` 来间接影响到这个检查项[^2]。
#### 安装并配置完整的 ESlint 工具链
考虑到仅安装基础版本可能会遗漏一些依赖包从而引发更多复杂情况,建议按照最佳实践一次性引入所有必要组件。这可以通过运行命令行工具完成全部插件的一键式安装[^4]:
```bash
cnpm install --save-dev \
babel-eslint \
eslint \
eslint-friendly-formatter \
eslint-loader \
eslint-plugin-html \
eslint-config-standard \
eslint-plugin-promise \
eslint-plugin-standard \
eslint-plugin-import \
eslint-plugin-node \
eslint-plugin-flow-vars \
eslint-plugin-react \
eslint-config-vue \
eslint-plugin-vue \
[email protected]
```
#### 更新 Vite 构建环境下的 ESLint 插件集成方式
如果是基于 Vite 的现代前端开发流程,那么还需要适当更新构建脚本以便更好地兼容新的 Linter 设置[^3]:
```javascript
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import eslint from 'vite-plugin-eslint';
export default defineConfig({
plugins: [
vue(),
eslint()
],
});
```
以上方法能够有效处理由 `eslint-plugin-vue` 引起的关于缺失属性间隔空间的问题,并且有助于维护一致性和可读性的编码标准。
阅读全文
相关推荐


















