Editor: VS Code
Theme: 3rd party
I open a file called bundle-css.hbs and it looks like a jumbled mess. I’d like to format/prettier it so it’s easier on the eyes to edit. Things I’ve tried:
–installed handlebars formatter extension in VS Code
– VS Code | Preferences | files association | *.hbs: html
It still looks like jumbled mess. Any suggestion would be appreciated.
What I want it to look like:
Use ctrl+shift+l in vscode with the file open to set the file’s language to CSS, then use format/prettier.
Thanks. I use macOS and got half of it to work.
Click on bottom-right of screen “HTML” and chose “CSS”.
cmd + shift + p ( palette )
Format Document ( Forced )
“Prettier” is checked on bottom-right of screen.
Color coding works but tags, classes, ids are still jumbled and not formatted.
cmd + shift + p ( palette )
Format Document (Forced)
Color codes and forces line breaks in file. However, it breaks the style ( no styling on ghost website ), reverting to plain HTML.
My thoughts.
CSS. Use pure CSS. Why complicate things with Bootstrap, SASS, minify…It just adds bloat and complication.
JavaScript. Use pure JavaScript. Why complicate things with Vue, React. Libraries and frameworks add bloat. Those libraries and frameworks transpile to JavaScript anyway.
Microsoft Silverlight
ActiveX
Adobe Flash
jQuery
They all once ruled with their advanced technologies. But HTML and JavaScript, the default standards, embraced their technologies and made those who used them rewrite to native HTML and JavaScript. I see the same future with today’s popular libraries and frameworks.
I contacted the theme developer and asked for the original file, with formatting and un-minified. He sent me the .css file. I renamed it “bundle-css.hbs” and renamed the original file to “bundle-css-original.hbs”. It works. I’ll play around with it. If anything goes wrong, I’ll revert to the original file.
