I am struggling with a problem regarding the rendering of strings using Vue. At the moment, if an HTML tag is opened and closed on different lines like this:
<span class="description">
{{ text }}
</span>
it ends up being displayed as follows:
<span class="description">
text
</span>
This results in
document.querySelector('.description').textContent"
Text
"
I discovered that if you open and close the HTML tag containing the string on the same line, the issue disappears. For instance:
<span class="description">{{ text }}</span>
Question: Is there a way to instruct Vue to render text without extra spaces without reformatting all actual HTML code, which means keeping tags opened and closed on separate lines? (I'm not the only one working on this project) Alternatively, is there a method to enforce formatting as shown in the last example? We currently use ESLint and Prettier, but I haven't been able to find anything that fits my specific scenario.
Thank you!
More details: Why do these spaces matter to me? In our selenium tests, we occasionally locate elements by text, and the presence of these spaces makes it challenging. Additionally, while I recognize that I could use CSS selectors, some elements lack unique selectors, so I rely on locating them by text.
Package.json
// Dependencies list here
.prettierrc
{
"trailingComma": "none",
"tabWidth": 2,
"semi": false,
"singleQuote": true,
"htmlWhiteSpaceSensitivity": "ignore"
}
.eslintrc.js
// Configuration for ESLint goes here