This VSCode extension was created through a project for the university.
I hope it makes your life a little easier.
I myself have been working with HTML for the first time about a year ago,
besides my studies. I find myself using div elements far too often instead
of semantically correct elements. That's why I wanted a plugin that mainly deals
with div elements and helps me to use them in a reduced way.
Features
The plugin contains (at the moment) 4 functions.
Command to look up HTML tags
With the Command > Search HTML Tag you can search all HTML tags.
Clicking on a tag opens an external website (w3school) with further information
and examples of the corresponding tag.
Div-Highlighting
A feature that I wanted to try out myself and was also necessary for the 3 feature
is the highlighting of div-tags. They are underlined in yellow if they are empty,
i.e. have no content. They are generally underlined in blue to indicate that it is better
to use a semantically correct tag.
Ignore div-Tags from highlighting
Marked div elements can also be ignored if you want to keep the div as a div element or if
the marking bothers you. The dataset-ignored attribute is then added to the div element so
that the div element can be dry and the marking is not inadvertently added again. All ignored divs
can be deleted with the command > Clear all ignored divs.
Div-Tags replacing (LLM based)
Another feature is the replacement/correction/improvement of used div tags. The whole
thing is LLM based, which also explains the dependency on Ollama and the corresponding
language model. For div tags with a blue background, the plugin offers you a quick fix,
which checks and analyzes the div tags and decides whether it makes sense to replace them or not.
It is important here that the LLM retains all props, i.e. classes, ids etc., and really only changes the div tags.
Requirements
A very important requirement for the plugin is that Ollama is installed and running on your system.
Furthermore, the language model “qwen2.5-coder” must be installed on your system via Ollama. Otherwise the
quick fix function for replacing the div elements will not work and the plugin will crash.
