How to Force Prettier HTML Formatting to Format Tags in One Line? This is it!
Hello, in this article i want to share how to make Prettier formatter for HTML to format tag in one line. So, this is it!
What is Prettier Formater? Prettier is an opinionated code formatter in Visual Studio Code Application. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary¹.
So, what the problem? Sometimes, if we use for the first time use Prettier Code Formatter for our code formatter, when we save our code, it will be like this:
<input
type="button"
value="Hello"
name="button"
id="button"
data-target="#hello" />Maybe, for some people that is no problem. But, for some other people it is problem. Because, we want to our code like this when we save:
<input type="button" value="Hello" name="button" id="button" data-target="#hello" />Yap, just one line in one tag. That is the reason why i write this tutorial. Because i have problem for this. So, this is to solve!
Based on my search for this problem, I found 2 ways that might help you solve this problem.
1. Configure your .prettierrc.json file.
If you don’t have the file, you can create this file with the name of file is .prettierrc.json in your root project directory. After that, you can add some code like this:
{
// Other options...
"overrides": [
{
// change .html with .vue if you are using Vue files instead of HTML
"files": "src/**/*.html",
"options": {
"printWidth": 140
}
}
]
}Or, like this:
{
"trailingComma": "es5",
"tabWidth": 2,
"useTabs": false,
"singleQuote": true,
"printWidth": 140,
"bracketSpacing": true
}It will be variate. Don’t confuse, because you can choice one of them. It will be okay. What needs to be considered from the code snippet above is part “printWidth”: 140, The attribute will make large value for wrapping text. I don’t remember how the default value. But, you can set the value to 140. The higher the value you set, the more it will make your text into one line. But, don’t go redundant by giving excessive value. I myself apply a value of 140 for it.
2. Configure from your Default setting.
For the first in your Visual Studio Screen, you can press Ctrl + , in Windows as shortcut or you can like this:
Go to File tab in top layout > Click Preferences > Click Settings.
It will display new screen like this:
In the filling section, we can type print width and it will show like above. We can see and set the value of Prettier: Print Width is 140.
Yap, that is to SOLVE How to Force Prettier HTML Formatting to Format Tags in One Line?
Hope it can help you. Happy Work :)
