Convert DOM manipulation bans into a custom rule

[Josehower]

Currently, we are using no-restricted-syntax config blocks to preventively ban querySelector querySeletorAll and getElementById. One of the issues with this is the warning messages don't allow us to add clickable links to the description of the error:

• https://github.com/microsoft/vscode/issues/54272
• https://github.com/microsoft/vscode-eslint/issues/418
• https://github.com/microsoft/vscode/issues/11847

One way to solve this Is moving these checks into a new custom ESLint rule:

https://github.com/upleveled/eslint-config-upleveled/blob/085d47f972cff939f57da74420ddcd2e8f55f758/index.cjs#L168-L191

[Josehower]

Handover Comment for the PR:

What work has been done

• Initial research about the issue and documentation

What work is still open

• [ ] Do a new search about the state of the issue
• [ ] Create a Plan on how to implement changes that fix the issue

who to take over

This Issue will be taken over either for @ProchaLu or @Eprince-hub

Where to start

The best place to start would be checking the following issue in vs code:

• https://github.com/microsoft/vscode/issues/54272

See if there is a new workaround found by the community.

Other details that you know that are not captured already in the issue / PR

If at any point the issue https://github.com/microsoft/vscode/issues/54272 is solved, this issue would be able to be solved right away.