This is a sample project that lets you try out the VS Code Remote - Containers extension in a few easy steps.
Note: If you're following the quick start, you can jump to the Things to try section.
Follow these steps to open this sample in a container:
-
If this is your first time using a development container, please follow the getting started steps.
-
If you're not yet in a development container:
- Clone this repository.
- Press F1 and select the Remote-Containers: Open Folder in Container... command.
- Select the cloned copy of this folder, wait for the container to start, and try things out!
One you have this sample opened in a container, you'll be able to work with it like you would locally.
Some things to try:
- Terminal: Press Ctrl+Shift+^ and type
yarn create nuxt-app .
and answering questions from the terminal window. - Edit:
- Open
pages/index.vue
- Try adding some code and check out the language features. To format code press Ctrl+Shift+I . It is also possible to go to definition of a custom element by clicking one. Notice that
vscode-eslint
,vue-peek
and thevetur
extension are already installed in the container.
- Open
- Run:
- Type
yarn run dev
from the terminal window. - Then open a local browser and go to
http://localhost:3000
and note you can connect to the Nuxt App in the container.
- Type
- Debug with Breakpoints:
- Open
Chrome DevTools
Sources tab with Ctrl+Shift+I in Chrome. - Add a breakpoint in
webpack:///pages/index.vue
(e.g. on line 29). - Press F5 to reload the page.
- Once the breakpoint is hit, try hovering over variables, examining locals, and more.
- Notice: Debug on VSCode is a bug.
- Open
microsoft/vscode-chrome-debug#832
This project welcomes contributions and suggestions.
This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.
Licensed under the MIT License. See LICENSE in the project root for license information.