How to enforce new line per attribute in vue using Prettier in VS Code?

user_3629023 0
Viewed 176

I am currently using Prettier Version: 9.5.0 for Vue in VSCode.

This is my current code

<q-select label="Fruits" :options="['apple', 'mango']" />

This is what I would like Prettier to format it into automatically on save

<q-select 
label="Fruits" 
:options="['apple', 'mango']"
/>

I have tried so far using the singleAttributePerLine option in my settings.json file in VSCode according to these release notes. However it does not work and VSCode does not recognize this configuration. I also could not find this setting in the settings menu for the Prettier extension. I also tried putting this option in the .editorconfig file but no results

My settings.json file configuration

"editor.codeActionsOnSave": ["source.fixAll.eslint"],
"eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.singleAttributePerLine":true,
prettier eslint vue.js visual-studio-code
1 Answers

Danny Connell (Vue educator on YT, Udemy) had the same problem and wrote a VS Code extension called "Split HTML Attributes" that formats a starting tag with multiple attributes into one attribute per line. Select the entire starting tag (with attributes inside) and then press ctrl+shift+alt+A and your tag will now be nicely formatted with one line per attribute.

You can find it at https://marketplace.visualstudio.com/items?itemName=dannyconnell.split-html-attributes&ssr=false#overview. I use it, it's very handy!

user_87768720
Related