VS Code Can Do That - Workshop
Main
Main
  • VS Code Can Do That Workshop
  • Essential Keyboard Shortcuts
  • Exercise 1 - Customizing The Editor
    • Customizing The Editor
    • Switch themes
    • Install a new icon theme
    • Switch fonts
    • Editor tweaks
    • Change default Settings view
    • Easily identify editor instances
  • Exercise 2 - Productivity Tricks
    • Productivity Tricks
    • Essential navigation shortcuts
    • Creating HTML with Emmet
    • Styling with Emmet
    • Update image sizes
  • Exercise 3 - Navigation And Refactoring
    • Navigation And Refactoring
    • Moving, Duplicating and Deleting
    • Folding sections
    • Multiple cursors
    • Rename refactor
    • Finding things
    • Extract refactor
  • Exercise 4 - Debugging
    • Debugging
    • Simple debugging
    • Simple launch config
    • Auto attach
    • Debugging browser apps
    • Compound debug configurations
  • Exercise 5 - Docker
    • Docker
    • Dockerizing an application
    • Running and inspecting images
    • Docker compose
    • Debugging Docker containers
  • Exercise 6 - Remote Development
    • Remote Development
    • Create a remote container
    • Create a new function in the container
    • Handling extensions
  • Exercise 7 - Working With Data
    • Working with data
    • Working with MongoDB
    • Working with SQLite
    • Working with MySQL
  • Exercise 8 - Git and Source Control
    • Git and source control
    • Cloning repos with VS Code
    • Common Git workflows
    • Branching and merge conflicts
Powered by GitBook
On this page

Was this helpful?

  1. Exercise 6 - Remote Development

Handling extensions

PreviousCreate a new function in the containerNextWorking with data

Last updated 5 years ago

Was this helpful?

Extensions in your local VS Code are not installed by default in remote containers. You can install them from the extension explorer, or you can include them in the "devcontainer.json" file.

  • Install the "Prettier" extension from the Extensions Explorer view

  • Remove the extension

  • Add it via the "devcontainer.json" file

  • Rebuild the container

  • Verify that the Prettier extension is present

  • Open the Extensions Explorer view (Cmd/Ctrl + Shift + X)

  • Find "Prettier" in the "Local - Installed" extensions section. Notice that is greyed out.

  • Click on the "Install on Dev Container" button in the Prettier extension to install it into the Dev Container.

  • When the extension is finished installing, you will see a "Reload Required" on the Prettier extension page. Click it.

  • VS code will reload

  • Open the Extensions explorer view (Cmd/Ctrl + Shift + P)

  • Notice that the Prettier extension is now installed

  • Uninstall it by clicking on the "Uninstall" button on the Prettier extension page

  • Click on the button that says "Reload Required"

  • The editor is reloaded, and the Prettier extension is no longer installed

  • Open the "devcontainer.json" file

  • In the section called "extensions", add in the ID of the Prettier extension

    • To find this, go to the Extensions Explorer (Cmd/Ctrl + Shift + X)

    • Find Prettier in the "Local - Installed" section

    • Click on it to open the Prettier extension page

  • Locate the ID next to the name

  • Copy that value and paste it into the "devcontainer.json" file in the "extensions" section

"extensions": [
    "ms-azuretools.vscode-azurefunctions",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
]

  • Open the Command Palette (Cmd/Ctrl + Shift + P)

  • Select "Remote-Containers: Rebuild Container"

  • VS Code will reload and rebuild the container

  • Open the Extension Explorer view (Cmd/Ctrl + Shift + X)

  • Notice that the Prettier extension was installed automatically by VS Code