Indent script and style tags content in *.vue files

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>

[hawkrives]

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.

[yyx990803]

I personally do not indent <script> and <style> blocks, but I don’t find indenting to have any practical downside so as a framework, Vue does not try to enforce it as a convention.

The fact that people have such strong opinions on this one feels almost like tabs vs. spaces. I understand Prettier’s option philosophy and resistance to adding new options, but in this case:

• something being actively requested for over a year with hundreds of comments seem to qualify for “huge demand” compared to precedents (arrow parens, JSX single quotes)

• This is currently the most commented issue in the entire Prettier repo.

• Quote: “Prettier has to strike a balance between ideal goals and listening to the community.”

I believe adding an option could significantly improve Prettier’s adoption in the Vue community (and I do want that to happen).