Indent script and style tags content in *.vue files #3888

GrahamCampbell · 2018-02-04T18:06:03Z

When I have a Vue.js file:

<script>
    export default {
        mounted() {
            console.log('Component mounted!')
        }
    }
</script>

How do I stop prettier changing the indentation to:

<script>
export default {
    mounted() {
        console.log("Component mounted!");
    }
};
</script>

lipis · 2018-02-04T18:41:14Z

Same with <style>

Prettier 1.10.2
Playground link

--parser vue
--tab-width 4

Input:

<style>
    body {
        color: #fff;
    }
</style>

Output:

<style>
body {
    color: #fff;
}
</style>

Expected behavior:

I would prefer the output to stay unchanged..

azz · 2018-02-04T23:29:19Z

Why would you want an additional level of indentation there?

hawkrives · 2018-02-04T23:45:45Z

For me, I view the contents of a script tag like the contents of any other html tag - I indent its body. So for me, it's consistency.

lipis · 2018-02-05T00:23:41Z

same for me..

azz · 2018-02-05T00:28:20Z

Current behaviour matches the default for eslint-plugin-vue/script-indent. Seems like a small price to pay for an entire indentation level for all your code. So long as all script/style tags are consistently not indented, this seems like a non-issue to me.

GrahamCampbell · 2018-02-05T08:01:41Z

It's a blocker for using prettier for me and many others.

azz · 2018-02-05T08:06:04Z

@GrahamCampbell would you be able to explain why it is a blocker?

lydell · 2018-02-05T12:11:17Z

I think we should follow the most common Vue convention here, if there is one.

lipis · 2018-02-05T12:17:51Z

Also there are two different schools for HTML:

<html>
  <head>
    <title>This is more consistent</title>
  </head>
  <body>
    <div></div>
  </body>
</html>

<html>
<head>
  <title>than this</title>
</head>
<body>
  <div></div>
</body>
</html>

lydell · 2018-02-05T12:18:42Z

Yes, for HTML, but now we’re talking Vue :) Which similar, but not quite the same.

lipis · 2018-02-05T18:43:49Z

Just for fun: https://twitter.com/PrettierCode/status/960584198376566784 :)

vjeux · 2018-02-05T18:56:26Z

Fwiw, when I implemented this, I followed the vue official website example: https://vuejs.org/v2/guide/single-file-components.html

lipis · 2018-02-05T18:58:28Z

I was just checking the documentation for the same reason.. and it looks like in the unit test section they are indenting.. https://vuejs.org/v2/guide/unit-testing.html 😕

igeligel · 2018-02-05T19:07:23Z

In the style guide there is one example where the content of the <script> is unindented.

<!-- TodoItem.vue -->
<template>
  <span>
    {{ todo.text }}
    <button @click="removeTodo(todo)">
      X
    </button>
  </span>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  methods: mapActions(['removeTodo'])
}
</script>

Same for <style>:

<template>
  <button class="c-Button c-Button--close">X</button>
</template>

<!-- Using the BEM convention -->
<style>
.c-Button {
  border: none;
  border-radius: 2px;
}

.c-Button--close {
  background-color: red;
}
</style>

I think this is controverse and a configuration option should be provided.

lipis · 2018-02-05T19:09:37Z

We want less options... not more :)

felixfbecker · 2018-02-05T20:18:23Z

Here's an actual argument why it's beneficial to have indentation: It allows you to use (indentation-based) code folding to collapse the style and script tags (as in Visual Studio Code).

montogeek · 2018-02-06T11:01:23Z

@felixfbecker Is that the case? Folding is available for tags, it is not really dependant on its content. But looks like VSCode check for indentation to make elements foldable.

There is an issue open about it microsoft/vscode#3422

igeligel · 2018-02-06T11:09:40Z

@montogeek

Yes, it is a good reason. From my comment earlier i just wanted to say it is official. I do not care what is used in the end when it is consistent :)

imgur album

Inlined pictures:

lipis · 2018-02-06T11:11:08Z

If you have the Vue plugin installed it folds them correctly.. but not out of the box VS Code

montogeek · 2018-02-06T11:12:24Z

This is not the case on Atom for example:

larsenwork · 2018-02-07T14:24:25Z

I'd vote for indentation too. For widest and easiest editor support for folding

GrahamCampbell · 2018-02-08T06:57:27Z

NB Laravel code style indicates indentation: https://github.com/laravel/framework/blob/5.5/src/Illuminate/Foundation/Console/Presets/vue-stubs/ExampleComponent.vue.

lipis · 2018-02-08T10:22:24Z

For what it's worth from the 241 people that voted in the Twitter poll here are the results..

▓▓▓▓▓▓▓▓▓░░░░░░ 57%  Yes       137 people
▓▓▓░░░░░░░░░░░░ 19%  No         46 people
▓▓▓▓░░░░░░░░░░░ 24%  Whatever   58 people

if we remove the whatever then it becomes

▓▓▓▓▓▓▓▓▓▓▓░░░░ 75%  Yes       137 people
▓▓▓▓░░░░░░░░░░░ 25%  No         46 people

and since whatever would do whatever they should be included with the majority..

▓▓▓▓▓▓▓▓▓▓▓▓░░░ 81%  Yes       195 people
▓▓▓░░░░░░░░░░░░ 19%  No         46 people

azz · 2018-02-08T10:51:46Z

and since whatever would do whatever they should be included with the majority..

What?

lukepolo · 2018-02-08T16:31:02Z

He is saying that people who say whatever, will follow the herd , and join the yes

lerit · 2018-02-09T01:50:46Z

prettier and eslint-plugin-vue conflict for indent rule.they say we should not use it together.
"Both vue/script-indent and prettier change the indentation of your code. Both are formatter. You can't use both together but you can choose which formatter you use."
vuejs/eslint-plugin-vue#369

GrahamCampbell · 2018-02-10T13:26:42Z

I think the big split there indicates that configuration is needed.

pbastowski · 2019-04-22T16:22:09Z

This was going to be a Vue only setting, not affecting other html like code. It would have been implemented and released by now.

However, Someone thought it might be wiser to add html to the scope and thus introduced a whole new level of complexity and interested parties.

And that’s called scope creep. It kills good projects.

A better approach would have been to implement the feature as previously agreed for Vue only.

Only after that was done, we could create a new issue to consider including html as a new feature.

DCzajkowski · 2019-04-22T18:21:15Z

@ForsakenHarmony: Probably because it was released and this is not done

This is not how milestones work 😅

Justineo · 2019-04-23T06:25:17Z

I've created a PR (#6077) which introduces a new option: html-top-level-indent with the following valid options:

"always" - Always apply top-level indent for templates, scripts and styles.
"never" - Avoid top-level indent for templates, scripts and styles.
"auto" - Avoid top-level indent for scripts and styles inside Vue files. This is the default value and reflects current behavior.

I think we can move the technical discussion over there.

lydell · 2019-05-26T12:19:02Z

In #6077 we learned that making a generic option for all HTML-like languages sounded like a good idea, but it still needed Vue-specific behaviors and didn’t work out very well in practice. So after that exploration we decided to go with a simpler Vue-specific option instead: --vue-indent-script-and-style. It’s up for grabs if you want to make a PR!

I’m really sorry for all the back-and-forth!

lydell · 2019-08-01T09:08:06Z

#6157 has been merged, adding --vue-indent-script-and-style. Release guesstimate: September.

andystroz · 2019-09-03T17:32:16Z

@lydell looking for this feature in release / specifically in vscode prettier, is there going to be one soon?

lipis · 2019-09-03T17:33:43Z

Most likely by the end of this week :)

jackkoppa · 2019-10-17T14:30:12Z

Hi there @lydell & @kamilic - thanks so much for implementing this! Very excited to have this control over components again. Anything we can help with to get Prettier ready for another release?

lydell · 2019-10-17T20:17:15Z

@jackkoppa We started the release process for 1.19.0 a while ago, but realized that we need to get a few more PRs in to make a stable release. We’ve been doing a lot of work since then and want to make a release as soon as possible!

jackkoppa · 2019-10-22T13:42:31Z

thanks @lydell, really appreciate it!

netzpixel · 2019-10-31T06:47:08Z

Any updates? I know it's just been two weeks, but I desperately need this feature!

gluons · 2019-10-31T06:56:29Z

#6486

It's coming.

alexander-akait · 2019-11-05T13:04:35Z

Yep, release will be in near future, i think we can close this issue /cc @lydell

lydell · 2019-11-05T16:45:11Z

Let’s close it once 1.19 is out. Maybe today.

gluons · 2019-11-06T08:43:05Z

Keep track of #6787. 👀

lydell · 2019-11-09T00:37:25Z

1.19 is released! 🎉

azz added type:question Questions and support requests. Please use Stack Overflow for them, not the issue tracker. area:multiparser Issues with printing one language inside another, like CSS-in-JS lang:vue Issues affecting Vue labels Feb 4, 2018

Justineo added a commit to Justineo/prettier that referenced this issue Apr 23, 2019

feat: add htmlTopLevelIndent option, resolve prettier#3888

0a0dd75

Justineo added a commit to Justineo/prettier that referenced this issue Apr 23, 2019

feat: add html-top-level-indent option, resolve prettier#3888

9d5c682

Justineo mentioned this issue Apr 23, 2019

feat: add new option html-top-level-indent #6077

Closed

4 tasks

IlyaSemenov mentioned this issue May 23, 2019

Option to disable offset of the top level script tag sveltejs/prettier-plugin-svelte#31

Closed

This comment has been minimized.

Sign in to view

fisker mentioned this issue Oct 15, 2019

Enforce Single Attribute Per Line (#5501) #6644

Merged

4 tasks

lipis mentioned this issue Nov 5, 2019

Release 1.19 checklist #6469

Closed

12 tasks

lydell closed this as completed Nov 9, 2019

lydell removed the help wanted We're a small group who can't get to every issue promptly. We’d appreciate help fixing this issue! label Nov 9, 2019

This was referenced Nov 18, 2019

Always add a space after the function keyword #3903

Merged

[RFC] remove option vueIndentScriptAndStyle or rename it to treat all html style files consistently #7000

Closed

lock bot added the locked-due-to-inactivity Please open a new issue and fill out the template instead of commenting. label Feb 7, 2020

lock bot locked as resolved and limited conversation to collaborators Feb 7, 2020

Indent script and style tags content in *.vue files #3888

Indent script and style tags content in *.vue files #3888

Comments

GrahamCampbell commented Feb 4, 2018

lipis commented Feb 4, 2018

azz commented Feb 4, 2018

hawkrives commented Feb 4, 2018

lipis commented Feb 5, 2018

azz commented Feb 5, 2018

GrahamCampbell commented Feb 5, 2018

azz commented Feb 5, 2018

lydell commented Feb 5, 2018

lipis commented Feb 5, 2018

lydell commented Feb 5, 2018

lipis commented Feb 5, 2018

vjeux commented Feb 5, 2018

lipis commented Feb 5, 2018

igeligel commented Feb 5, 2018

lipis commented Feb 5, 2018

felixfbecker commented Feb 5, 2018

montogeek commented Feb 6, 2018 • edited

igeligel commented Feb 6, 2018

lipis commented Feb 6, 2018

montogeek commented Feb 6, 2018

larsenwork commented Feb 7, 2018

GrahamCampbell commented Feb 8, 2018

lipis commented Feb 8, 2018 • edited

azz commented Feb 8, 2018

lukepolo commented Feb 8, 2018

lerit commented Feb 9, 2018 • edited

GrahamCampbell commented Feb 10, 2018

pbastowski commented Apr 22, 2019 • edited

DCzajkowski commented Apr 22, 2019

Justineo commented Apr 23, 2019 • edited

lydell commented May 26, 2019

lydell commented Aug 1, 2019

andystroz commented Sep 3, 2019

lipis commented Sep 3, 2019

This comment has been minimized.

This comment has been minimized.

jackkoppa commented Oct 17, 2019

lydell commented Oct 17, 2019

jackkoppa commented Oct 22, 2019

netzpixel commented Oct 31, 2019

gluons commented Oct 31, 2019

alexander-akait commented Nov 5, 2019

lydell commented Nov 5, 2019

gluons commented Nov 6, 2019 • edited

lydell commented Nov 9, 2019

montogeek commented Feb 6, 2018 •

edited

lipis commented Feb 8, 2018 •

edited

lerit commented Feb 9, 2018 •

edited

pbastowski commented Apr 22, 2019 •

edited

Justineo commented Apr 23, 2019 •

edited

gluons commented Nov 6, 2019 •

edited