Nuxt ESLint与Stylistic配置：template与script缩进不一致问题

问题核心是Vue模板区域的缩进规则由eslint-plugin-vue的vue/html-indent单独控制，你当前在nuxt.config.ts里配置的stylistic.indent仅作用于JS/TS代码，未覆盖模板部分。

直接在eslint.config.mjs的rules中添加模板缩进规则即可统一：

import withNuxt from './.nuxt/eslint.config.mjs';

export default withNuxt({
    files: ['**/*.ts', '**/*.js', '**/*.vue', '*.vue', '*.client.vue', '**/*.client.vue'],
    rules: {
        '@typescript-eslint/no-explicit-any': 'off',
        // 添加Vue模板缩进规则，和script保持4空格一致
        'vue/html-indent': ['error', 4, {
            attribute: 1,
            baseIndent: 1,
            closeBracket: 0,
            alignAttributesVertically: true,
            ignores: []
        }],
        // 确保JS/TS缩进也保持4空格（防止其他配置覆盖）
        '@stylistic/js/indent': ['error', 4],
        '@typescript-eslint/indent': ['error', 4]
    },
    ignores: ['schema.ts', '**/*.json'],
});

配置说明：

• vue/html-indent的第二个参数4就是你要统一的缩进空格数
• 后面的配置对象是细节调整项，保持默认即可满足大多数场景
• 额外指定JS/TS相关缩进规则，是为了确保脚本区域的缩进不会被其他配置覆盖

修改完配置后，执行npx eslint . --fix命令修复现有代码，重启ESLint服务后就能看到模板和脚本的缩进统一为4空格了。

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