如何解决Vue 3搭配ESLint时的缩进及格式报错问题？

你遇到的错误示例如下：

C:\Users\Acer\Desktop\salam\src\views\HomeView.vue
2:1  error  Unexpected tab character  no-tabs
3:1  error  Unexpected tab character  no-tabs
4:1  error  Unexpected tab character  no-tabs
5:1  error  Unexpected tab character  no-tabs
6:1  error  Unexpected tab character  no-tabs

C:\Users\Acer\Desktop\salam\src\views\Login.vue
2:1   error  Unexpected tab character                            no-tabs
3:1   error  Unexpected tab character                            no-tabs
4:1   error  Unexpected tab character                            no-tabs
10:1   error  Unexpected tab character                            no-tabs
10:1   error  Expected indentation of 2 spaces but found 1 tab    indent
10:8   error  Component name "Login" should always be multi-word  vue/multi-word-component-names
11:1   error  Unexpected tab character                            no-tabs
11:1   error  Expected indentation of 2 spaces but found 1 tab    indent
12:1   error  Unexpected tab character                            no-tabs
12:1   error  Expected indentation of 4 spaces but found 2 tabs   indent
13:1   error  Unexpected tab character                            no-tabs
13:1   error  Expected indentation of 2 spaces but found 1 tab    indent
15:10  error  Newline required at end of file but not found       eol-last

✖ 18 problems (18 errors, 0 warnings)
5 errors and 0 warnings potentially fixable with the `--fix` option.

一、修复格式问题（推荐） #

这些错误都是代码格式不符合ESLint规范导致的，修复后更利于代码维护和团队协作：

• 缩进问题：ESLint默认要求用空格而非制表符（Tab）缩进，你可以把编辑器的缩进设置为2个空格，批量替换所有Tab为空格；或者直接运行自动修复命令：

  npx eslint . --fix
  

  这条命令会自动修复缩进、文件末尾换行等可自动修复的错误。
• 组件命名问题：vue/multi-word-component-names规则要求组件名必须为多单词，将Login改为LoginView或AuthLogin这类多单词命名即可。
• 文件末尾换行：在Login.vue文件最后添加一个空行，即可解决eol-last错误。

二、关闭ESLint对应的检测规则（不推荐，仅特殊场景使用） #

如果不需要遵循这些规则，可在项目根目录的.eslintrc.js（或.eslintrc.json）文件中修改规则配置：

module.exports = {
  // 其他原有配置...
  rules: {
    // 关闭禁止使用Tab的检测
    'no-tabs': 'off',
    // 关闭缩进检测（或改为允许Tab：["error", "tab"]）
    'indent': 'off',
    // 关闭组件名多单词要求
    'vue/multi-word-component-names': 'off',
    // 关闭文件末尾换行检测
    'eol-last': 'off'
  }
}

修改后重启ESLint服务或重新运行项目即可生效。

内容的提问来源于stack exchange，提问作者user536475