Vue.js/Eslint/Prettier配置异常：Eslint提示缩进宽度错误且未修复指定规则

针对你遇到的两个问题，我结合你的配置和LunarVim环境给出具体解决方案：

问题1：space-before-function-paren规则未生效 #

你已经在ESLint里开启了space-before-function-paren: ['error', 'always']，但因为你引入了plugin:prettier/recommended，这个配置会自动禁用所有和Prettier冲突的ESLint规则——而函数括号前的空格正好是Prettier自主管控的格式化项，所以ESLint的这条规则被覆盖了。

解决步骤：

• 修改你的Prettier配置文件，添加spaceBeforeFunctionParen选项，和ESLint规则保持一致：

{ 
  "tabWidth": 4, 
  "singleQuote": true,
  "spaceBeforeFunctionParen": true
}

• 保存配置后，重启LunarVim并重新格式化代码，Prettier会自动为函数括号前添加空格，同时ESLint也会认可这个格式（因为plugin:prettier/recommended会让ESLint以Prettier的规则作为校验标准）。

问题2：Vue模板部分缩进宽度错误提示 #

你设置了Prettier的tabWidth:4，但模板里出现2空格缩进的错误，是因为ESLint的indent规则只针对JavaScript代码，Vue模板的缩进需要单独用vue/html-indent规则配置，而plugin:vue/recommended的默认模板缩进是2空格，和你的Prettier设置冲突了。

解决步骤：

• 在你的ESLint配置的rules里添加vue/html-indent规则，指定缩进为4：

rules: {
  // ... 其他已有的规则
  'vue/html-indent': ['error', 4],
  // ...
}

• 同时，确保Prettier的tabWidth和这个规则保持一致（你已经设置为4，无需修改）。

LunarVim环境额外检查点 #

为了确保配置生效，你需要确认LunarVim的相关设置：

• 确保你安装了nvim-lspconfig并正确配置了volar（Vue官方语言服务器），它会识别Vue文件的ESLint规则。
• 检查是否通过null-ls或类似插件注册了Prettier和ESLint格式化器，确保LunarVim在保存时会自动触发格式化。比如在你的config.lua里可以添加类似配置：

local null_ls = require("null-ls")
null_ls.setup({
  sources = {
    null_ls.builtins.formatting.prettierd,
    null_ls.builtins.diagnostics.eslint_d,
    null_ls.builtins.code_actions.eslint_d,
  },
})

• 确认LunarVim的自动保存格式化功能开启，比如设置vim.cmd([[autocmd BufWritePre * lua vim.lsp.buf.format()]])。

做完这些配置后，重启LunarVim，你的两个问题应该就能解决了。

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