Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to disable prettier settings creating new line of > of html tag?

I walk through the Prettier extension of Vscode and I can't find how to disable this scenario. See the > of html tag.

Here's a sample code that needed some fix, every time i run the Prettier. The output is this:

<tag-html
 [val1]="valueStr"
 [val2]="valueStr"
>
</tag-html>

I want Prettier to output:

<tag-html
 [val1]="valueStr"
 [val2]="valueStr">
</tag-html>
like image 993
rosiejaneenomar Avatar asked Dec 26 '18 03:12

rosiejaneenomar


People also ask

How do you stop prettier in VS code splitting attributes onto multiple lines?

A quick fix is to go to Prettier Extension Settings (ctrl + shift + X) and in Prettier Extension Settings search for "Print Width" set it to 250 or anything that works for you. 2: Change the value of Print Width to your liking. To disable format code on save.

How do I disable prettier in CSS?

If you want to disable Prettier for a specific language, you can set the editor. defaultFormatter to null . "editor.

Does prettier work with HTML?

Languages supported by Prettier: JavaScript, TypeScript, JSX, Angular, Vue, CSS, HTML, JSON, GraphQL, and much more.

How to disable prettier for HTML files in VS Code?

1 Disable prettier for html files and use the default formatter provided by VS code. 2 Set the line length as per the requirements. (I set it to 100) More ...

How do I use prettier ignore in a project?

It’s recommended to have a .prettierignore in your project! This way you can run prettier --write . to make sure that everything is formatted (without mangling files you don’t want, or choking on generated files). And – your editor will know which files not to format! (See also the --ignore-path CLI option .)

How to enable prettier in VSCode?

Other option is to enable Prettier only when a configuration file is present in the project. To enable this option open VSCode settings. On Windows/Linux - File > Preferences > Settings. On macOS - Code > Preferences > Settings. Search for Prettier:Require Config and make sure it is checked.

Is it possible to wrap the HTML attributes in New Line?

This will try to wrap the HTML attributes only if the length is greater than 100. The good thing is that even if the length exceeds 100, it won't wrap each attribute to new line. Show activity on this post. Show activity on this post.


Video Answer


2 Answers

This can be done with help of VS Code itself. Place the following entry in your workspace settings in your vs code.

"html.format.wrapAttributes": "force-aligned" 

You don't need any external plugins or extension to do this.

Or you can use the GUI settings page as well

enter image description here

enter image description here

UPDATE 01

Based on github issue in prettier repo https://github.com/prettier/prettier-vscode/issues/646

you can still merge the settings I have mentioned above.

like image 68
Pandiyan Cool Avatar answered Oct 04 '22 15:10

Pandiyan Cool


For JSX (and other file types, like HTML) this can be done setting

"bracketSameLine": true

in your .prettierrc

see https://prettier.io/docs/en/options.html#bracket-line

(or jsxBracketSameLine for versions < 4.2.0)

like image 20
Robert Avatar answered Oct 04 '22 14:10

Robert