#vs code

4 messages · Page 1 of 1 (latest)

tawny fox
#

In vs code sometimes Astro syntax doesn’t auto complete, especially when importing components. How do I make this work better?

wicked gyroBOT
#

Hi @tawny fox. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To improve the Astro developer experience and unlock new features in VS Code, you should install the official Astro VS Code Extension (https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). This extension provides several key features and improvements for Astro projects, including syntax highlighting for .astro files, TypeScript type information for .astro files, and VS Code Intellisense (https://code.visualstudio.com/docs/editor/intellisense) for code completion, hints, and more.

If you're using TypeScript in your Astro project, Astro ships with built-in support for it. You can import .ts and .tsx files in your Astro project, write TypeScript code directly inside your Astro component, and even use an astro.config.ts file. Astro always treats your component code as TypeScript, and the Astro VS Code Extension will infer as much as it can to provide autocompletion, hints, and errors in your editor. You can check out the guide on how to set up TypeScript (https://docs.astro.build/en/guides/typescript/) in your Astro project.

Also, Astro recommends using the defineConfig() helper in your configuration file. This provides automatic IntelliSense in your IDE. Editors like VSCode are able to read Astro’s TypeScript type definitions and provide automatic jsdoc type hints, even if your configuration file isn’t written in TypeScript.

If you're not using VSCode, you can install the Astro TypeScript plugin (https://www.npmjs.com/package/@astrojs/ts-plugin) to support importing .astro files from .ts files. This can be useful for re-exporting. Here's how to install it:

npm install @astrojs/ts-plugin

Then, add the following to your tsconfig.json:

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "@astrojs/ts-plugin"
      }
    ]
  }
}