Eslint-plugin-vue: Script-Indent rule inconsistences

[bodrick]

Tell us about your environment

• ESLint Version: 4.19.1
• eslint-plugin-vue Version: 4.4.0
• Node Version: 9.3.0

Please show your full configuration:

module.exports = {
    root: true,
    parserOptions: {
        parser: 'babel-eslint',
        sourceType: 'module'
    },
    extends: ['airbnb-base', 'plugin:vue/recommended'],
    // check if imports actually resolve
    settings: {
        'import/resolver': {
            webpack: {
                config: './webpack/build/webpack.base.conf.js'
            }
        }
    },
    // add your custom rules here
    rules: {
        'import/no-unresolved': [
            'error',
            {
                caseSensitive: false
            }
        ],
        'linebreak-style': ['error', 'windows'],
        'arrow-parens': ['error', 'always'],
        'eol-last': ['off'],
        'max-len': ['off'],
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
        'comma-dangle': ['error', 'never'],
        indent: [
            'error',
            4,
            {
                SwitchCase: 1
            }
        ],
        // Vue specific overrides
        'vue/script-indent': [
            'error',
            4,
            {
                switchCase: 1
            }
        ],
        'vue/html-indent': [
            'error',
            4,
            {
                attribute: 1,
                closeBracket: 0,
                alignAttributesVertically: true,
                ignores: []
            }
        ],
        'vue/v-on-style': ['error', 'longform'],
        'vue/max-attributes-per-line': ['off']
    }
};

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

<template>
    <b-modal size="lg" title="Exam Schedule" ok-only ok-title="Close" v-on:hide="modalHide" visible>
        <template v-if="selectedSchedule === null">
            <alert v-model="alertDetails" />
            <p>Select a time you can take the exam by clicking "Select" from the list below. If you have previously chosen a time it will be labeled "Scheduled". You may change your choice by clicking "Select" for another time.</p>
            <schedules-table v-on:selected="scheduleSelected" :selected-exam="selectedExam" />
        </template>
        <template v-else>
            <confirm-schedule :selected-schedule="selectedSchedule" v-on:cancel="confirmScheduleCancelled" v-on:confirm="confirmSchedule" />
        </template>
    </b-modal>
</template>

<script>
import Alert from '@/components/Home/Alert.vue';
import SchedulesTable from '@/components/Home/SchedulesTable.vue';
import ConfirmSchedule from '@/components/Home/ConfirmSchedule.vue';
import { registerForExam } from '@/lib/api';

export default {
    name: 'RegisterDialog',
    components: {
        Alert,
        ConfirmSchedule,
        SchedulesTable
    },
    props: {
        selectedExam: {
            type: Object,
            default: null,
            required: true
        }
    },
    data() {
        return {
            selectedSchedule: null,
            alertDetails: {
                variant: 'info',
                message: null
            }
        };
    },
    methods: {
        modalHide() {
            this.$emit('closed');
        },
        scheduleSelected(schedule) {
            this.alertDetails.variant = 'info';
            this.alertDetails.message = null;
            this.selectedSchedule = schedule;
        },
        confirmScheduleCancelled() {
            this.selectedSchedule = null;
        },
        confirmSchedule() {
            registerForExam(this.selectedExam.IdExam, this.selectedSchedule.IdSchedule)
                .then((response) => {
                    this.alertDetails.variant = 'success';
                    this.alertDetails.message = 'Exam registration has been created';
                    this.selectedExam.Registration = response.data;
                })
                .catch((error) => {
                    this.alertDetails.variant = 'danger';
                    this.alertDetails.message = `Unable to register for exam - ${error.response.status} : ${
                        error.response.statusText
                    }`;
                })
                .finally(() => {
                    this.selectedSchedule = null;
                });
        }
    }
};
</script>

What did you expect to happen?
I would expect this code to validate in regards to script-spacing settings specified in eslint config.

What actually happened? Please include the actual, raw output from ESLint.
Eslint returns an error -

70:1   error  Expected indentation of 12 spaces but found 16 spaces        vue/script-indent

I had been using version 4.2.0 of the plugin without any issues.

[bodrick]

There was a fix in eslint that seems like it could be related https://github.com/eslint/eslint/commit/2e68be643178eeb86f2b9f66bc1670b624cb09f2

[patric-eberle]

Have the same error. Is only shown when }) is on a separate line and followed by ;.

[simonbrent]

I have a similar issue, present in both 4.2.0 and 4.4.0, as follows:

Configuration

{
  'extends': [
    'plugin:vue/essential',
  ],
  'rules': {
    'indent'            : 'off',
    'vue/script-indent' : [ 'error', 2, { baseIndent: 1, switchCase: 1, ignores: [] }],
  },
}

Vue file

<script>
  const x = (
    1 && (
      1 && 1
    )
  );

  const y = (
    1 && (
      1
    )
  );
</script>

Errors

4:1  error  Expected indentation of 4 spaces but found 6 spaces  vue/script-indent

I would expect to see no errors, and it is definitely inconsistent as there is no error for line 10.

[michalsnik]

Related issues:
https://github.com/vuejs/eslint-plugin-vue/issues/443
https://github.com/vuejs/eslint-plugin-vue/issues/459

[ma53]

I'm in the same boat as @patric-eberle: separate lines with }); are reported as having improper indentation.

[gluons]

I also face the similar problem.

My config:

{
  "rules": {
    "indent": [
      "error",
      "tab",
      {
        "SwitchCase": 1
      }
    ],
    "vue/script-indent": [
      "error",
      "tab",
      {
        "switchCase": 1
      }
    ]
  }
}

When I start member expression in new line, I get this error.

SomePromise
    .then(() => {
    })
    .catch(() => {
    }); // This line cause error.

Expected indentation of 0 tabs but found 1 tab. (vue/script-indent)

After try to solve this error I get new error from ESLint.

SomePromise
    .then(() => {
    })
    .catch(() => {
}); // This line again

Expected indentation of 1 tab but found 0. (indent)

🤦🤦🤦

[sqal]

I wanted to open a new issue but I guess fix (PR: #503) from @ota-meshi will also resolve my issue as well? Playground reproduction

[euclid1990]

@sqal Have your pull request been merged ? I am facing the similar problem :(

[vannitotaro]

@simonbrent

About https://github.com/vuejs/eslint-plugin-vue/issues/441#issuecomment-380450948 try 'ignores': ['LogicalExpression'] instead of 'ignores': []

Reference:
https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/script-indent.md
↓
https://eslint.org/docs/rules/indent
↓
https://eslint.org/docs/developer-guide/selectors
↓
https://github.com/estools/esquery
↓
http://esprima.org/doc/index.html
↓
https://esprima.readthedocs.io/en/4.0/
↓
https://esprima.readthedocs.io/en/4.0/syntax-tree-format.html#logical-expression

[simonbrent]

@vannitotaro, that works for the scenario I described, thanks.

Sadly I have another scenario, as follows:

        const foo = [
          bar
            ? [
              1,
              2,
            ]
            : [
              3,
              4,
            ], // <-- Expected indentation of 10 spaces but found 12 spaces.eslint(vue/script-indent)
        ];

Strangely there are no errors when you have another item in the foo array (either at the top or the bottom)

        const foo = [
          bar,
          baz
            ? [
              1,
              2,
            ]
            : [
              3,
              4,
            ],
        ];

Since I'm not particularly keen on the idea of ignoring all LogicalExpression or ConditionalExpression, or working out how to precisely target each bug scenario with AST as I come across it, I'm going to stick with eslint-disable blocks for now :-(