pliant cloud
I have src/env.d.ts file in my project where I have the following code:
declare namespace astroHTML.JSX {
interface HTMLAttributes {
'data-box'?: string
}
}
However when I try to use the attribute I do not see it in the autocomplete list in VScode. I have tried to reload the window but that made no difference. The usual suggestions for other attributes work as per usual so based on that TypeScript is working.
Is there something that I might be missing?
humble jayBOT
Hi @pliant cloud. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Based on the information provided in the extracts, it seems like you're on the right track. However, there are a few things you might want to check:
Ensure that you have the correct version of Astro. The utility types feature was added in astro@1.6.0 as per the documentation (https://docs.astro.build/en/guides/typescript#type-utilities).
Make sure that you're using the correct namespace. According to the documentation (https://docs.astro.build/en/guides/typescript#type-utilities), you should be using astroHTML.JSX for extending the default JSX definitions.
You might need to add a triple-slash directive at the top of your TypeScript files to use astroHTML. Here's an example from the documentation (https://docs.astro.build/en/guides/typescript#type-utilities):
/// <reference types="astro/astro-jsx" />
type MyAttributes = astroHTML.JSX.ImgHTMLAttributes;
There have been some issues reported on GitHub about autocomplete not working for Astro.* APIs in VSCode (issue #1026 (https://github.com/withastro/astro/issues/1026)). It's possible that this could be affecting your custom attributes as well.
Lastly, Astro recommends using the defineConfig() helper in your configuration file for automatic IntelliSense in your IDE. This is mentioned in the Astro configuration guide (https://docs.astro.build/en/guides/configuring-astro#config-intellisense).