Skip to content

CONTRIBUTING.md

Latest commit

 

History

History
85 lines (50 loc) · 3.23 KB

CONTRIBUTING.md

File metadata and controls

85 lines (50 loc) · 3.23 KB

Contributing

See the overview video on how the extension works.

Setup

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

pnpm
pnpm build

VS Code extension

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:

pnpm dev

Start Debugger

Then in VSCode:

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

Showing the steps to launching the debugger

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.

Steps to open the command palette

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.

Shows how to restart the extension

Troubleshooting

Changes are not picked up

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.

Show the steps of disabling the extension

TS Plugin

To start development on the TS Plugin, you'll need to first run the following command:

pnpm dev

Logging

Logs from TypeScript plugins are shown in the TSServer log. To open this log, follow these steps:

  1. Ctrl+Shift+P (CMD+Shift+P on OSX) opens the command palette.
  2. Select TypeScript: Open TS Server log.

If you've never openned the TS Server log before, you'll first need to enable logging and restart the TSServer. The command will prompt you to do this if needed

Hint: TSServer's logs are really noisy, even at the lowest level. Make sure to disable other plugins when working on the TS Plugin. Alternatively, grepping for "Astro Plugin" can help