Web Lab - HTML linting

#1

Hello!

In Web Lab, the HTML linting is pretty permissive, and doesn’t catch a bunch of different kinds of mistakes that some MS students have made, in ways that we expected it would. Here’s an example project: https://codeprojects.org/I-OThVzEzpv1eIwizxKMHSlGF92UFlmbfDSbJvxQDCc. (FWIW, I added in links and images, but Discourse won’t let me post something that has more than one image in it).

Browsers still render text in these other places within the document, so there’s no visual feedback for students in the preview that would indicate this isn’t a good idea. This has come up in a few classes, and seems like it’d be great to update the linter settings to help students with this.

To try to help, I poked around in Web Inspector, and in the code on GitHub, but couldn’t piece together what I seeing. Here’s what I saw:

Web Inspector, HTML

There’s some CSS classes named CodeMirror, so I figured it was using that project, and looked at https://codemirror.net/doc/manual.html#addon_lint and found info about its support for linters. Trying out their demo with default config, I could different results from Code Studio (see https://htmlhint.io/ which also doesn’t catch everything in that example project). So I figured something else was doing the linting.

Web inspector, JS

This looks like there’s a file within Bramble in HTMLCodeHints/main.js that is registering two kinds of handlers doing HTML linting:

GitHub searches

I found that there’s a code-dot-org repo, and a brambles repo, so I searched for HTMLCodeHints and TagHints in each, but didn’t find anything.

Any suggestions on how to improve the editor so it helps students with catching these kinds of mistakes?

Thanks!
-Kevin