DEV Community

Cover image for Top 5 VS Code extensions
Pete Cheslock for AppMap

Posted on • Updated on

Top 5 VS Code extensions

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, 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]

What are yours?

  1. Vim

    Our team likes to use the vim keybindings so they don’t have to take their fingers off the keyboard.

  2. Prettier

    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

    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!
    That's Kevin, AppMap CTO 🛫

  4. Live Preview

    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

    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

Of course!

We just updated our marketplace page today as we’ve been building and improving AppMap for a few years now.

We built AppMap to run in the VS Code editor 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.

Visit the documentation for guides and videos.

Use AppMap to generate sequence diagrams of your code.

Check us out and leave a ⭐ in GitHub.

Read the blog for user stories and product announcements.

Join us in Slack or email us for support: support@appmap.io

Top comments (5)

Collapse
 
sentientmachin3 profile image
Davide Bianchi

I prefer this one instead of vim: marketplace.visualstudio.com/items...
uses the installed neovim as a backend so you don't have to mess around with the vscode config

Collapse
 
abhixsh profile image
Abishek Haththakage

Really valuable article.

Collapse
 
petecheslock profile image
Pete Cheslock

Thanks!

Collapse
 
felixhaeberle profile image
Felix Häberle

i18n folks: The Inlang VS Code extension we are building has been a lifesaver for me in handling i18n complexities. It's effortless to translate, detect missing translations, and update content seamlessly within my VS Code. There is also a typesafe JS library and a CLI for machine translations.

Collapse
 
tracker1 profile image
Michael J. Ryan

Switched to Rome for linting she formating a few months ago and really happy with it. Have it setup to check as a pre commit hook. With the extension and format in save it doesn't generally fail on commit. Have an action to do the formating to. Really quick too, eslint was taking 5 seconds in a very large app and Rome was half a second for linting and formating. Can't say enough good about it.

Disabling a couple of the options was a bit of a pain to figure out though. The extension more helps with the config file.

Second on copilot, it's really great to say the least. Saves a lot of time when writing boilerplate code.