vue/script-indent false positive on switch case in methods

[evenfrost]

Tell us about your environment

• ESLint Version: v4.19.1
• eslint-plugin-vue Version: 4.4.0
• Node Version: 9.11.1

Please show your full configuration:

{
  "extends": [
    "../.eslintrc",
    "plugin:vue/base",
    "plugin:vue/essential",
    "plugin:vue/strongly-recommended",
    "plugin:vue/recommended"
  ],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "typescript-eslint-parser"
  },
  "plugins": [
    "import",
    "typescript"
  ],
  "settings": {
    "import/resolver": {
      "webpack": {
        "config": "./webpack.dev.js"
      }
    }
  },
  "rules": {
    "no-undef": "off",
    "import/extensions": ["error", "always", {
      "js": "never",
      "ts": "never"
    }],
    "vue/html-closing-bracket-newline": ["error", {
      "singleline": "never",
      "multiline": "always"
    }],
    "vue/html-closing-bracket-spacing": ["error", {
      "startTag": "never",
      "endTag": "never",
      "selfClosingTag": "always"
    }],
    "vue/html-self-closing": ["error", {
      "html": {
        "normal": "never"
      }
    }],
    "vue/prop-name-casing": ["error", "camelCase"],
    "vue/script-indent": ["error", 2]
  }
}

What did you do? Please include the actual source code causing the issue.

export default Vue.extend({
  methods: {
    getStarClassNamePostfix(index: number) {
      let starClassNamePostfix: string = '';

      switch (index) {
        case 0:
          starClassNamePostfix = '-lighter';
          break;
        case 1:
          starClassNamePostfix = '-light';
          break;
        case 2:
          starClassNamePostfix = '';
          break;
        case 3:
          starClassNamePostfix = 'dark';
          break;
        case 4:
          starClassNamePostfix = 'darker';
          break;
        default:
          starClassNamePostfix = '';
      }

      return starClassNamePostfix;
    },
  },
});

When using switch case in methods with configured vue/script-indent param, eslint-plugin-vue falsely reports wrong indentation inside it as seen here:

However, when changing indentation to that considered proper one by vue/script-indent (which is actually wrong), 'native' indent ESLint rule comes in:

[petergaal91]

Similar issue here:

   8:1  error  Expected indentation of 0 tabs but found 1  indent
   9:1  error  Expected indentation of 0 tabs but found 1  indent
  12:1  error  Expected indentation of 0 tabs but found 1  indent

<template>
	<ul class="v-menu">
		<slot />
	</ul>
</template>

<script lang="ts">
	import Component from "vue-class-component";
	import Vue from "vue";

	@Component
	export default class VMenu extends Vue {
		//
	}
</script>

<style lang="scss" src="./menu.scss"></style>

.eslintrc config:

{
  "root": true,
  "env": {
    "node": true,
    "es6": true,
    "browser": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
  ],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "typescript-eslint-parser",
    "ecmaVersion": 7,
    "sourceType": "module"
  },
  "plugins": [
    "compat",
    "node",
    "standard",
    "vue"
  ],
  "rules": {
    "compat/compat": "error",
    "no-console": "off",
    "no-empty": [
      "error",
      {
        "allowEmptyCatch": true
      }
    ],
    "brace-style": [
      "error",
      "1tbs",
      {
        "allowSingleLine": true
      }
    ],
    "no-mixed-spaces-and-tabs": "error",
    "no-multiple-empty-lines": "error",
    "no-multi-str": "error",
    "one-var": [
      "error",
      "never"
    ],
    "dot-location": [
      "error",
      "property"
    ],
    "operator-linebreak": [
      "error",
      "before"
    ],
    "padded-blocks": [
      "error",
      "never"
    ],
    "key-spacing": [
      "error",
      {
        "beforeColon": false,
        "afterColon": true
      }
    ],
    "space-unary-ops": [
      "error",
      {
        "words": false,
        "nonwords": false
      }
    ],
    "no-spaced-func": "error",
    "space-before-function-paren": [
      "error",
      {
        "anonymous": "always",
        "named": "never"
      }
    ],
    "comma-dangle": [
      "error",
      "always-multiline"
    ],
    "no-trailing-spaces": "error",
    "yoda": [
      "error",
      "never"
    ],
    "comma-style": [
      "error",
      "last"
    ],
    "curly": [
      "error",
      "all"
    ],
    "eol-last": "error",
    "indent": [
      "error",
      "tab",
      {
        "SwitchCase": 1
      }
    ],
    "linebreak-style": [
      "error",
      "unix"
    ],
    "no-underscore-dangle": "error",
    "no-multi-spaces": "error",
    "semi-spacing": [
      "error",
      {
        "before": false,
        "after": true
      }
    ],
    "semi": [
      "error",
      "always"
    ],
    "space-infix-ops": "error",
    "keyword-spacing": [
      "error",
      {
        "overrides": {
          "else": {
            "before": true
          },
          "while": {
            "before": true
          },
          "catch": {
            "before": true
          }
        }
      }
    ],
    "spaced-comment": [
      "error",
      "always",
      {
        "markers": ["/"]
      }
    ],
    "space-before-blocks": [
      "error",
      "always"
    ],
    "eqeqeq": "error",
    "guard-for-in": "error",
    "no-extend-native": "error",
    "block-scoped-var": "error",
    "no-use-before-define": [
      "error",
      {
        "functions": false
      }
    ],
    "max-depth": [
      "error",
      5
    ],
    "max-params": [
      "error",
      20
    ],
    "no-caller": "error",
    "no-irregular-whitespace": "error",
    "no-new": "error",
    "no-shadow": 0,
    "no-extra-parens": "error",
    "no-undef": "off",
    "no-unused-vars": "off",
    "no-invalid-this": "error",
    "no-eq-null": "error",
    "no-control-regex": "off",
    "strict": 0,
    "quotes": ["error", "double", { "allowTemplateLiterals": true }],
    "vue/html-indent": [
      "error",
      "tab"
    ],
    "vue/script-indent": [
      "error",
      "tab",
      {
        "baseIndent": 1,
        "switchCase": 1
      }
    ],
    "vue/max-attributes-per-line": [
      2,
      {
        "singleline": 3,
        "multiline": {
          "max": 3,
          "allowFirstLine": false
        }
      }
    ]
  }
}

[michalsnik]

I'm closing it in favour of #441

[KaelWD]

@evenfrost adding "switchCase": 1 fixes it for me.

[evenfrost]

@KaelWD thanks, but with "switchCase": 1 it still breaks when I use // no default comment as ESLint recommends in case of no default case.

[doox911]

@evenfrost adding "switchCase": 1 fixes it for me.

  'vue/script-indent': [
    'error', 2, {
      baseIndent: 1,
      switchCase: 1,
    },
  ],