Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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:

eslint-vue-indent

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

eslint-indent

Issue Analytics

State:
Created 5 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

8reactions

KaelWDcommented, May 2, 2018

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

1reaction

evenfrostcommented, May 2, 2018

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

screenshot from 2018-05-02 19-38-52

Top Results From Across the Web

Switch statement for multiple cases in JavaScript

Upon a match, all subsequent case statements until 'break' fire no matter what the case says. var onlyMen = true; var onlyWomen =...

The "switch" statement - The Modern JavaScript Tutorial

A switch statement can replace multiple if checks. It gives a more descriptive way to compare a value with multiple variants.

JavaScript Switch Case – JS Switch Statement Example

In programming, a switch statement is a control-flow statement that tests the value of an expression against multiple cases. This is the basic ......

Pattern Matching for switch Expressions and Statements

A switch statement transfers control to one of several statements or expressions, depending on the value of its selector expression. In earlier releases ......

How To Use the Switch Statement in JavaScript - DigitalOcean

In this code block, we will find the current day of the week with the new Date() method, and getDay() to print a...