script-indent.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/script-indent	enforce consistent indentation in `<script>`	v4.2.0

vue/script-indent

enforce consistent indentation in <script>

• 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

📖 Rule Details

This rule enforces a consistent indentation style in <script>. The default style is 2 spaces.

<script>
let a = {
  foo: 1,
  bar: 2
}
let b = {
      foo: 1,
      bar: 2
    },
    c = {
      foo: 1,
      bar: 2
    }
const d = {
        foo: 1,
        bar: 2
      },
      e = {
        foo: 1,
        bar: 2
      }
</script>

🔧 Options

This rule has some options.

{
  "vue/script-indent": ["error", TYPE, {
    "baseIndent": 0,
    "switchCase": 0,
    "ignores": []
  }]
}

• TYPE (number | "tab") ... The type of indentation. Default is 2. If this is a number, it's the number of spaces for one indent. If this is "tab", it uses one tab for one indent.
• baseIndent (integer) ... The multiplier of indentation for top-level statements. Default is 0.
• switchCase (integer) ... The multiplier of indentation for case/default clauses. Default is 0.
• ignores (string[]) ... The selector to ignore nodes. The AST spec is here. You can use esquery to select nodes. Default is an empty array.

::: warning Note This rule only checks .vue files and does not interfere with other .js files. Unfortunately the default indent rule when turned on will try to lint both, so in order to make them complementary you can use overrides setting and disable indent rule on .vue files: :::

{
  "rules": {
    "vue/script-indent": ["error", 4, { "baseIndent": 1 }]
  },
  "overrides": [
    {
      "files": ["*.vue"],
      "rules": {
        "indent": "off"
      }
    }
  ]
}

2, "baseIndent": 1

<script>
  let a = {
    foo: 1,
    bar: 2
  }
  let b = {
        foo: 1,
        bar: 2
      },
      c = {
        foo: 1,
        bar: 2
      }
  const d = {
          foo: 1,
          bar: 2
        },
        e = {
          foo: 1,
          bar: 2
        }
</script>

👫 Related Rules

• indent
• vue/html-indent
• @typescript-eslint/indent

🚀 Version

This rule was introduced in eslint-plugin-vue v4.2.0

🔍 Implementation

• Rule source
• Test source