Shopify / erb-lint

Lint your ERB or HTML files
MIT License
592 stars 113 forks source link

Lint JavaScript and HTML parts of ERB code #333

Open Splines opened 7 months ago

Splines commented 7 months ago

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 commented 7 months ago

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

Splines commented 7 months ago

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

Splines commented 7 months ago

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