Handling extensions

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.

Exercise

• 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

Answer

• 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