---
title: VS Code extension
sidebar_label: VS Code
---

import Image from '@site/src/components/Image';
import TwoColumn from '@site/src/components/TwoColumn';

Enhance your VS Code experience with our integrated moon console! Whether you're a fan of the
command line, or prefer interactive interfaces, our console will be a welcome experience.

> This extension is in its early stages. Expect more advanced features in the future, like
> autocompletion, config validation, and more!

## Views

<div className="flex">
  <div className="mr-2">
    <Image
    src={require('./vscode/activity-icon.png')}
    alt="VS Code - Sidebar icon"
    width="50px"
    align="left"
    padding="0"
  />
  </div>
  <div>

All views are available within the moon sidebar. Simply click the moon icon in the left activity
bar!

  </div>
</div>

<br />

<TwoColumn aside={<Image src={require('./vscode/projects-view.png')} alt="VS Code view - Projects" />}>

### Projects

The backbone of moon is the projects view. In this view, all moon configured projects will be
listed, categorized by their [`layer`](../config/project#layer), [`stack`](../config/project#stack),
and designated with their [`language`](../config/project#language).

Each project can then be expanded to view all available tasks. Tasks can be ran by clicking the `▶`
icon, or using the command palette.

> This view is available in both the "Explorer" and "moon" sidebars.

</TwoColumn>

<TwoColumn aside={<Image src={require('./vscode/tags-view.png')} alt="VS Code view - Tags" />}>

### Tags

Similar to the projects view, the tags view displays projects grouped by their
[`tags`](../config/project#tags).

> This view is only available in the "moon" sidebar.

</TwoColumn>

<TwoColumn
  aside={<Image src={require('./vscode/last-run-view.png')} alt="VS Code view - Last run" />}
>

### Last run

Information about the last ran task will be displayed in a beautiful table with detailed stats.

This table displays all actions that were ran alongside the primary target(s). They are ordered
topologically via the action graph.

</TwoColumn>

## Features

### YAML validation

To enable accurate validation of our YAML configuration files, you'll need to update the
`yaml.schemas` setting in `.vscode/settings.json` to point to the local schemas at
`.moon/cache/schemas`.

This can be automated by running the "moon: Append YAML schemas configuration to settings" in the
command palette, after the extension has been installed.

## Troubleshooting

View the
[official VS Code marketplace](https://marketplace.visualstudio.com/items?itemName=moonrepo.moon-console)
for more information on the extension, its commands, available settings, and more!
