Automatically formatting HTML within PHP with VSCode? - visual-studio-code

I tried Intelephense and dozens of other extensions and settings but NONE of them achieved what I'm after. What I prioritize is automatic tag close and automatic indent... most of others VSC functionalities for HTML would be great too, like css classes or files paths suggestions, but what I really need is this 'basic' automatic format...
I'm sorry for this question, I know it's been done and answered before, it's just that I can't get my VSC to correctly work with HTML when mixed with PHP, and I've been trying for months now... Read everything I've found on Google, searched about it here and on Reddit, but wasn't able to reproduce any of the solutions, or better saying, none of them worked for me.
Could anyone give me some guidance?

Luckily I felt the same way as you so I just decided to go ahead and hammer out a solution to this very annoying problem with a VScode extension that doesn't register itself as a "formatting" extension I format the HTML onBeforeSave so you can still register a PHP formatting extension so between the two it gets the whole file. I use js-beautify so you can just use all the native HTML formatting settings in VSCode already.
Format HTML in PHP on the VSCode Extension Marketplace.

Related

How do I configure VS Code to auto-complete / closing of HTML elements in PHP files like Adobe Brackets does?

Adobe just slapped me with horrible news saying they will end support for the Brackets Editor and we need to switch to VS Code.
I wasted an hour already just to have auto-closing of tags to work.
Here is a video explaining exactly what I want.
https://imgur.com/a/tLWpU4x
I want to be able to have auto-close work for HTML elements in a PHP file like it does without issue on Adobe Brackets.
VS Code has a lot of extension for this kind of need. I personally use HTML Snippets.
Just navigate to extensions tab, search HTML Snippets then click install.
Please check this link for your reference. You can find some extension which could cater your needs.

How can I prevent html tags from being red underlined inside of .ejs files?

If I start an .ejs file with a tag like h1, it is underlined in red, like VSCode expects me to add the whole typical html boilerplate. However, I have seen many videos where the host doesn't get this underlining.
I have tried extensions, I have modified the settings.json with "*.ejs": "html", but nothing works.
Do you know how I can get rid of it without having to add DOCTYPE, , etc.?
So after figuring out that this problem caused by a lint or other validator (in this case W3C Validator) installed as an extension in Visual Studio Code, you can disable its warnings by going to extensions and disable the validator.
However, those tools are here for a reason :) and they help us write better code that fits to known standards and syntax issues, so disabling them is less recommended. (Although it can become bit annoying while using external third-party libs which can be can some warnings by that validator too - for that, some lints offers ignoring logic which let you ignore some of the files or lines in the code).
Good Luck, Happy coding!

WebStorm formatting settings - port to another editor

Is there any way to get another editor, like VSCode, to format code ( JavaScript in my case, if it matters ) like the WebStorm IDE formats code by default? I'm not familiar with that IDE, but I'm hoping that it uses a config of some sort that can maybe be exported and imported in another editor. I tried looking for one, but couldn't find anything.
The core problem, if it matters, is that all of our team members use WS to write code and they use the built in formatter, so if I use another one it creates inconsistencies and long commits when editing already written files. As you are probably guessing by now, I would like to use another editor, because I find IDE's bloated and slow.
I don't know if there is a way to import Webstorm formatting rules into VS Code, but I think there is another solution:
I remember in one of the projects i worked on, we used a linter which also auto-formatted code. The advantage is that Webstorm and VSCode can pick pick the linter rules automatically, and then you have same formatting on both.
The downside is that you would need to agree with the team on what does rule will be and then configure them on the linter.

VSCode auto-complete extension that looks at all open files

Recently switched to VSCode and looking for an extension that will look at all open files when suggesting auto-completions. For example, say I have an HTML doc and a JavaScript file open. As I'm typing in JavaScript I'd like auto-complete suggestions from, say, the id values in the HTML tags.
I've done some searching in the marketplace, but haven't found anything. Anyone know if it exists?
You can try this https://marketplace.visualstudio.com/items?itemName=Atishay-Jain.All-Autocomplete.
I actually never tried :D

Visual Studio Code HTML wrong comment type

I recently used VS code for Wordpress development but I encountered a weird bug when I comment with (ctrl+/) to an html element. Instead of commenting (<!-- -->) it uses (//) for my html code? Has anybody experience this? Do you know of any solutions to change the comment to the correct html comment?
This is caused by VS Code improperly auto-detected programming language - in the lower right corner of your GIF you can clearly see, that VS Code is set to HTML. Click on that button, and switch over to JavaScript (React) and problem should be solved.
I had the same exact problem. But in the end, I discovered I had an extension which was interfering with the HTML commenting. So I had to disable all extensions and restart VS Code to get back to my usual commenting back again.
Then I did a trial-and-error check (enabling one extension at a time and then reload) to find out the faulty extension which I later uninstalled. Try disabling all your extensions to see if it helps you.
In case it helps anyone else, it was the Go extension that changed all my comment characters to {#.
HTH
For future searchers, this happened to me in a different way: I was getting HTML comments inside a script tag, instead of JavaScript comments.
I disabled the TWIG pack extension and it went back to the expected behavior!
In my case it was the Sublime Babel extension that changed the comment code to // in HTML mode. Downgrading Sublime Babel from 0.2.10 to 0.2.9 solved the issue.
In my case I was getting html comments inside script tag, instead of Javascript tag.
I uninstalled Jinja extension and everything went back to normal.