Tab completion is not working in visual code studio - html

im new in this programming world.
And i wanna asking a noobie question.
Im using visual code studio and trying make my first web project, so i install some extension so i can easily code(?). But when i using tab-completion its not really work. In my case, i use html and the tab-completion didnt really work like when u tab-ing or enter-ing its not complete all the code, for example i wanna type div, so i type <di then tab/enter and its just showing <div only, not <div> </div> . And can anyone tell me how to fix that? Your answer really mean everything to me. Thankyou!
Oh! And here's my setting and a bunch of extension i use. Whether i should disabble or installing other
My setting
Extension i use
Another extension i use
p.s. im sorry the picture not shown, i need to have 10 question so i can attach an actual image

You are probably looking for the Auto Complete Tag and Auto Close Tag extensions:
Auto Close Tag for VS Code
Auto Complete Tag for VS Code
You can find additional Extensions like this by searching for the AutoComplete tag:
Search VS Code marketplace for AutoComplete

Related

Confused HTML beginner here

so I've recently started learning web development and I read and write html according to a tutorial that uses html 4, and just practice it on notepad++ and test them on my browser.
Now there's a problem that's been bugging, the web page doesn't change at all even if I comment out the code or change a few things in it.
I messed around with the height and width of an image and it didn't change, I tried creating a folder outside the notepad++ folder and put everything there and nothing changed, I created a completely new file(added in notepad++) and folder and it was the same. I'm still in the middle of the tutorial and this problem has just been bothering me, someone please help
I think you should try clearing browser cache or try using other IDEs like vscode or if you use android then trebedit or Dcoder
Try refreshing your page, or use an IDE like Visual Studio Code and the live Server plugin. This should help you as a beginner because both of these tools are really easy to use. Maybe it isn't changing because you had never saved your file.

My CSS doesn't recognize the scroll-snap commands

I am writing a website in HTML This is what visual studio tells me for school and the CSS file's doesn't recognize my snap-scroll-type tag and my snap-scroll-align tag. I am writing in Atom but because of this problem i tried visual studio and it still doesn't recognizes the tags.
This is my code
It's just a VSCode bug I'd assume, try searching for something within the marketplace such as CSS intellisense.
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
I also don't know if you're utilizing it correctly.
There have been multiple questions asked on SO regarding unknown properties in VS Code. You should be able to whitelist valid properties if necessary, see https://stackoverflow.com/a/54133730/2029959
As pointed out on VS Code's Github repo - https://github.com/Microsoft/vscode/issues/47775#issuecomment-420082168 - it actually shouldn't be an issue anymore as MDN data should be linked to. (https://github.com/microsoft/vscode/issues/48443)
If - on the other hand - your code doesn't work in the browser, please update your question and show us your code or submit a link to see.

VS Code - HTML - Emmett Intellisense doesn't seem to be working as expected

I'm attempting to learn web development, and I'm taking an online course from udemy. I am still in the html coding stage and I don't get the correct attributes auto suggested when I type in "form" (without the quotes). I get this:
When the instructor does it, this is the result:
I'm certain I used to get the result the instructor got, but I don't now. I rolled back to version 1.33 of VS Code but that didn't help.
Any suggestions? I appreciate any and all help you can provide but please don't assume I can navigate to whatever setting needs to be changed Please provide the full path to allow me to get there! Thanks again.
So I just downloaded and installed Atom. When you type form and hit tab you get three attributes: class, action and method. I wonder why the defaults are different between the two editors. I prefer VS Code just for the visual appearance of it, and it seems to be the one everyone uses, but why the difference and is there a way to make them the same?

ckeditor and codesnippets plugin

I'm baffled! I built ckeditor 4.13 using the online builder, and included the codesnippet plugin. Now when I chose the plugin within the editor from the toolbar it allows me to add the code under which ever language I choose, but the syntax highlighting doesn't work for all languages. For example CSS is not highlighted. The background of the chosen theme is there, but no highlighting. SQL queries are fine as are some others, but not CSS or PHP it would seem!
Also, I'm editing in one place and then viewing the article on another place (pulling the article from a database). The styling is completely missing altogether when it's the article is viewed. I tried to find a CSS file which may contain the classes that had been attached to the snippets (such as language-php) but couldn't. I thought if I just linked to the CSS file in my header it would attach the styling...I was wrong!
Any ideas how I can tackle this issue please? Google has brought nothing so far.
For anyone interested, I've found the best way to deal with the syntax highlighting issue is to download prism. This will work with the classes produced by ckeditors codesnippet plugin and colour code the syntax according the theme you chose from Prism. Look at prismjs.com.

Google Chrome Inspect Elements

I have a quick question which would really help me out, i'm sure it must be simple -- if its possible.
I am developing a wordpress website and using Chrome Inspects to edit the CSS, which i'm fine with. However, when I want edit the html code, I cant find the name of file i am editing on elements. Is there a way to find out the file name?
Hope that makes sense,
All the best,
Joe
Yes, it is on the top right corner of each css property.