My CSS doesn't recognize the scroll-snap commands - html

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.

Related

Tab completion is not working in visual code studio

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

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.

Find missing HTML tag

Is there a tool which I can use to see missing tag in HTML?
For e.g. if I wrote <div> but forgot to end it with </div> so is there a tool for this? I have a very large HTML file and I suspect because of missing tag I am having problems in displaying so need some tool that can identify it.
Try to validate page on W3 validator (validate via file uplod)it will show all errors.
You can use the Auto-Format feature (Ctrl+K+D) of Microsoft Visual Studio - it reformats your code so that you can easily see whether there are missing tags. I love this feature, it often comes in handy.
You can use http://validator.w3.org/ or notepad++ is the best option to check div's.
Any tool which gives you basic text editing tools can tell you this very easily.Some useful tools are:
1. Visual Studio
2. Notepad++
3. MS word(yes this also shows)
4. Front Page(very old player in this field)
Lots of many more.
Above of all, open your page in chrome or Mozilla then press F12, see the code and fix it.

Tools for tracking down un-closed tags

I'm trying to track down two missing closing div tags in a 2500 line html document, obviously I'm doing this manually but I remember that Visual Studio helpfully highlights the closing tag of the currently selected tag.
Don't have VS available but wondered if anyone knew of similarly helpful tool for this kind of task?
//update
Should probably say that I'm already using a validator and an editor with syntax highlighting - mainly I'm curious to find out what others use.
I like Firefox's add-on HTML Validator:
https://addons.mozilla.org/en-US/firefox/addon/html-validator/
It works and you never have to leave your browser or copy/paste markup.
W3C also has a great validation service.
http://validator.w3.org/
I absolutely love Geany. Haven't used it in a few months (forced to work on a .net project), but IIRC, it will do exactly what you need.
http://www.geany.org/

Disable Visual Studio 2010 Html Tag Pair Editing

Ok so this should be simple. How do you make visual studio 2010 not modify the other part of an HTML tag-pair? I know there were a bunch of settings to hit for previous versions of Visual Studio to disable before. But this feature is destroying my html when VS can't parse it properly.
I'm not sure if that's exactly what you are searching for:
Tools
Options
Text Editor
HTML
Formatting
Uncheck the box for Auto insert close tag
I know this is a very old question, but I was searching for the same thing in 2020. The setting to turn this off/on can be found via the following steps:
User Settings
Extensions
HTML
Mirror Cursor on Matching Tag.
Hope this might actually help someone. This stuff destroyed my productivity when writing HTML.