Every two weeks I send out a newsletter containing lots of interesting stuff for the modern PHP developer. You can expect quick tips, links to interesting tutorials, opinions and packages. Want to learn the cool stuff? Then sign up now!

Formatting Vue component properties in PHPStorm

Most of work is done in PHPStorm. On my current project I do a lot of Vue stuff. Regularly use PHPStorm auto format feature to make the code look nice. One thing that was bothering is that by default it will use 8 characters of indentation for Vue component properties. So you get this horrible code:


<template> <!-- 😱 --> <my-component myProp="myValue" anotherProp="anotherValue" ></my-component> </template>

Today a golden tip by Christopher Pitt helped me find the solution. In the preferences of PHPStorm you need to set continuation indent of the html to 4 characters.

And after that the PHPStorm will reformat the code right according to our guidelines for Vue templates.

<template>
    <!-- 😇 -->
    <my-component
        myProp="myValue"
        anotherProp="anotherValue"
    ></my-component>
</template>
Freek Van der Herten is a partner and developer at Spatie, an Antwerp based company that specializes in creating web apps with Laravel. After hours he writes about modern PHP and Laravel on this blog. When not coding he’s probably rehearsing with his kraut rock band. He loves waffles and butterflies.
  • Juukie14

    Great tip Freek! Thanks for sharing