prettier-vscode: Breaking up HTML tags in JSX upon save
Hey guys, I’ve been using prettier for about 6 months now and never had an issue. but I recently updated VSCode and I ran into this problem today with it breaking out my HTML tags in my JSX and spacing it all wildly. Example follows: Before save:
return (
<div className="input-group mb-3">
<div className="input-group-prepend">
<span className="input-group-text">
<i className={icon} />
</span>
</div>
<input
className={classnames("form-control form-control-lg", {
"is-invalid": error
})}
placeholder={placeholder}
name={name}
value={value}
onChange={onChange}
/>
{error && <div className="invalid-feedback">{error}</div>}
</div>
);
};
After save
return ( <
div className = "input-group mb-3" >
<
div className = "input-group-prepend" >
<
span className = "input-group-text" >
<
i className = {
icon
}
/> <
/span> <
/div> <
input className = {
classnames("form-control form-control-lg", {
"is-invalid": error
})
}
placeholder = {
placeholder
}
name = {
name
}
value = {
value
}
onChange = {
onChange
}
/> {
error && < div className = "invalid-feedback" > {
error
} < /div>} <
/div>
);
};
I can provide additional info if needed. Such as my settings, etc.
UPDATE 6/4/18: Resolved by disabling Beautify, which was causing issues with Prettier.
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 64
- Comments: 28 (1 by maintainers)
@jtbandes Thank you so much 👍 FYI: it conflicts with beautify so we add:
and it fixed =))
Oh, thank the heavens, the linked issue at jsbeautify solved it for me. Disabled the Beautify plugin on my vscode and all is well.
“files.associations”: { “*.js”: “javascriptreact” } it works for me
it worked thanks get back to coding
What if you don’t have beautify installed?
@kajangid you are welcome, but what have I done to deserve the “thank you”?
After ignore beautify everything went ok.
"beautify.ignore": [ "**/*.js", "**/*.jsx" ]This code fix the problem.