Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is it possbile to eslint-disable a script(type=module)? #188

Closed
wxiaoguang opened this issue May 13, 2022 · 6 comments
Closed

Is it possbile to eslint-disable a script(type=module)? #188

wxiaoguang opened this issue May 13, 2022 · 6 comments

Comments

@wxiaoguang
Copy link

When working with backend MVC projects, sometimes the code could be:

<!-- I want to disable eslint-plugin-html for this script block -->
<script type="module">
    window.myGlobal.var = {{.MyData}};  // here is invalid JS syntax, but it's rendered by backend template engine correctly.
</script>

<!--  eslint-plugin-html works well for this block, and it should be enabled -->
<script type="module">
    console.log(window.myGlobal.var);
</script>

What we need here is to make eslint-plugin-html skip a whole <script> block because code inside it is not valid JS syntax.

When using eslint-plugin-html, I can not find a proper way to disable the eslint for the script(type=module) block (I do not want ignore the whole file).

I know a trick that: <script><!-- /* eslint-disable */ --></script>, but it doesn't work for script(type=module)

For traditional <script> we can use <script><!-- /* eslint-disable */ --></script>.

But for <script type=module>, this trick doesn't work anymore because the module script doesn't accept <!-- HTML comment.

@Standard8
Copy link

I think you should be able to do something like:

<script type="application/javascript" type="module">
/* eslint-disable */

// Your code

/* eslint-enable */
</script>

@wxiaoguang
Copy link
Author

wxiaoguang commented Jun 6, 2022

It doesn't work because the syntax inside the tag is invalid JavaScript code window.myGlobal.var = {{.MyData}}

Before the comment /* eslint-disable */ takes effect, the parser reports syntax error first.

@BenoitZugmeyer
Copy link
Owner

Please refer to Linting templates

@wxiaoguang
Copy link
Author

I have read it. But there are a lot of template engines, not only PHP.

And // <?= "\n mydata = " . json_encode($var) . ";" ?> is quite ugly, and sometimes it's not feasible in other template engines.

If the whole <script> tag could be disabled from linting, then the code can be simple and clear. Maybe something like:

<!-- eslint-disable -->
<script type="module">
    window.myGlobal.var = {{.MyData}};  // here is invalid JS syntax, but it's rendered by backend template engine correctly.
</script>

Is it feasible?

@silverwind
Copy link

silverwind commented Jul 11, 2022

I think the bug here is that invalid JS between eslint-disable and eslint-enable trips this module's parser when it should ideally not try to parse anything between such tags:

<script>
  /* eslint-disable */
  ]
  /* eslint-enable */
</script>

The bug is reproducible with a regular .js file too, so I think espree is not correctly ignoring code between disable/enable sections as it expects the whole file/block to be valid JS, which generally is true for .js files but it's certainly a problem with templated HTML.

What could work (if eslint-plugin-html decides to support it) would be support the disable/enable comment as HTML, outside the script block, so the invalid block is not passed to eslint in first place, e.g.

<!-- eslint-disable -->
<script>
]
</script>
<!-- eslint-enable -->

@BenoitZugmeyer
Copy link
Owner

Thank you for the suggestion, it has been implemented and released as part of v7.0.0.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants