eslint insists on not indenting <script> tag

Question

I have 'indent': ['warn', 2, { 'SwitchCase' : 1 }] in my eslintrc rules.

However, it complains that the indentation of this code in a Vue template is wrong:

<script>
  export default {
    name: 'Sausage',
  }
</script>

Instead, it wants this:

<script>
export default {
  name: 'Sausage',
}
</script>

I find this much uglier and harder to read — and it's inconstent with the <template> and <style> tags in the same template.

How can I tell eslint that the contents of a <script> tag should be indented one level?

Answer 1

In your .eslintrc.js, add a rule for "vue/script-indent" and turn off the "indent" rule for .vue files. There's options to configure indentation for switch statements here as well.

module.exports = {
    root: true,
    env: {
        node: true
    },
    'extends': [
        'plugin:vue/essential',
        'eslint:recommended'
    ],
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        "indent": ["error", 4],
        "vue/script-indent": ["error", 4, {
            "baseIndent": 1,
            "switchCase": 1,
            "ignores": []
        }],
        "space-before-function-paren": ["error", "never"],
    },
    overrides: [
        {
            "files": ["*.vue"],
            "rules": {
                "indent": "off"
            }
        }
    ],
    parserOptions: {
        parser: 'babel-eslint'
    }
}