Top 5 VS Code extensions
Tags: vscode, opensource, programming, beginners
Published: 2023-05-04 18:58:33

As a co-builder of AppMap — a runtime code analysis platform for developers to better visualize, interact with, and understand their code — I spend a lot of time helping people in their code editor. 

When our users are [working in VS Code](https://appmap.io/download), they like to use a few key extensions to make life easier and more fun. We’re all about developer happiness around here, so I thought I’d share the top 5 VS Code extensions that the AppMap team loves. 

[Out now! [Early access to AppMap for GitHub Actions](https://info.appmap.io/early-access-to-appmap-for-ci)]

What are yours?

1. [Vim](https://marketplace.visualstudio.com/items?itemName=vscodevim.vim)
    
    Our team likes to use the vim keybindings so they don’t have to take their fingers off the keyboard.
    
2. [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
    
    This one is very popular, so it won’t come as a surprise to anyone that it’s on the list. Our dev team appreciates not having to worry about formatting their code, and with Prettier, their code stays linted and formatted. They say it works best with JS and JSON.
    
3. [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
    
    This new extension really is as great as the hype. It drastically reduces the need for the team to look up language and API docs. Plus, we’re kind of into planes over here, so we love the name. 
![Planes!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3zava1yi5600bzd6op2.jpg)
_That's [Kevin](https://dev.to/kgilpin), AppMap CTO 🛫_
     
4. [Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server)
    
    This VS Code extension serves a workspace as HTTP, which is useful when the team wants to use, preview, test, or debug an HTML page (including JS code such as Vue) that’s part of the project.
    
5. [GitHub Markdown Preview](https://marketplace.visualstudio.com/items?itemName=bierner.github-markdown-preview)
    
    It’s really helpful to have a preview of how the GitHub markdown features will display before the team commits a change, so this extension is one they use often.
    

### BONUS: [AppMap](https://marketplace.visualstudio.com/items?itemName=appland.appmap)

Of course! 

We just updated our [marketplace page](https://marketplace.visualstudio.com/items?itemName=appland.appmap) today as we’ve been building and improving AppMap for a few years now.

We built AppMap to [run in the VS Code editor](https://marketplace.visualstudio.com/items?itemName=appland.appmap) so it can analyze runtime code behavior before you commit changes and go to production. It works by recording detailed traces of how your application runs and analyzing it based on frameworks and techniques. Interactive, visual sequence diagrams and views present your bugs, loops, calls, dependencies, security issues, and other things that might keep your code from being ready to ship. 

AppMap can also be used to help you understand a legacy codebase, which someone in our community recently likened to trying to understand “a crime scene.” It can also instantly generate OpenAPI documentation based on the API calls it observes at runtime.

AppMap supports the following programming languages: Java, Python, Ruby, Typescript, and JavaScript. And, these web applications and API frameworks: Ruby on Rails, Django, Flask, Express, and Spring.

In terms of data usage, AppMap runtime recordings and diagrams are created and stored locally on your machine. AppMap does not require any permissions to your web-hosted code repo in order to run.

### How to get started with AppMap

Install from the [VS Code marketplace](https://marketplace.visualstudio.com/items?itemName=appland.appmap).

[Visit the documentation](https://appmap.io/docs/appmap-overview) for guides and videos.

Use AppMap to [generate sequence diagrams of your code.](https://appmap.io/docs/diagrams/sequence-diagrams.html)

Check us out and leave a ⭐ [in GitHub](https://github.com/getappmap).

[Read the blog](https://appmap.io/blog/) for user stories and product announcements.

Join us [in Slack](https://appmap.io/slack) or email us for support: [support@appmap.io](mailto:support@appmap.io)