Merge pull request #198 from BenoitZugmeyer/disable-comment

feat: disable ESLint with HTML comments

Author: BenoitZugmeyer

CHANGELOG.md

@@ -1,6 +1,7 @@
 UNRELEASED v7.0.0
 
 - **Breaking: drop Node 10 support**
+- Allow temporarily disabling ESLint wit HTML comments
 
 2021-09-20 v6.2.0
 

README.md

@@ -7,6 +7,7 @@
 </div>
 
 - [Usage](#usage)
+- [Disable ESLint](#disable-eslint)
 - [Multiple scripts tags in a HTML file](#multiple-scripts-tags-in-a-html-file)
   - [History](#history)
 - [XML support](#xml-support)
@@ -42,6 +43,32 @@ Example:
 }
 ```
 
+## Disable ESLint
+
+To temporarily disable ESLint, use the `<!-- eslint-disable -->` HTML comment. Re-enable it with
+`<!-- eslint enable -->`. Example:
+
+```html
+<!-- eslint-disable -->
+<script>
+  var foo = 1
+</script>
+<!-- eslint-enable -->
+```
+
+To disable ESLint for the next script tag only, use the `<!-- eslint-disable-next-script -->` HTML
+comment. Example:
+
+```html
+<!-- eslint-disable-next-script -->
+<script>
+  var foo = 1
+</script>
+```
+
+Disabled script tags are completely ignored: their content will not be parsed as JavaScript. You can
+use this to disable script tags containing template syntax.
+
 ## Multiple scripts tags in a HTML file
 
 When linting a HTML with multiple script tags, this plugin tries to emulate the browser behavior by
@@ -209,14 +236,17 @@ documentation](http://eslint.org/docs/user-guide/command-line-interface#ext).
 
 `eslint-plugin-html` won't evaluate or remove your template markup. If you have template markup in
 your script tags, the resulting script may not be valid JavaScript, so `ESLint` will fail to parse
-it.
+it. Here are some workarounds:
+
+- You can use [HTML comments to disable ESLint](#disable-eslint) for specific script tags.
 
-For PHP, you can use [`eslint-plugin-php-markup`](https://github.com/tengattack/eslint-plugin-php-markup) to
-lint php files, it use a same way to process php markup like `eslint-plugin-html`.
+- For PHP, you can use
+  [`eslint-plugin-php-markup`](https://github.com/tengattack/eslint-plugin-php-markup) to lint php
+  files, it use a same way to process php markup like `eslint-plugin-html`.
 
-Or another possible hacky workaround to make sure the code is valid JavaScript is to put your template
-markup inside a comment. When the template is rendered, the generated JS code must start with a new
-line, so it will be written below the comment. PHP example:
+- Another possible hacky workaround to make sure the code is valid JavaScript is to put your
+  template markup inside a comment. When the template is rendered, the generated JS code must start
+  with a new line, so it will be written below the comment. PHP example:
 
 ```html
 <script>

src/__tests__/__snapshots__/extract.js.snap

@@ -9,6 +9,20 @@ a;
 ]
 `;
 
+exports[`disable comments ignores next script 1`] = `
+Array [
+  "var bar = 2;
+",
+]
+`;
+
+exports[`disable comments ignores script 1`] = `
+Array [
+  "var bar = 2;
+",
+]
+`;
+
 exports[`extract empty script tag (#7) 1`] = `
 Array [
   "",

src/__tests__/extract.js

@@ -334,3 +334,35 @@ it("extract multiple tags types", () => {
     javaScriptTagNames: ["script", "customscript"],
   })
 })
+
+describe("disable comments", () => {
+  it("ignores next script", () => {
+    test({
+      input: `
+      <!-- eslint-disable-next-script -->
+      <script>
+        var foo = 1;
+      </script>
+
+      <script>
+        var bar = 2;
+      </script>
+      `,
+    })
+  })
+
+  it("ignores script", () => {
+    test({
+      input: `
+      <!-- eslint-disable -->
+      <script>
+        var foo = 1;
+      </script>
+      <!-- eslint-enable -->
+      <script>
+        var bar = 2;
+      </script>
+      `,
+    })
+  })
+})

src/extract.js

@@ -3,6 +3,10 @@
 const htmlparser = require("htmlparser2")
 const TransformableString = require("./TransformableString")
 
+const NO_IGNORE = 0
+const IGNORE_NEXT = 1
+const IGNORE_UNTIL_ENABLE = 2
+
 function iterateScripts(code, options, onChunk) {
   if (!code) return
 
@@ -12,6 +16,7 @@ function iterateScripts(code, options, onChunk) {
   let index = 0
   let inScript = false
   let cdata = []
+  let ignoreState = NO_IGNORE
 
   const chunks = []
   function pushChunk(type, end) {
@@ -36,6 +41,15 @@ function iterateScripts(code, options, onChunk) {
           return
         }
 
+        if (ignoreState === IGNORE_NEXT) {
+          ignoreState = NO_IGNORE
+          return
+        }
+
+        if (ignoreState === IGNORE_UNTIL_ENABLE) {
+          return
+        }
+
         inScript = true
         pushChunk("html", parser.endIndex + 1)
       },
@@ -76,6 +90,17 @@ function iterateScripts(code, options, onChunk) {
 
         pushChunk("script", parser.endIndex + 1)
       },
+
+      oncomment(comment) {
+        comment = comment.trim()
+        if (comment === "eslint-disable") {
+          ignoreState = IGNORE_UNTIL_ENABLE
+        } else if (comment === "eslint-enable") {
+          ignoreState = NO_IGNORE
+        } else if (comment === "eslint-disable-next-script") {
+          ignoreState = IGNORE_NEXT
+        }
+      },
     },
     {
       xmlMode: xmlMode === true,