Use ESLint to lint JavaScript code blocks inside .cshtml (OSOE-585)

[0liver]

Linting external JavaScript files is great, but let's also cover inline script as it's still widely used.

The html plugin already supports inline <script> block in html files - maybe it's enough to add .cshtml to the list of html extensions? Maybe not.

Let's try it out!

Jira issue

[sarahelsaig]

I think you will get syntax errors from the Razor. Copy a script block into a JS file first to check what can you expect before investing time setting up the plugin,

[0liver]

What do you mean by this:

Copy a script block into a JS file first to check what can you expect

?

[sarahelsaig]

What I wrote in the previous sentence. :) I expect that you will get syntax errors in the script block if you treat cshtml as html. You can verify it by just taking the content of the script block and putting it into a JS file and running ESLint on it.

Also see razor-vue-lint. It doesn't seem to be maintained, but the readme shows an attempt at wrapping Razor syntax for ESLint.

[0liver]

Oh, I totally forgot about code inside of script blocks, too - that'd be tricky to work around.

[Piedone]

Due to C# and JS being mixed, this would indeed be tricky. I think we can't realistically tackle this, rather, we should focus on having as little inline JS as possible. Serious issues also impacting runtime will then be surfaced during UI tests.

[sarahelsaig]

Perhaps the html eslint plugin could be invoked by the UI test like we do with html-validate?

[Piedone]

Hmm, interesting, yeah, we could do that, I guess.