Lint JavaScript and HTML parts of ERB code

[Splines]

First of all, thanks a lot for your ERB lint project, we will definitely try it with our MaMpf codebase.

I just wanted to ask what setup you use at Shopify in order to autoformat and/or lint the pure JavaScript or pure HTML part of your ERB files? Ideally, for JavaScript, we'd like to run the mature ESLint. However, I've only found this StackOverflow question and the answer indicates you'd have to write your own processor to strip the Ruby parts and then create your custom source map such that the linter can still correctly identify line numbers.

While certainly doable with more research, I was wondering if this was not already a "solved problem" in the Ruby community. We cannot be the first to want to lint JavaScript in .js.erb and HTML code in .html.erb files (locally as well as with a CI/CD pipeline), right?

For IntelliSense to work in VSCode, I've just discovered this extension for HTML which I will give a try and also look closer into this reddit thread. If you're using VSCode: Do you have any recommendations for HTML/JS extensions such that IntelliSense works? Ideally (for our wish list), an autoformatter would format the document according to some style guide whenever you save the file.

_{Note I've searched for the terms "eslint", "javascript", "js", ".js.erb", "html", ".html.erb" in the issues but did not find anything relevant to my question. This issue is probably not related.}

[Splines]

Maybe helpful for linting JavaScript with ESLint inside ERB files: this plugin.

[Splines]

Note I've just also asked this question in the Rails forum here.

[Splines]

Note: for the JS part inside .erb files, I have just finished to develop my own solution (out of frustration 😅): a plugin for ESLint that you can find over here.

eslint-plugin-erb

[Splines]

Looking at the Linter list, am I right that ERB Lint does not lint the HTML part of a .html.erb? Instead, it extracts the ERB parts and applies rulesets on it, but not on the actual HTML code apart from the ERB tags.

While we now have an ESLint plugin that allows us to lint .js.erb files by just ignoring the ERB part, I was wondering if you happen to know an equivalent for HTML files? E.g. one that removes whitespaces in expressions like <div id="something">, detects duplicate ids etc. Do you use any HTML linter at shopify?

[etiennebarrie]

We use better_html.

[Splines]

I think that might be what I was looking for. Will give it a try in the next few days. Thank you!