Checklist

• I have already searched for existing issues for this framework/library.
• I have already searched npm for an existing Astro integration.
• I have already tried this with Astro myself, and it did not work.

Website or GitHub repository

https://open-vsx.org
https://github.com/eclipse/openvsx/wiki/Publishing-Extensions

Additional Details

This should hopefully just be an update to the publishing script for the vs code extension, though that doesn't mean it won't require a bit of work.

Help make it happen!

• I am willing to submit a PR to implement this change.
• I am willing to submit a PR to implement this change, but would need some guidance.
• I am not willing to submit a PR to implement this change.

What package manager are you using?

npm

What operating system are you using?

mac

Describe the Bug

Given this component usage:

<WrapChildrenWithText>
  <img src="https://placehold.co/400" />
<WrapChildrenWithText>

I would expect this to warn or error if WrapChildrenWithText did not have a <slot> defined. Currently, I do not know what will happen other than we aren't providing warnings.

/cc @natemoo-re

Link to Minimal Reproducible Example (Optional)

No response

Describe the Bug

Emmet doesn't work inside a component

Steps to Reproduce

Emmet should work inside components

Describe the Bug

Unused variables aren't highlighted properly

Steps to Reproduce

Unused variables should be highlighted with a greyer color that implies that they convey less importance.

Describe the Bug

If you don't use semicolons, or specifically if the last statement does not have a semicolon, you will see many errors in the template section.

Steps to Reproduce

---
let something = 'value'
---

<div></div>

The div will show as errors.

Motivation

There are currently no types for the Astro global in an .astro file's frontmatter script.

Additionally, Astro.props currently must be cast. For example:

export interface Props {
  value: string;
}
const { value } = Astro.props as Props;

Proposed Solution

Astro's Language Server should:

• Automatically inject type definitions for the Astro global into each file.
• Automatically declare the value of Astro.props if export interface Props is detected.
• Automatically provide Intellisense based on a component's Props when writing HTML

Detailed Design

No response

Open Questions

No response

Help make it happen!

• I am willing to submit a PR to implement this change.
• I am willing to submit a PR to implement this change, but would need some guidance.
• I am not willing to submit a PR to implement this change.

Describe the Bug

Everything following the id becomes white as shown here:

Steps to Reproduce

Create an Astro component with the following content:

<div id={`a`}></div>

(I can literally see the bug right here in Github Markdown preview lol)

Describe the Bug

Type checking is disabled or doesn't work for components inside npm packages.

Steps to Reproduce

The Astro VSCode extension should provide type errors for components inside npm packages.

What package manager are you using?

yarn

What operating system are you using?

Windows

Describe the Bug

Hover hint isn't working for Javascript inside script tags.

Steps to Reproduce

The VSCode extension should enable hover hints for Javascript inside script tags.

Link to Minimal Reproducible Example (Optional)

No response

Describe the Bug

If a variable is assigned to a custom element's attribute, syntax highlighting is absent for the rest of the file.

Steps to Reproduce

<my-element id={ id } />
<p>Syntax highlighting is now broken</p>

Describe the Bug

Using Astro.resolve() shows errors as it doesn't think Astro.resolve exists.

Steps to Reproduce

Just use Astro.resolve in any file.

Describe the Bug

Should show errors if the props are incorrect

Steps to Reproduce

n/a

Describe the Bug

Astro v0.21 introduce template literal attributes with the following syntax:

<div atrr=`some ${value}`>

These currently don't have any syntax highlighting.

Steps to Reproduce

1. Paste the snippet above into an .astro file

What package manager are you using?

yarn

What operating system are you using?

Windows

Describe the Bug

Currently, autocomplete doesn't work for JavaScript inside the script tags, CSS, and SCSS inside Astro components.,

Steps to Reproduce

JavaScript Intellisense now works inside the frontmatter but not inside the script tags. It should work in both of the places. And CSS and SCSS IntelliSense should work inside the style tags.

Link to Minimal Reproducible Example (Optional)

No response

Describe the Bug

Object keys inside the JSX {} dynamic operator aren't highlighted

Steps to Reproduce

Object keys inside the JSX {} dynamic operator should be highlighted properly

What package manager are you using?

yarn

What operating system are you using?

Windows

Describe the Bug

The VSCode extension doesn't provide any linting in Astro components.

Steps to Reproduce

A custom Eslint parser should be set up for lining in the Astro components. It should have three types of linting enabled. First, for Javascript in the frontmatter. Then for HTML in the markup and for Javascript in the script tags. And then for Styling (CSS, SCSS, etc.) in the style tags. If possible, it should also have linting for Markdown inside the Markdown components.

Link to Minimal Reproducible Example (Optional)

No response

What package manager are you using?

yarn

What operating system are you using?

Windows

Describe the Bug

Emmet support is incomplete in Astro components. Only basic completions are supported.

For example, if I type 'button' in a astro component, emmet only shows 'button' tag completion. But in JSX and HTML, it shows button, button:d, button:disabled, button:r, button:reset, button:s and button:submit tag completion.

Steps to Reproduce

Advance completions provide by Emmet should be suppported.

Link to Minimal Reproducible Example (Optional)

No response

Background & Motivation

When creating a project that reexports Astro components, it would be nice if the types followinged, for example:

Name.astro

---
export interface Props {
  name: string;
}
---

index.ts

import Name from './Name.astro';

export {
  Name
};

However, currently the props do not follow through into TypeScript.

Proposed Solution

Build a TypeScript plugin which allows TypeScript files to consume Astro types.

Detailed Design

No response

Help make it happen!

• I am willing to submit a PR to implement this change.
• I am willing to submit a PR to implement this change, but would need some guidance.
• I am not willing to submit a PR to implement this change.

• A few people (including myself, embarassingly) didn't realize that there was a prettier plugin for Astro files
• Reading up on Svelte's support, it looks like they bundle their formatter in with their VSCode extension
• see: https://github.com/sveltejs/language-tools/tree/master/packages/svelte-vscode

We should look into doing this ourselves! Almost all Astro users use the VSCode extension, so format-on-save should then be enabled by default.

What package manager are you using?

yarn

What operating system are you using?

macOS

Describe the Bug

When using a tsconfig.json file such as :

{
   "compilerOptions": {
      "strict": true,
      "alwaysStrict": true
   }
}

Visual Studio Code highlights all of the JSX and shows this linting error:

JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.

In Discord, Matthew2 suspects this might be a bug with the Astro extension.

https://discord.com/channels/830184174198718474/845451724738265138/895704312544653353

Steps to Reproduce

1. npm init astro --template minimal using template
2. Open index.astro and note the lack of linting warnings.
3. Add the tsconfig.json sample above.
4. Close and then reopne index.astro.
5. Notice all the linting errors.

Link to Minimal Reproducible Example (Optional)

https://github.com/justinnoel/astro-jsx-linting-issue

Describe the Bug

There's a problem with highlighting unused variables inside a script tag. The issue is if a function gets called in onevent attribute, the function is still marked as unused

Steps to Reproduce

A function shouldn't be marked as unused and therefore highlighted with a dim color if gets called in an onevent attribute

Describe the Bug

When using the Markdown component and a block like > some text you get an error message.

Unexpected token. Did you mean `{'>'}` or `>`?js(1382)

Steps to Reproduce

<Markdown>
  # Example

  > Block here
</Markdown>

What package manager are you using?

yarn

What operating system are you using?

Windows

Describe the Bug

The JSX {} dynamic operator isn't higlighted

Steps to Reproduce

The JSX {} dynamic operator should be higlighted

Link to Minimal Reproducible Example (Optional)

No response

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

When using VSCode, the <!dotype html> element is not syntax highlighted.

Steps to Reproduce

n/a

Link to Minimal Reproducible Example (Optional)

No response

What package manager are you using?

yarn

What operating system are you using?

Windows

Describe the Bug

VSCode highlights immutable variables, functions, properties, arrays, etc with a dark blue color and mutable with a lighter blue color.

But the extension enables this highlighting only for the line you declare the immutable variable. But when you reference it in the script, it doesn't get highlighted.

Steps to Reproduce

In both the lines where you declare it and where you refer to it, an immutable variable should be highlighted with a dark blue color. And the mutable variables should be highlighted with a light blue color (current color shown in Astro components).

Link to Minimal Reproducible Example (Optional)

---
// Please view the code in VSCode. Highlighting in GitHub is different from VSCode

// The following variables are immutable and highlighed with a darker blue variant
const { name, description, version } = Astro.props;

// The following references of the immutable variables declared above aren't highlighted with a darker blue variant
const data = { name, description, version };

// The following reference of the data variable isn't highlighted with a darker blue variant
console.log(data);
---

What package manager are you using?

yarn

What operating system are you using?

Windows

Describe the Bug

Components are highlighted with the same color as general HTML codes.

Steps to Reproduce

Components should be highlighted with a different color.

Link to Minimal Reproducible Example (Optional)

No response

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

When the prettier plugin is ready, add it to VSCode automatically.

Steps to Reproduce

n/a

Link to Minimal Reproducible Example (Optional)

No response

Describe the Bug

The types of the imported components aren't updated. I'm getting the same TypeErrors when I update the types of a component's prop.

Steps to Reproduce

The types of the imported components should be updated as soon as the user updates them

Describe the Bug

When using fetchContent without providing a type parameter it is treated as unknown in which case accessing variables gives you type errors. We should use any as the default instead so that there are no type errors. You opt-in to strong typing by providing a type.

Steps to Reproduce

const thing = Astro.fetchContent('./something');

const val = thing[0].val;

Describe the Bug

If you have comments in nested elements it gets confused and thinks there are missing closing tags.

Steps to Reproduce

<html>
  <body class="is-preload">
    <!-- Wrapper -->
    <div id="wrapper">
      <!-- Main -->
      <div id="main"></div>
    </div>
  </body>
</html>

Background & Motivation

I want to be able to import from packages like:

---
import { Something } from 'some/package';
---

Where the package has a ts/js entry that re-exports from other .astro files.

Proposed Solution

None

Detailed Design

No response

Help make it happen!

• I am willing to submit a PR to implement this change.
• I am willing to submit a PR to implement this change, but would need some guidance.
• I am not willing to submit a PR to implement this change.

Describe the Bug

Typing ( autocompletes to Astro().

Steps to Reproduce

Typing ( shouldn't autocomplete to Astro().

Describe the Bug

Partial<> isn't being respected for the interface of props of a component. The VSCode extension is marking all the properties as required.

Steps to Reproduce

The VSCode extension should check if the interface used for components is wrapped with Partail<>

Describe the Bug

<Component name="name" />
// Type '{ name: string; }' is not assignable to type 'AstroBuiltinProps'.
// Property 'containerSelector' does not exist on type 'AstroBuiltinProps'

Steps to Reproduce

1. Create a component without an export interface Props
2. Give it a prop when using it.

What version of astro are you using?

0.21.3

What package manager are you using?

npm

What operating system are you using?

Windows

Describe the Bug

Syntax highlight doesn't seens to be working on Stylus on 0.21.0 and above, maybe this is a problem with Astro extension? I'm using the popular "Tokyo Night" theme, stylus is installed and it is working as expected functionality wise.

Link to Minimal Reproducible Example

https://codesandbox.io/s/beautiful-chaplygin-prpn3

Describe the Bug

If you use a doctype it shows as an error.

<!doctype html>

Steps to Reproduce

Use any doctype.

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

When you have an error in the frontmatter TypeScript, the error is not shown.

Steps to Reproduce

---
let one = 'one';
let two = 2;

let three: number = one + two;
---

Link to Minimal Reproducible Example (Optional)

No response

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

Describe the Bug

Auto commenting using Ctrl + / key doesn't work inside JSX {} operator. The code gets commented using HTML comments instead of JS comments.

Steps to Reproduce

Auto commenting using the Ctrl + / key should work inside JSX {} operator

Describe the Bug

This definition can conflict with my own environment's import.meta definitions. For example:

• If I'm using Snowpack with @types/snowpack-env
• If I'm using Vite and connected my tsconfig to vite/types

An example error that I'm seeing:

All declarations of 'hot' must have identical modifiers.js(2687)
Subsequent property declarations must have the same type.  Property 'hot' must be of type '{ readonly data: any; accept(): void; accept(cb: (mod: any) => void): void; accept(dep: string, cb: (mod: any) => void): void; accept(deps: readonly string[], cb: (mods: any[]) => void): void; acceptDeps(): never; dispose(cb: (data: any) => void): void; decline(): void; invalidate(): void; on: { ...; }; }', but h

I think it's safe to assume that your environment provides these, and its not the responsibility of the Astro compiler.

Steps to Reproduce

Do either of the steps above (for Snowpack or Vite) and then see this error in every compiled Astro file (ex: src/pages/index.astro).

Describe the Bug

Autocompletion performance is often slow

https://github.com/sveltejs/language-tools/pull/1022/files

Steps to Reproduce

1. npm init astro using template
2. ...
3. ...
4. ...
5. Error! Describe what went wrong (and what was expected instead)...

Describe the Bug

The following Component is valid.

<XElement @is="div">Hello, world!</XElement>

The following HTML element is also valid:

<custom-element @is="div">Hello, world!</custom-element>

However, the @ prefixed attribute is not picked up by syntax highlighting, and will report the following error:

Identifier expected. js(1003)

This will cause the remainder of the element to be interpreted incorrectly. The following error is reported for the closing of the opening tag:

Unexpected token. Did you mean `{'>'}` or `>`?

Steps to Reproduce

1. npm init astro using template minimal
2. Add <custom-element @is="div">Hello, world!</custom-element> to index.astro
3. Error! Syntax highlighting is missing and the aforementioned errors are reported.

Background & Motivation

It would be great to be able to cmd+click on absolute paths to resources in /public from within astro components. So, for example, clicking on the path in <img src="/images/hero.svg"/> would open up /public/images/hero.svg.

Proposed Solution

Possible solutions

Incorporate into VSCode extension.

Detailed Design

No response

Help make it happen!

• I am willing to submit a PR to implement this change.
• I am willing to submit a PR to implement this change, but would need some guidance.
• I am not willing to submit a PR to implement this change.

Describe the Bug

https://github.com/snowpackjs/astro-language-tools/runs/3557315484?check_suite_focus=true

Env var DISCORD_WEBHOOK is not defined. Maybe try to set it if you are running the script manually.

Steps to Reproduce

👆 explained above

Describe the Bug

import logo from "../../public/logo.png";
// Cannot find module '../../public/logo.png' or its corresponding type declarations

Steps to Reproduce

1. Import any image.
2. See error

Describe the Bug

---
const data = await fetch("url")
// Top-level 'await' expressions are only allowed when the 'module' option is set to 'esnext' or 'system', and the 'target' option is set to 'es2017' or higher
---

Steps to Reproduce

1. Use fetch in the component script section.

Background & Motivation

This is something I do, when I spend most of my time just reading code, is peeking into the source files for API's to see whats under the hood.

This would also be a nice feature to have with the Astro Language extension, where it would apply to looking up components and functions written in the body of the astro file and in the frontmatter block

Proposed Solution

Open Questions

I truly dont know enough to make any suggestions regarding a solution for this particular problem,

Detailed Design

This is the reference to the VSCode docs that describes the feature in more detail:

https://code.visualstudio.com/docs/editor/editingevolved#_peek

And the reference to the API

https://code.visualstudio.com/api/references/vscode-api#DefinitionProvider

I also noticed that this API could be related to the request snowpackjs/astro#1024 and a bit wider afield where we can define the symbols used in the astro files, this can help with the Outline dialog box in the editor window of VSCode

Help make it happen!

• I am willing to submit a PR to implement this change.
• I am willing to submit a PR to implement this change, but would need some guidance.
• I am not willing to submit a PR to implement this change.

Background & Motivation

Inside VS Code, the F2 keybinding allows for symbols to be renamed throughout the file.

---
import timer from 'timer'
const date = timer()
---

<div>
    {date.now()}
</div>

In this instance if we wanted to rename date a current workflow would be to search and replace the terms with the new substituted term, whereas the keybinding prefroms this step for the developer.

Proposed Solution

Possible solutions

I propose that this functionality be provided within the Astro language extension.

Alternatives considered

Risks, downsides, and/or tradeoffs

Current work around is to do either a grep of the file or use the editors search and replace function

Open Questions

Detailed Design

further information about this is found on the VS code Docs here: https://code.visualstudio.com/docs/editor/refactoring#_rename-symbol

This is the API for the 'Rename Provider'
https://code.visualstudio.com/api/references/vscode-api#RenameProvider

I would like to help, but this is so far beyond my mere mortalness

Help make it happen!

• I am willing to submit a PR to implement this change.
• I am willing to submit a PR to implement this change, but would need some guidance.
• I am not willing to submit a PR to implement this change.

Describe the Bug

VScode extension doesn't properly add an indentation in .astro files. I shot a small video - https://yadi.sk/i/GgeCFijpPbicUg

Steps to Reproduce

See the video above.