Skip to content

vue/html-indent: allow top-level template tags to be unindented #597

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
IlyaSemenov opened this issue Oct 5, 2018 · 2 comments
Closed

vue/html-indent: allow top-level template tags to be unindented #597

IlyaSemenov opened this issue Oct 5, 2018 · 2 comments

Comments

@IlyaSemenov
Copy link

Tell us about your environment

  • ESLint Version: 5.6.1
  • eslint-plugin-vue Version: 4.7.1
  • Node Version: 10.10.0

The problem you want to solve

I would like to allow (and/or force) the top-level HTML tags in <template> section to be unindented.

Currently, 'vue/html-indent': 'error' forces this indentation:

<template>
  <div>
    <p>{{ hello }}</p>
  </div>
</template>

this indentation contradicts the default styles for both <style> and <script> tags where the inner content is not indented, e.g.:

<style>
body {
  color: red;
}
</style>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  ...
})
</script>

It's a common practice to NOT indent top-level HTML elements in a HTML document. See https://www.w3schools.com/html/html5_syntax.asp examples where elements under <html> are not indented:

<!DOCTYPE html>
<html>
<title>Page Title</title>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>

I want to use this approach in Vue templates, so the example above will look like:

<template>
<div>
  <p>{{ hello }}</p>
</div>
</template>

Your take on the correct solution to problem

vue/html-indent options may have a new parameter such as contentIndent: 0 (other variants: topLevelIndent: 0, topLevelIndent: false).
@guanzo
Copy link

guanzo commented Oct 8, 2018 •
edited
Loading

This option would be much appreciated. Another naming variant: rootIndent: 0

@mysticatea
Copy link
Member

Thank you for the issue.

This looks a duplicate of #292. Please track that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@IlyaSemenov @mysticatea @guanzo