Json files losing indentation when using Beautify extension - json

I have a JSON file that when I save on it using Beautify extension loses its format (indentation).
I use VS code editor.
If I disable Beautify, it works well and the indentation remains. Any suggestions on how to configure this are welcome.
All other files work well and are well indented when using Beautify.
Regards,
Alek

You can configure the beautify settings in the settings.json file.
For settings reference follow this link: https://github.com/HookyQR/VSCodeBeautify/blob/master/Settings.md
You can open the settings.json from the beautify extension page clicking on the settings button.
You can also try to use another extension called Prettier, it works like a charm for me!

Related

How can I format HTML code in tpl files in Vscode

how can I turn on snippets and html code formater in .tpl files? I will using Vscode to edit PrestaShop files where is a lot of html code inside .tpl files.
Format html code inside .tpl file
You can try these steps:-
First check for any extension available in vscode market place. If it is available then you can proceed with it.
The second option, which is manually configuring Visual Studio Code to handle ".tpl" files, can be done by following these steps:
Go to Settings editor, search for "files.associations" and click on the Edit in settings.json link.
In the settings.json file, add the following line of code: "* .tpl": "html"
This tells Visual Studio Code to associate the ".tpl" file type with the "html" language mode.
You can edit the file extension to .html to work with the html code formatter.

Not able to write in html file in VS Code

When ever I make a HTML file in VS Code the screen is black and I am not able to write in it. Whereas whenever I make a file of another extension like .java or .css it works and I can type in it. Tell me what to do.
When I make a file, it says this:
After adding .html it shows blank screen:
But I am able to write in other extension:
I removed the vim extension, but that doesn't work, and I don't know what to do.
A few items --
Try uninstalling it and doing a clean install.
Submit it to Microsoft Report a problem with the Visual Studio product or installer

Why is my HTML code not translating right to the browser?

When I type my code in VSCode, it ends up looking like below in Google Chrome. Why would it be doing that?
I tried fixing my code and I expected it to come out looking cleaner in the browser. It actually just brought over all of the code.
When loading local files, browsers use the file extension to determine how to process the file.
Since your file doesn't have one, it treats it as plain text.
Rename it so it ends in .html.
From the URL, it is clear that you've not saved your file with .html extension. That is why it is showing up as text instead of a web page.
Save the file with name Mywebsite.html and try again. Hope this helps!

! [tab] shortcut not working with blade extention

I was making a new file using PhpStorm IDE in which I wanted some HTML. My file name was welcome.blade.php. When I tried using the ![tab] shortcut to make an HTML skeleton, nothing happened. All that appeared was a ! and a tab space.
I know that this shortcut only works on HTML and PHP files, so it seems that because of the .blade extension of Laravel, PhpStorm doesn't recognize it. I made a welcome.php file in the same directory, and the shortcut worked perfectly.
Anyone know how to fix it?

VSCode: Automatically open .html files in one window and .ts in the other

I'm writing Angular2 in VSCode. I split the editor window in two and keep all .html files on the right and all .ts files on the left.
It would be great to automate this, so that when I double click in the file browser the file is opened in the 'type appropriate' window split.
How can I configure or extend VSCode to do this?
I couldn't live without the extension angular2-switcher which adds the following navigations
Alt + U - Go to .ts
Alt + I - Go to .css
Alt + O - Go to .html
Alt + P - Go to .spec.ts
* Hold Shift on mac
Hopefully someday it'll support split screen too
You can't do that today, unless you create a new extension.
But, with file-ext-switcher extension you can open the related file using a keybinding, which is great. It worth take a look.
You can link auto html opening for component ts file in the settings menu like this:
If are working on angular+.net core then below extension is must have to switch.
https://marketplace.visualstudio.com/items?itemName=adrianwilczynski.switcher