Skip to content
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.

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

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

Closed
GrahamCampbell opened this issue Feb 4, 2018 · 229 comments

Comments

@GrahamCampbell
Copy link

@GrahamCampbell GrahamCampbell commented Feb 4, 2018

Prettier 1.10.2
Playground link

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

This comment has been minimized.

Copy link
Member

@lipis lipis commented Feb 4, 2018

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

This comment has been minimized.

Copy link
Member

@azz azz commented Feb 4, 2018

Why would you want an additional level of indentation there?

@hawkrives

This comment has been minimized.

Copy link
Contributor

@hawkrives hawkrives commented Feb 4, 2018

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

This comment has been minimized.

Copy link
Member

@lipis lipis commented Feb 5, 2018

same for me..

@azz

This comment has been minimized.

Copy link
Member

@azz azz commented Feb 5, 2018

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

This comment has been minimized.

Copy link
Author

@GrahamCampbell GrahamCampbell commented Feb 5, 2018

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

@azz

This comment has been minimized.

Copy link
Member

@azz azz commented Feb 5, 2018

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

@lydell

This comment has been minimized.

Copy link
Collaborator

@lydell lydell commented Feb 5, 2018

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

@lipis

This comment has been minimized.

Copy link
Member

@lipis lipis commented Feb 5, 2018

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

This comment has been minimized.

Copy link
Collaborator

@lydell lydell commented Feb 5, 2018

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

@lipis

This comment has been minimized.

Copy link
Member

@lipis lipis commented Feb 5, 2018

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

@vjeux

This comment has been minimized.

Copy link
Collaborator

@vjeux vjeux commented Feb 5, 2018

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

@lipis

This comment has been minimized.

Copy link
Member

@lipis lipis commented Feb 5, 2018

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

This comment has been minimized.

Copy link
Contributor

@igeligel igeligel commented Feb 5, 2018

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

This comment has been minimized.

Copy link
Member

@lipis lipis commented Feb 5, 2018

We want less options... not more :)

@felixfbecker

This comment has been minimized.

Copy link

@felixfbecker felixfbecker commented Feb 5, 2018

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

This comment has been minimized.

Copy link
Contributor

@montogeek montogeek commented Feb 6, 2018

@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

This comment has been minimized.

Copy link
Contributor

@igeligel igeligel commented Feb 6, 2018

@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

This comment has been minimized.

Copy link
Member

@lipis lipis commented Feb 6, 2018

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

@montogeek

This comment has been minimized.

Copy link
Contributor

@montogeek montogeek commented Feb 6, 2018

This is not the case on Atom for example:
image
image

@larsenwork

This comment has been minimized.

Copy link

@larsenwork larsenwork commented Feb 7, 2018

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

@GrahamCampbell

This comment has been minimized.

@lipis

This comment has been minimized.

Copy link
Member

@lipis lipis commented Feb 8, 2018

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

This comment has been minimized.

Copy link
Member

@azz azz commented Feb 8, 2018

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

What?

@lukepolo

This comment has been minimized.

Copy link

@lukepolo lukepolo commented Feb 8, 2018

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

@lerit

This comment has been minimized.

Copy link

@lerit lerit commented Feb 9, 2018

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

This comment has been minimized.

Copy link
Author

@GrahamCampbell GrahamCampbell commented Feb 10, 2018

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

@ForsakenHarmony

This comment has been minimized.

Copy link

@ForsakenHarmony ForsakenHarmony commented Apr 21, 2019

Probably because it was released and this is not done

@ForsakenHarmony

This comment has been minimized.

Copy link

@ForsakenHarmony ForsakenHarmony commented Apr 22, 2019

So as I understood it the plan is to add an option that controls html and vue?

@pbastowski

This comment has been minimized.

Copy link

@pbastowski pbastowski commented Apr 22, 2019

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

This comment has been minimized.

Copy link

@DCzajkowski DCzajkowski commented Apr 22, 2019

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

This is not how milestones work 😅

Justineo added a commit to Justineo/prettier that referenced this issue Apr 23, 2019
Justineo added a commit to Justineo/prettier that referenced this issue Apr 23, 2019
@Justineo Justineo mentioned this issue Apr 23, 2019
4 of 4 tasks complete
@Justineo

This comment has been minimized.

Copy link

@Justineo Justineo commented Apr 23, 2019

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

This comment has been minimized.

Copy link
Collaborator

@lydell lydell commented May 26, 2019

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

This comment has been minimized.

Copy link
Collaborator

@lydell lydell commented Aug 1, 2019

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

@andystroz

This comment has been minimized.

Copy link

@andystroz andystroz commented Sep 3, 2019

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

@lipis

This comment has been minimized.

Copy link
Member

@lipis lipis commented Sep 3, 2019

Most likely by the end of this week :)

@krisscox

This comment was marked as outdated.

Copy link

@krisscox krisscox commented Sep 9, 2019

Looking for this option myself, correct me if I'm wrong but it appears to have been reverted?

@Kocal

This comment was marked as resolved.

Copy link
Contributor

@Kocal Kocal commented Sep 9, 2019

It has not been released yet.

@fisker fisker mentioned this issue Oct 15, 2019
3 of 4 tasks complete
@jackkoppa

This comment has been minimized.

Copy link

@jackkoppa jackkoppa commented Oct 17, 2019

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

This comment has been minimized.

Copy link
Collaborator

@lydell lydell commented Oct 17, 2019

@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

This comment has been minimized.

Copy link

@jackkoppa jackkoppa commented Oct 22, 2019

thanks @lydell, really appreciate it!

@BenAndDevelopment

This comment has been minimized.

Copy link

@BenAndDevelopment BenAndDevelopment commented Oct 31, 2019

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

@gluons

This comment has been minimized.

Copy link

@gluons gluons commented Oct 31, 2019

#6486

It's coming.

@evilebottnawi

This comment has been minimized.

Copy link
Member

@evilebottnawi evilebottnawi commented Nov 5, 2019

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

@lydell

This comment has been minimized.

Copy link
Collaborator

@lydell lydell commented Nov 5, 2019

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

@lipis lipis mentioned this issue Nov 5, 2019
12 of 12 tasks complete
@gluons

This comment has been minimized.

Copy link

@gluons gluons commented Nov 6, 2019

Keep track of #6787. 👀

@lydell

This comment has been minimized.

Copy link
Collaborator

@lydell lydell commented Nov 9, 2019

1.19 is released! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.