jonathantneal / astro-language-tools

Language tools for Astro

Astro Language Tools

This repository contains tooling for the Astro language, powering the VSCode extension. The packages included are:

• The Astro VSCode Extension
• The Astro Language Server

This enables all of the editing features you depend on in VSCode. Any time you open a .astro file these tools power editing functionality such as:

• Go to Definition
• Code hover hints
• Code completion
• Function signatures
• Syntax highlighting
• Code folding
• Emmet

Soon we hope to port these to other editors compatible with the Language Server Protocol.

Development

See the overview video on how the extension works.

Changes to the Astro Language Tools are subject to Astro Governance.

Setup

All Astro projects use Yarn and Lerna to enable development in a monorepo. Once you've cloned the project install dependencies and do an initial build:

yarn
yarn build

Debugging

During the normal course of development on the VSCode extension you'll want to run the debugger. First run the build in watch mode with:

yarn dev

Turn Off Extension

If you have the Extension installed you'll need to turn it off, or your development extension will not be used and you'll be confused why your changes are not working.

1. Click on Extensions.
2. Search for astro.
3. Click the extension and then click Disable.

Start Debugger

Then in VSCode:

1. Switch to Run and Debug.
2. Click Launch Extension.

This will launch a new window for your editor. Here you can navigate to a test Astro project that you will use to develop your changes.

Open Debug Console

The Debug console in the main editor is where you will get logging information. When developing in the language server, logging is helpful to figure out what is going on.

1. Ctrl+Shift+P (CMD+Shift+P on OSX) opens the command palette.
2. Select Debug Console.
3. At the bottom, switch to Attach to Server. This is most of the information you'll want to see.

Make changes and set breakpoints

Now you can start developing your changes. You can set breakpoints or add debugger; statements. To see your changes reflect you'll need to take these steps:

1. In the extension editor window, go to Run and Debug if you are not already there.
2. Click on the Restart button under Launch Client.

This will restart the extension and reload your test window.