padding-line-between-component-options.md

pageClass	sidebarDepth	title	description
rule-details	0	vue/padding-line-between-component-options	require or disallow padding lines between top-level component options

vue/padding-line-between-component-options

require or disallow padding lines between top-level component options

• ❗ This rule has not been released yet.
• 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

📖 Rule Details

This rule requires or disallows blank lines between Vue component options.

<script>
  /* ✓ GOOD */
  export default {
    name: 'a-button',

    /**
     * Ceci n'est pas un commentaire
     * @return {{}}
     */
    data() {
      return {
        // ...
      }
    },
    
    computed: {
      // ...
    }
  }
</script>

<script>
  /* ✗ BAD */
  export default {
    name: 'a-button',
    /**
     * Ceci n'est pas un commentaire
     * @return {{}}
     */
    data() {
      return {
        // ...
      }
    },
    computed: {
      // ...
    }
  }
</script>

🔧 Options

{
  "vue/padding-line-between-component-options": ["error", "always" | "never"]
}

• "always" (default) ... add an empty line between options.
• "never" ... remove empty lines between options.

"always" (default)

<script>
  /* ✓ GOOD */
  export default {
    name: 'a-button',

    /**
     * Ceci n'est pas un commentaire
     * @return {{}}
     */
    data() {
      return {
        // ...
      }
    },

    computed: {
      // ...
    }
  }
</script>

<script>
  /* ✗ BAD */
  export default {
    name: 'a-button',
    /**
     * Ceci n'est pas un commentaire
     * @return {{}}
     */
    data() {
      return {
        // ...
      }
    },
    computed: {
      // ...
    }
  }
</script>

"never"

<script>
  /* ✓ GOOD */
  export default {
    name: 'a-button',
    /**
     * Ceci n'est pas un commentaire
     * @return {{}}
     */
    data() {
      return {
        // ...
      }
    },
    computed: {
      // ...
    }
  }
</script>

<script>
  /* ✗ BAD */
  export default {
    name: 'a-button',
    
    /**
     * Ceci n'est pas un commentaire
     * @return {{}}
     */
    data() {
      return {
        // ...
      }
    },

    computed: {
      // ...
    }
  }
</script>

👫 Related Rules

• vue/padding-line-between-blocks

🔍 Implementation

• Rule source
• Test source