🐛 BUG: Linting seems wrong for vanilla JS in astro components

[robinmetral]

What package manager are you using?

npm and yarn

What operating system are you using?

Mac

Describe the Bug

Linting seems off when using vanilla JS in astro components.

Here's an example page that fetches a dog image and renders it using vanilla JS:

dog.astro

<Layout> <!-- let's say this contains the html head and body elements -->
  <div id="dog"></div>
  <script type="text/javascript">
    /* let's not worry about browser support and just use modern JS */
    async function getDog() {
      try {
        const res = await fetch("https://dog.ceo/api/breeds/image/random");
        const data = await res.json();
        return data.message;
      } catch (error) {
        console.log(error);
        return null;
      }
    }
    async function renderDog() {
      const imgSrc = await getDog();
      if (imgSrc) {
        const parentElement = document.getElementById("dog");
        const imgElement = document.createElement("img");
        imgElement.src = imgSrc;
        parentElement.appendChild(imgElement);
      }
    }
    renderDog();
  </script>
</Layout>

This JS is valid, but here would be the output of astro check (same as the VSCode linting errors):

src/pages/index.astro:9:6 - Expression expected.
6        try {
         ~~~

src/pages/index.astro:10:8 - Expression expected.
7           const res = await fetch("https://dog.ceo/api/breeds/image/random");
            ~~~~~

src/pages/index.astro:13:6 - Unexpected token. Did you mean `{'}'}` or `}`?
10        } catch (error) {
          ~

src/pages/index.astro:16:6 - Unexpected token. Did you mean `{'}'}` or `}`?
13        }
          ~

src/pages/index.astro:17:4 - Unexpected token. Did you mean `{'}'}` or `}`?
14      }
        ~

src/pages/index.astro:19:6 - Expression expected.
16        const imgSrc = await getDog();
          ~~~~~

src/pages/index.astro:21:8 - Expression expected.
18          const parentElement = document.getElementById("dog");
            ~~~~~

src/pages/index.astro:25:6 - Unexpected token. Did you mean `{'}'}` or `}`?
22        }
          ~

src/pages/index.astro:26:4 - Unexpected token. Did you mean `{'}'}` or `}`?
23      }

Steps to Reproduce

1. Go to the CodeSandbox reproduction
2. Open a second terminal (you might need to fork it if you don't have permissions)
3. Run yarn run check

Link to Minimal Reproducible Example (Optional)

https://codesandbox.io/s/astro-js-linting-errors-1rttp

[matthewp]

Thank you! Going to move this to the language tools repo, where this code is. Thanks for the great example!

[robinmetral]

-   <script type="text/javascript">
+   <script type="module">

Still not used to writing these without a build step 😅