DEV Community

Cover image for Set Up VS Code Extensions the Right Way — Express.js Series (Ep. 1 Highlights)
Bello Osagie
Bello Osagie

Posted on

Set Up VS Code Extensions the Right Way — Express.js Series (Ep. 1 Highlights)

#webdev #beginners #programming #vscode

In the first episode of our Express.js Series, we covered how to set up your macOS development environment using tools like Homebrew, VS Code, and Node.js via NVM. But we also dove deep into an often overlooked aspect of developer experience — properly configuring VS Code extensions and Amazon Q shell integration.

Even though you may have installed everything correctly, some tools don’t just work out of the box unless you configure or activate them. Let’s walk through what we learned in the video 👇

Installing Extensions in VS Code

VS Code makes it easy to install extensions — either:

  • Using the Extensions sidebar (click the Extensions icon on the left panel)
  • Or installing them via a Brewfile or Chocolatey if you're on Windows

But installation is just the first step. Some extensions need manual activation or configuration.

Amazon Q Extension in VS Code

Even if you installed Amazon Q (the AI-powered coding assistant) from the VS Code Marketplace or via a Brewfile, it won't work until you sign in:

After installing Amazon Q:

  • Click the Amazon Q icon in the VS Code sidebar
  • Click the "Sign In" button
  • Complete the sign-in process via your browser

Once signed in, it should begin offering code suggestions and inline assistance.

GitHub Theme Not Working?

If you installed the GitHub Theme but don’t see any visual changes, here’s what’s probably missing:

  1. After installation, VS Code does not automatically apply the new theme.
  2. You need to manually select it by:
  • Pressing Cmd + Shift + P (Mac) or Ctrl + Shift + P (Windows)
  • Typing Color Theme
  • Clicking "Set Color Theme"
  • Choosing the GitHub theme from the list

Now you’ll get that clean GitHub look.

Material Icon Theme Not Applied?

Same issue here. Installing the Material Icon Theme isn’t enough. To activate it:

  • Open the Command Palette (Cmd/Ctrl + Shift + P)
  • Search for "Set Icon Theme"
  • Choose Material Icon Theme

Once activated, you’ll notice your file icons change to the familiar Material Design styles.

Postman Web: Sign In to Use It

If you're using the Postman web app (instead of the desktop version):

  • You must sign in before making requests
  • Click the Sign In button (usually top-right)
  • Complete the authentication process
  • Once signed in, you can start making requests just like the desktop app

Extensions That Work Automatically (No Config Needed)

Some extensions work instantly without additional steps:

  • Markdown All in One
    → Just open a .md file like README.md
    → Use Cmd/Ctrl + Shift + P and select Markdown: Open Preview to see a live preview

  • Prettier and Biome
    → These can auto-format your files on save if VS Code is set to format on save
    → No additional config needed for basic usage

Global Tools: Amazon Q in Terminal (Shell Integration)

Besides the VS Code extension, Amazon Q also offers a global shell assistant that works in the terminal (both standalone and in VS Code).

But here's the key: it doesn’t work until you set it up correctly.

  1. Search for Amazon Q from your system search bar (Spotlight on macOS)
  2. Open the app and click:
  • "Get Started"
  • "Install Shell Integration"

  • "Sign In" (if not signed in)

    1. In the Amazon Q window, go to Help & Support

  • Make sure:

    • Shell Integration is Enabled
    • Accessibility is Enabled

Once set up:

  • Open a new terminal (outside VS Code) and try typing a command
  • You’ll get inline suggestions from Amazon Q
  • Press Ctrl + K to expand the full suggestion

Bonus Tip: It also works inside the VS Code integrated terminal, but only if:

  • VS Code is restarted after shell integration is enabled
  • Or run exec $SHELL in the integrated terminal to reload it

If Amazon Q Isn't Working in Terminal...

If you’re on macOS, check for the Amazon Q icon in the top menu bar.

  • If it's not working:

    • Click the icon
    • Check for any "Not Logged In" messages
    • Click "Login" or "Settings" and re-authenticate

Amazon Q shell support may be limited or unavailable on Windows at this time.

Final Thoughts

Setting up your environment goes beyond installing software — it’s about knowing what to configure and when.

If you want a smoother experience with your development tools:

  • Sign into cloud-based tools (Amazon Q, Postman)
  • Don’t forget to activate themes and icons after installing
  • Use the Command Palette (Cmd/Ctrl + Shift + P) for most setup tasks

Want to go deeper? Check out the full setup video on YouTube or read the full blog post:
👉 Set Up Node.js + VS Code the Right Way on macOS – Express Series Ep. 1

Top comments (0)