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:

• Allow diagnostics messages to have markdown (or formatted text) content microsoft/vscode#54272
• [Feature request] Add link to github page for the hover box microsoft/vscode-eslint#418
• Ability to add links to diagnostics and render them as links in problems view microsoft/vscode#11847

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

eslint-config-upleveled/index.cjs

Lines 168 to 191 in 085d47f

	/** Currently it is not possible to use markdown links inside of the eslint warn/error message.
	* related links:
	* - https:/microsoft/vscode/issues/54272
	* - https:/microsoft/vscode-eslint/issues/418
	* - https:/microsoft/vscode/issues/11847
	*/
	{
	selector:
	"ExpressionStatement CallExpression[callee.object.name='document'][callee.property.name='querySelector']",
	message: `Using document.querySelector() can give unexpected results, especially if multiple elements match the query (for example, when the component is used more than once); as a piece of advice, use State or Refs instead
	https:/reactjs/reactjs.org/issues/4626#issuecomment-1117535930`,
	},
	{
	selector:
	"ExpressionStatement CallExpression[callee.object.name='document'][callee.property.name='querySelectorAll']",
	message: `Using document.querySelectorAll() can give unexpected results, especially if multiple elements match the query (for example, when the component is used more than once); as a piece of advice, use State or Refs instead
	https:/reactjs/reactjs.org/issues/4626#issuecomment-1117535930`,
	},
	{
	selector:
	"ExpressionStatement CallExpression[callee.object.name='document'][callee.property.name='getElementById']",
	message: `Using document.getElementById() can give unexpected results, especially if multiple elements match the query (for example, when the component is used more than once); as a piece of advice, use State or Refs instead
	https:/reactjs/reactjs.org/issues/4626#issuecomment-1117535930`,
	},

[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:

• Allow diagnostics messages to have markdown (or formatted text) content microsoft/vscode#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 microsoft/vscode#54272 is solved, this issue would be able to be solved right away.