[feature] Create a VS Code extension

[milesj]

Is your feature request related to a problem? Please describe.

Nope

Describe the solution you'd like

A great quote by Jamie Kyle, "If your developer tool is not running in the editor, it’s running too late". https://twitter.com/buildsghost/status/1537133064454742016

And I agree. A lot of developers are heavily invested in their editor/IDE, and prefer to not tab to their terminal to verify things aren't broken. This includes running the linter, tests, builds, etc.

To that end, we should support an official moon VS Code extension (with potential for other editors in the future) that provides the following features:

• Validates config files (.moon/workspace.yml, .moon/project.yml, and project.yml) based on the $schema field and the associated JSON Schema under the hood. VSC does not support this out of the box.
• Introduce a sidebar panel (similar to "npm scripts") that lists all projects and their associated tasks in the moon workspace. For each project or row, there will be action buttons that will run the moon binary within VSC's terminal.

Panel

Here's a rudimentary outline of the panel using ASCII art.

Applications
v [js] project-a                 [$] [i]
    build webpack                [*] [>]
    format prettier
    lint eslint
    test jest
    typecheck tsc
> [js] project-b                 [$] [i]
Libraries
> [ts] project-c                 [$] [i]

Functionality:

• Top-level lists projects in alphabetical order, grouped by project type. This is based on the type field in project.yml.
• Project row:
  • Displays the project language as icon on the far left (JS, TS, etc). This is based on the language field in project.yml.
  • Displays the project ID after the type on the left.
  • When hovered or expanded, displays an "information" button on the right that runs moon project <id> in the terminal. Also displays a "view project" button that opens the project.yml file, or a package.json file.
  • Can be expanded or collapsed by clicking the arrow on the left.
  • Lists out all tasks within the project as nested rows, in alphabetical order.
• Task row:
  • Displays the task ID on the left.
  • Displays the underlying command to be ran after the ID. This text uses a muted color.
  • When hovered, displays "debug" and "run" buttons on the right that runs moon run <target> in the terminal. Debug mode will enable the Node.js profiler once that functionality lands.
• When jumping between files in the editor, the expanded project should reflect which project the file belongs to. This works in a similar fashion to VSCs "expand file tree when jumping around files" feature.

Nice to haves:

• Shortcuts/hotkeys for running the tasks. Not sure what this would look like.
• Adding the "run task" functionality to the command palette.

Describe alternatives you've considered

N/A

Additional context

N/A

[RichiCoder1]

I don't know how desirable it is ultimately, but a few extensions offer the ability to opt-in to "bootstrapping" a workspace when it's loaded. An example is jest running tests and starting a watcher upon load.

An example for moon might be making sure a moon repo is "setup" and ready to go, optionally running tasks on start.

[milesj]

@RichiCoder1 Great point. This is definitely something I could see solving the "eslint/babel/etc plugins local to the repo and need to be built first" kind of scenario. It ensures these projects are always not stale.

[alexn-s]

+1 vscode extensions are always nicec

[milesj]

This has landed! https://moonrepo.dev/docs/editors/vscode