vue/script-indent (ESLint rule)

From the eslint-plugin-vue docs:

Create .eslintrc.* file to configure rules. See also: http://eslint.org/docs/user-guide/configuring.

Example .eslintrc.js:

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    'plugin:vue/essential'
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue/no-unused-vars': 'error'
  }
}

So in your .eslintrc.js, add the script-indent rule to the rules property. Note the eslint-plugin-vue rule names are all prefixed with vue/, so use "vue/script-indent" in the rules property below:

module.exports = {
  extends: [
    'plugin:vue/essential',
  ],
  rules: {
    'vue/script-indent': ['error', 2, {
      baseIndent: 0,
      switchCase: 0,
      ignores: []
    }]
  }
}

Finally, ensure you have the ESLint VS Code extension installed to enable formatting from the IDE.

Prettier

Your workspace settings point to Prettier, so make sure your Prettier options align with the vue/script-indent rule. That is, the tabWidth value in Prettier should match the tab width in vue/script-indent.

For example, to require a 4-space tab width, create .prettierrc in the root of your project with the following JSON:

// .prettierrc
{             👇
  "tabWidth": 4
}

...and update .eslintrc.js to match:

// .eslintrc.js
module.exports = {
  rules: {                         👇
    'vue/script-indent': ['error', 4, {
      baseIndent: 0,
      switchCase: 0,
      ignores: []
    }]
  }
}

Also ensure you have the Prettier VS Code extension installed to enable formatting from the IDE.