How to remove the default indentation of vue?

v6
1

Hi Marijn! I recently encountered a problem when using @codemirror/lang-vue. I found that when I pressed enter to create a new line, the code inside <script></script> and <style></style> would be indented one unit by default, like this:

<template>
  <button></button>
</template>
<script>
  export default {
    data() {
      return {}
    }
  }
</script>
<style scoped>
  button {}
</style>

But in fact this is not necessary, the official Vue code like:

<template>
  <button></button>
</template>
<script>
export default {
  data() {
    return {}
  }
}
</script>
<style scoped>
button {}
</style>

How can I remove the default indentation (just remove the first level of indentation)?

2

This doesn’t seem a big enough deal to add a configuration option for, but you can do something like this to replace the HTML mode’s indentation logic, and pass such an HTML configuration to the vue mode.

3

Thank you very much, I managed to make it happen!

4

It would be nice if the default matched these examples: Examples | Vue.js

It’s easy to find code on the vue site that indents in <script> tags, but these examples seem to be the preferred way.