Skip to content

An IDE in the skyΒ #1

@github-actions

Description

@github-actions

GitHub provides a lightweight version of VS Code for free for all GitHub users They call it the GitHub web based editor. It's hosted on github.dev as opposed to github.com

Note

☝️ Learning goals in this issue

  • Browse the repo content in the GitHub web based editor (β‰ˆVS Code)
  • Turn on sync of settings on your user profile.
  • Introduce an arbitrary new tool to support a standard way-of-working
  • Add the extension that supports this new standard and make it a recommendation for other repo co-users
  • add, commit and push your changes to git from the GitHub web based editor

If you visit github.dev you'll see an ultra short description on how to use this feature.

πŸ‹οΈβ€β™€οΈ Exercise

  • πŸ‘‰ Replace .com with .dev in your URL πŸ‘ˆ
  • πŸ‘‰ use the keyboard shortcut . πŸ‘ˆ

The first method will always take you to the web editor, the second is somewhat dependent on where you are on the github.com web page; It works in the context where it makes sense, like when you are browsing the files in the repo.

The GitHub web based editor is actually a real VC Code IDE. You can even turn on the sync settings

πŸ‹οΈβ€β™€οΈ Exercise

  • πŸ‘‰ Turn on sync (everything) - sign in with your GitHub account and authorize πŸ‘ˆ
πŸ‘‡ Details... image image

Some extensions are not Web Editor compatible, they are designed to work in a CodeSpace. We'll go there next, but first, try to install an extension that is actually Web Editor Compatible:

πŸ‹οΈβ€β™€οΈ Exercise

  • πŸ‘‰ Search for and install "GitHub Issue Notebooks" πŸ‘ˆ
πŸ‘‡ Details...

This is the extension you are looking for:

image
The plugin is a Jupyter-like Notebook that enables you to generate all kinds of reports-as-code which will be stored as .github-issues files in the repo and shared among all team-members - and version controlled! Nice!

πŸ‹οΈβ€β™€οΈ Exercise

  • πŸ‘‰ Create a GitHub Issue Notebooks file in the root of the repo. Give it a spin, make some changesπŸ‘ˆ
  • πŸ‘‰ add, commit and push it. to GitHub πŸ‘ˆ

Now that we've added a .github-issues file in our project. This is probably going to be included in our standard way of working. So let's add that particular extension as a recommendation to our teammates and repo co-users. Such recommendations are captured in a /.vscode/extensions.json file.

πŸ‹οΈβ€β™€οΈ Exercise

  • πŸ‘‰ Add the GitHub Issue Notebooks extension to the Workspace Recommendations. πŸ‘ˆ
  • πŸ‘‰ add, commit and push the /.vscode/extensions.json file . πŸ‘ˆ

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions