`vue/script-indent` applies to js files but should not

[probil]

Tell us about your environment

• ESLint Version: 4.19.1
• eslint-plugin-vue Version: 4.5.0
• Node Version: 10.4.0

Please show your full configuration:

{
  "extends": [
    "nc/vue",
    "plugin:vue/recommended"
  ],
  "plugins": [
    "vue"
  ],
  "env": {
    "browser": true
  },
  "settings": {
    "import/resolver": {
      "webpack": {
        "config": "vuejsapp/build/webpack.base.conf.js"
      }
    },
    "import/ignore": ["node_modules"]
  },
  "rules": {
    "import/extensions": ["error", "always", {
      "js": "never",
      "vue": "never"
    }],
    "vue/html-self-closing": ["error", {
      "html": {
        "void": "any",
        "normal": "any",
        "component": "always"
      },
      "svg": "any",
      "math": "any"
    }],
    "vue/attributes-order": ["off"],
    "vue/order-in-components": ["off"],
    "vue/html-closing-bracket-newline": ["error", {
      "singleline": "never",
      "multiline": "always"
    }],
    "vue/html-closing-bracket-spacing": ["error", {
      "startTag": "never",
      "endTag": "never",
      "selfClosingTag": "always"
    }],
    "vue/prop-name-casing": ["error", "camelCase"],
    "vue/script-indent": ["error", 2, {
      "baseIndent": 1
    }]
  }
}

What did you do? Please include the actual source code causing the issue.
I've added this rule:

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

Vue store module:

Before eslint --fix:

# src/store/modules/siteCustomerNavigation.js
export default {
  namespaced: true,
  state: {
    recentHistory: {
      items: [],
    },
  },
  mutations: {
    SOCKET_USER_NAVIGATION_UPDATED(state, navigation) {
      //...
      if (currentItemIndex > -1) {
        const updatedItem = Object.assign({},
          state.recentHistory.items[currentItemIndex],
          navigation
        );
      }
    },
  }
};

What did you expect to happen?

Indent rule applied to *.js files.

After eslint --fix:

export default {
  namespaced: true,
  state: {
    recentHistory: {
      items: [],
    },
  },
  mutations: {
    SOCKET_USER_NAVIGATION_UPDATED(state, navigation) {
      //...
      if (currentItemIndex > -1) {
        const updatedItem = Object.assign({},
                                          state.recentHistory.items[currentItemIndex],
                                          navigation
        );
      }
    },
  }
};

What actually happened? Please include the actual, raw output from ESLint.

Due to documentation it should enforce indend in <script> of vue component only. But actually it changes js files that are not vue components.

[michalsnik]

Thanks for posting this issue @probil You're right. We should probably limit this rule to .vue files.
However you can tweak your setting to enable original indent rule on .js files and vue/script-indent on .vue. This is how you do it:

{
  "root": true,
  "parserOptions": {
    "parser": "babel-eslint",
    "sourceType": "module"
  },
  "extends": [
    "plugin:vue/essential"
  ],
  "rules": {
    "indent": ["error", 4]
  }
  "overrides": [
    {
      "files": ["*.vue"],
      "rules": {
        "indent": "off",
        "vue/script-indent": ["error", 4, { "baseIndent": 1 }]
      }
    }
  ]
}

[probil]

Ok I will try. Thanks for the response :)