Remote step-by-step remote tutorials
This commit is contained in:
Greg Van Liew
Родитель
4c33875316
Коммит
4ccdad4db8
|
|
@ -116,7 +116,7 @@ If you're interested in testing new updates and experimental features as soon as
|
|||
|
||||
## We'd like your feedback
|
||||
|
||||
Thanks for trying out the Remote - SSH extension! If you run into any issues or would like to suggest new features or scenarios for us, please open an issue on our [GitHub repo](https://github.com/microsoft/vscode-remote-release/issues). If you want to see what features we're currently working on or are upcoming, take a look at our Remote Development [release notes](https://github.com/microsoft/vscode-docs/tree/master/remote-release-notes) and [iteration plans](https://github.com/microsoft/vscode-remote-release/issues?q=is%3Aopen+is%3Aissue+label%3Aiteration-plan). You can also try out these [Remote Development tutorials](https://code.visualstudio.com/docs/remote/remote-tutorials), which walk you through using the other remote extensions to work inside Docker containers and the [Window Subsystem for Linux](https://docs.microsoft.com/windows/wsl) (WSL).
|
||||
Thanks for trying out the Remote - SSH extension! If you run into any issues or would like to suggest new features or scenarios for us, please open an issue on our [GitHub repo](https://github.com/microsoft/vscode-remote-release/issues). If you want to see what features we're currently working on or are upcoming, take a look at our Remote Development [release notes](https://github.com/microsoft/vscode-docs/tree/master/remote-release-notes) and [iteration plans](https://github.com/microsoft/vscode-remote-release/issues?q=is%3Aopen+is%3Aissue+label%3Aiteration-plan). You can also try out the introductory [Remote development over SSH tutorial](https://code.visualstudio.com/docs/remote/ssh-tutorial), which walk you through using the other remote extensions to work inside Docker containers and the [Window Subsystem for Linux](https://docs.microsoft.com/windows/wsl) (WSL).
|
||||
|
||||
Happy Remote Coding,
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ DateApproved: 7/9/2020
|
|||
---
|
||||
# Remote Development FAQ
|
||||
|
||||
This article covers frequently asked questions for each of the **Visual Studio Code Remote Development** extensions. See the [SSH](/docs/remote/ssh.md), [Containers](/docs/remote/containers.md), and [WSL](/docs/remote/wsl.md) articles for more details on setting up and working with each of their respective capabilities. Or try the step by step [Tutorials](/docs/remote/remote-tutorials.md) to help get you running quickly in a remote environment.
|
||||
This article covers frequently asked questions for each of the **Visual Studio Code Remote Development** extensions. See the [SSH](/docs/remote/ssh.md), [Containers](/docs/remote/containers.md), and [WSL](/docs/remote/wsl.md) articles for more details on setting up and working with each of their respective capabilities. Or try the introductory [Tutorials](/docs/remote/ssh-tutorial.md) to help get you running quickly in a remote environment.
|
||||
|
||||
For frequently asked questions about [Visual Studio Codespaces](https://aka.ms/vso), see the [FAQ in the service's documentation](https://aka.ms/vso-docs/faq).
|
||||
|
||||
|
|
|
|||
|
|
@ -32,10 +32,20 @@ The [Remote Development extension pack](https://aka.ms/vscode-remote/download/ex
|
|||
- [Remote - SSH](/docs/remote/ssh.md) - Connect to any location by opening folders on a remote machine/VM using SSH.
|
||||
- [Remote - Containers](/docs/remote/containers.md) - Work with a sandboxed toolchain or container-based application inside (or mounted into) a container.
|
||||
- [Remote - WSL](/docs/remote/wsl.md) - Get a Linux-powered development experience in the Windows Subsystem for Linux.
|
||||
- [Tutorials](/docs/remote/remote-tutorials.md) - Step by step tutorials to help you get running quickly in a remote environment.
|
||||
|
||||
While most VS Code extensions should work unmodified in a remote environment, extension authors can learn more at [Supporting Remote Development](/api/advanced-topics/remote-extensions.md).
|
||||
|
||||
## Remote tutorials
|
||||
|
||||
The tutorials below will walk you through running Visual Studio Code with the Remote Development extensions.
|
||||
|
||||
Tutorial | Description
|
||||
--- | ---
|
||||
[Remote via SSH](/docs/remote/ssh-tutorial.md) | Connect to remote and virtual machines with Visual Studio Code via SSH.
|
||||
[Work in WSL](/docs/remote/wsl-tutorial.md) | Run Visual Studio Code in Windows Subsystem for Linux.
|
||||
[Develop in Containers](/docs/remote/containers-tutorial.md) | Run Visual Studio Code in a Docker Container.
|
||||
[Visual Studio Codespaces](https://docs.microsoft.com/visualstudio/online/how-to/vscode) | Connect to a codespace with Visual Studio Code.
|
||||
|
||||
## Visual Studio Codespaces
|
||||
|
||||
[Visual Studio Codespaces](/docs/remote/codespaces.md) provides remote development environments that are managed for you. You can configure and create a development environment hosted in the cloud, which is spun up and available when you need it.
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ DateApproved: 7/9/2020
|
|||
---
|
||||
# Remote Development Tips and Tricks
|
||||
|
||||
This article covers troubleshooting tips and tricks for each of the Visual Studio Code [Remote Development](https://aka.ms/vscode-remote/download/extension) extensions. See the [SSH](/docs/remote/ssh.md), [Containers](/docs/remote/containers.md), and [WSL](/docs/remote/wsl.md) articles for details on setting up and working with each specific extension. Or try the step by step [Tutorials](/docs/remote/remote-tutorials.md) to help get you running quickly in a remote environment.
|
||||
This article covers troubleshooting tips and tricks for each of the Visual Studio Code [Remote Development](https://aka.ms/vscode-remote/download/extension) extensions. See the [SSH](/docs/remote/ssh.md), [Containers](/docs/remote/containers.md), and [WSL](/docs/remote/wsl.md) articles for details on setting up and working with each specific extension. Or try the introductory [Tutorials](/docs/remote/ssh-tutorial.md) to help get you running quickly in a remote environment.
|
||||
|
||||
Troubleshooting tips for [Visual Studio Codespaces](https://aka.ms/vso) can be found in the [service's documentation](https://aka.ms/vso-docs/troubleshooting).
|
||||
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ gulp.task('build-dist', done => {
|
|||
|
||||
// Copy over MD/asset files
|
||||
$.mkdir('vscode-website/vscode-docs')
|
||||
$.cp('-R', ['../blogs', '../docs', '../images', '../release-notes', '../remote-release-notes', '../tutorials', '../build', '../api', '../remote-tutorials'], 'vscode-website/vscode-docs')
|
||||
$.cp('-R', ['../blogs', '../docs', '../images', '../release-notes', '../remote-release-notes', '../tutorials', '../build', '../api'], 'vscode-website/vscode-docs')
|
||||
|
||||
// Clone tas-client
|
||||
$.exec(`git clone ${TAS_URL} vscode-website/tas-client`)
|
||||
|
|
|
|||
|
|
@ -1,40 +0,0 @@
|
|||
---
|
||||
Order: 3
|
||||
Area: containers
|
||||
TOCTitle: Get the sample
|
||||
PageTitle: Clone the sample Node.js repository
|
||||
MetaDescription: Clone the sample Node.js GitHub repository
|
||||
DateApproved: 7/9/2020
|
||||
---
|
||||
# Get the sample
|
||||
|
||||
To create a Docker container, we are going to clone a GitHub repository with a Node.js project.
|
||||
|
||||
```bash
|
||||
git clone https://github.com/microsoft/vscode-remote-try-node
|
||||
```
|
||||
|
||||
**Note**: There are other remote container samples such as `vscode-remote-try-python` or `vscode-remote-try-java`, but this tutorial will use `vscode-remote-try-node`.
|
||||
|
||||
## Open the repo in Visual Studio Code
|
||||
|
||||
Upon opening one of the sample projects listed above, you should see the following notification prompting you to reopen the workspace inside a dev container. Select **Reopen in Container**.
|
||||
|
||||
|
||||
|
||||
## Wait for the container to build
|
||||
|
||||
If this is your first time connecting, a Docker image will be downloaded, built, and starts a container with a copy of VS Code Server running. This might take a few minutes the first time, but future connections will only take seconds.
|
||||
|
||||
|
||||
|
||||
## Check
|
||||
|
||||
Once the container is running and you're connected, you should see your remote context change in the bottom left of the Status bar:
|
||||
|
||||
|
||||
|
||||
----
|
||||
|
||||
<a class="tutorial-next-btn" href="/remote-tutorials/containers/run-in-container">I've created the container</a>
|
||||
<a class="tutorial-feedback-btn" onclick="reportIssue('remote-tutorials-containers', 'get-the-sample')" href="javascript:void(0)">I ran into an issue</a>
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
---
|
||||
Order: 1
|
||||
Area: containers
|
||||
TOCTitle: Getting started
|
||||
PageTitle: Getting started with Dev Containers
|
||||
MetaDescription: Getting started with Dev Containers
|
||||
DateApproved: 7/9/2020
|
||||
---
|
||||
# Remote development in Containers
|
||||
|
||||
This tutorial walks you through running Visual Studio Code in a [Docker](https://www.docker.com/) container using the [Remote - Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) extension. You need no prior knowledge of Docker to complete this tutorial.
|
||||
|
||||
Running VS Code **inside** a Docker container can be useful for many reasons, but in this walkthrough we'll focus on using a Docker container to set up a development environment that is isolated from your local environment.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
You need [Visual Studio Code](https://code.visualstudio.com/) installed.
|
||||
|
||||
## Install Docker
|
||||
|
||||
Docker is needed to create and manage your containers.
|
||||
|
||||
### Docker Desktop
|
||||
|
||||
Download and install [Docker Desktop](https://www.docker.com/products/docker-desktop).
|
||||
|
||||
> NOTE! - You'll have to signup for Docker Hub, verify your email address, and get a DockerID in order to get the installer.
|
||||
|
||||
### Start Docker
|
||||
|
||||
Run the Docker Desktop application to start Docker.
|
||||
You will know it's running if you look in the activity tray and see the Docker whale icon.
|
||||
|
||||
Docker might take a few minutes to start.
|
||||
If the whale icon is animated, it is probably still in the process of starting.
|
||||
You can click on the icon to see the status.
|
||||
|
||||
|
||||
|
||||
## Check
|
||||
|
||||
Once Docker is running, you can confirm that everything is working by opening a **new** terminal window and typing the comand:
|
||||
|
||||
```bash
|
||||
docker --version
|
||||
# Docker version 18.09.2, build 6247962
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
<a class="tutorial-next-btn" href="/remote-tutorials/containers/install-extension">Docker is running!</a>
|
||||
<a class="tutorial-feedback-btn" onclick="reportIssue('remote-tutorials-containers', 'getting-started')" href="javascript:void(0)">I ran into an issue</a>
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
---
|
||||
Order: 5
|
||||
Area: containers
|
||||
TOCTitle: How it works
|
||||
PageTitle: How remote dev containers work in Visual Studio Code
|
||||
MetaDescription: How remote dev containers work in Visual Studio Code
|
||||
DateApproved: 7/9/2020
|
||||
---
|
||||
# How it works
|
||||
|
||||
The remote container extension uses the files in the `.devcontainer` folder, namely `devcontainer.json` and an optional `Dockerfile` or `docker-compose.yml`, to create your dev containers.
|
||||
|
||||
First your image is built from the supplied Docker file or image name. Then a container is created and started using some of the settings in the `devcontainer.json`. Finally your Visual Studio Code environment is installed and configured again according to settings in the `devcontainer.json`.
|
||||
|
||||
Once all of this is done, your local copy of Visual Studio Code connects to the Visual Studio Code Server running inside of your new dev container.
|
||||
|
||||
## `devcontainer.json`
|
||||
|
||||
The `devcontainer.json` is basically a config file that determines how your dev container gets built and started.
|
||||
|
||||
```json
|
||||
//devcontainer.json
|
||||
{
|
||||
"name": "Node.js Sample",
|
||||
"dockerFile": "Dockerfile",
|
||||
"appPort": 3000,
|
||||
"extensions": [
|
||||
"dbaeumer.vscode-eslint"
|
||||
],
|
||||
"settings": {
|
||||
"terminal.integrated.shell.linux": "/bin/bash"
|
||||
},
|
||||
"postCreateCommand": "yarn install",
|
||||
// Comment out the next line to run as root instead. Linux users, update
|
||||
// Dockerfile with your user's UID/GID if not 1000.
|
||||
"runArgs": [ "-u", "node" ]
|
||||
}
|
||||
```
|
||||
|
||||
The above example is taken from the `vscode-remote-try-node` repo we used in the tutorial.
|
||||
|
||||
| Option | Description |
|
||||
|---|---|
|
||||
| `dockerfile` | Relative path to a `Dockerfile` that you wish to use as your image. |
|
||||
| `appPort` | A port or array of ports that should be made available locally when the container is running |
|
||||
| `extensions` | An array of extension IDs that specify the extensions that should be installed inside the container when it is created. |
|
||||
| `settings` | Adds default `settings.json` values into a container/machine specific settings file. |
|
||||
| `postCreateCommand` | A command string or list of command arguments to run after the container is created. |
|
||||
| `runArgs` | An array of [Docker CLI](https://docs.docker.com/engine/reference/commandline/run/) arguments that should be used when running the container. |
|
||||
|
||||
[Full list](https://code.visualstudio.com/docs/remote/containers#_devcontainerjson-reference) of `devcontainer.json` options.
|
||||
|
||||
## Next steps
|
||||
|
||||
This has been a brief overview of what is possible using dev containers. To learn about other scenarios or learn more about containerized development, checkout the [Developing inside Containers](/docs/remote/containers.md) documentation.
|
||||
|
||||
----
|
||||
|
||||
<a class="tutorial-next-btn" href="/docs/remote/remote-tutorials">I'm Done!</a>
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
---
|
||||
Order: 2
|
||||
Area: containers
|
||||
TOCTitle: Install the extension
|
||||
PageTitle: Install the Visual Studio Remote - Containers extension
|
||||
MetaDescription: Install the Visual Studio Remote - Containers extension
|
||||
DateApproved: 7/9/2020
|
||||
---
|
||||
# Install the extension
|
||||
|
||||
The Remote - Containers extension lets you run Visual Studio Code inside a Docker container.
|
||||
|
||||
> <a class="tutorial-install-extension-btn" href="vscode:extension/ms-vscode-remote.remote-containers">Install the Remote - Containers extension</a>
|
||||
|
||||
## Check
|
||||
|
||||
With the Remote - Containers extension installed, you will see a new Status bar item at the far left.
|
||||
|
||||
|
||||
|
||||
The Remote Status bar item can quickly show you in which context VS Code is running (local or remote) and clicking on the item will bring up the Remote - Containers commands.
|
||||
|
||||
|
||||
|
||||
----
|
||||
|
||||
<a class="tutorial-next-btn" href="/remote-tutorials/containers/get-the-sample">I've installed the extension</a>
|
||||
<a class="tutorial-feedback-btn" onclick="reportIssue('remote-tutorials-containers', 'install-extension')" href="javascript:void(0)">I ran into an issue</a>
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
---
|
||||
Order: 4
|
||||
Area: containers
|
||||
TOCTitle: Run in container
|
||||
PageTitle: Run an application in a container with Visual Studio Code
|
||||
MetaDescription: Run an application in a container with Visual Studio Code
|
||||
DateApproved: 7/9/2020
|
||||
---
|
||||
# Check your environment
|
||||
|
||||
One of the useful things about developing in a container is that you can use specific versions of dependencies that your application needs without impacting your local development environment.
|
||||
|
||||
The specific container for this tutorial has Node.js v10 installed, which you can check by opening a new terminal **Terminal** > **New Terminal** (`kb(workbench.action.terminal.new)`) and entering:
|
||||
|
||||
```bash
|
||||
node --version; npm --version
|
||||
```
|
||||
|
||||
This should show the following versions:
|
||||
|
||||
|
||||
|
||||
## Run the application
|
||||
|
||||
We can now hit `kb(workbench.action.debug.start)` which will run the application inside the container. Once the process starts, navigate to http://localhost:3000 and you should see the simple Node.js server running!
|
||||
|
||||
|
||||
|
||||
## Let us know how it went
|
||||
|
||||
At this point, you're running and developing fully in a containerized environment!
|
||||
|
||||
We'd love to hear your feedback by answering a short survey.
|
||||
|
||||
> <a class="tutorial-install-extension-btn" href="https://www.research.net/r/remoteContainer">Take the Remote Containers survey</a>
|
||||
|
||||
## Ending your container connection
|
||||
|
||||
You can end your session in the container and go back to running VS Code locally with **File** > **Close Remote Connection**.
|
||||
|
||||
## Next steps
|
||||
|
||||
If you would like to learn how the Remote - Containers extension sets up and configures your containers, read the next [How it works](/remote-tutorials/containers/how-it-works) section.
|
||||
|
||||
----
|
||||
|
||||
<a class="tutorial-next-btn" href="/remote-tutorials/containers/how-it-works">Show me how it works</a>
|
||||
<a class="tutorial-feedback-btn" onclick="reportIssue('remote-tutorials-containers', 'run-in-container')" href="javascript:void(0)">I ran into an issue</a>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:667f298d76adde9348afcf3f6ad435a3726231d20bd7bfdc4ea47567e0c24980
|
||||
size 19832
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:91155ad7f7f903e902b369a079f09072d712c7c43b0d4b10313b72a12b2d9264
|
||||
size 9503
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:11c9c4961ecf79f0d4be831294b1ae4c97f65a8db467890018ed2b19d5fefdae
|
||||
size 41377
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:c4bb8bcaff5203c0e631981cdebb5487e4ba8746c8a7090fc69b788ee4c73833
|
||||
size 227641
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:85fe210c7fdf708d4cb46eeb8666e2c727e5ca5abd5c902b3cceb35baa9d64ba
|
||||
size 24831
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:82ade9f26b9a0f701a04ebf2c3ab98932a9811e9aae20a40a31b44a27f342763
|
||||
size 22460
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:8711c5d41a92b4f781f11713c45b2a25bf4867fad9f257995204f97679ede273
|
||||
size 55421
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:1f6ce26596152bf578bbb360140f78a315edeba1ebb310f60c6dd6eec848a655
|
||||
size 4198
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:486d69d427d7b63e313cf260fa68e1554c09f65519eae11301cc90e4e12f7055
|
||||
size 21540
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:cb45a9a495193e5dfb223f4fd9c4d7ea070eab4ba1217cfd6f76c8c39e0451be
|
||||
size 80279
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:2e02a0ca1077d62c35d89ab1d32ac14e3b5cc2c43d96b5a197643c71ffa9381d
|
||||
size 33496
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:c446cafb90c673573420f056907d63c29f83e644577d9a9b06dfc70b7cb06fdf
|
||||
size 39369
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:6a39da4de3751f9ad240b51c8e5fdf80077b158528e8b3eb538a21fe6e09518b
|
||||
size 282826
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:e0cd447c82b4cfd05ddf3dde4b963c21307c0fdfec8e9754637c407355d0285a
|
||||
size 15903
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:fd794363dd18f5f7aca8abb2f1b056f6b77fe34f6994062c86c942c0ced034f8
|
||||
size 78888
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:95af41ef83ac7e8e372f9955541355222d168ec437677baade681dd157e65ce8
|
||||
size 83804
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:22dc587235762c89ea06b6b5287ea05e7fb9b4bd5c00ba641e1d78fbe411c992
|
||||
size 22503
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:77a54599d6c9e11f9e96b8280346533f311706e769843881f4bde0f56056f369
|
||||
size 56588
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:a8608b208a4de8cd9fa01036f929b4d7b45b85f29c0472127143435dba137813
|
||||
size 18143
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:009b1dd6d681733cec0d1d020f61d5b31cbb56a59ad02f0d70d80085c6027b24
|
||||
size 16204
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:2c3407c9dcd820b9ba20d945a11b003a4bb511ee4f25fad9b18c517cd24f2046
|
||||
size 262214
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:637eb4ec1be8492329f9f3cdeb59e93fcee330d4a497688c2f078f7a1e30aa75
|
||||
size 38064
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:7b27f07221ddd227938ecd9901b320bdbb716c6959c8ec481a179ebed24dc16a
|
||||
size 23862
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:5076e0eeb277275a78b6dc7d143786eaaf5d520d9dcde6bbf27e4f47fc4a5ff5
|
||||
size 14421
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:a617967bb51d85f2538047dea4a987e3e381f07818cff9d09e21bf0841764250
|
||||
size 51250
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:1f6ce26596152bf578bbb360140f78a315edeba1ebb310f60c6dd6eec848a655
|
||||
size 4198
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:252f3208bdc7674f3def4a8feb145a69413ad1c9bd147bb5bfed942e2688be40
|
||||
size 70306
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:521c646ac316f5ab4521315166a41b51e5720cad77b8a5f1b560dadcf5c8884a
|
||||
size 19846
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:2e9cdfc85a516d8a367b9cf1812e3ab344e6f8d319bc49e960d6d072fa4bdcd9
|
||||
size 13349
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:844417f7434c425b35a287ca46bec4bc954795dbb6bf0d77f895003cc66ea049
|
||||
size 13197
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:27b5d3abae29c325cb9c7ab54623135c66586258c0c9d8e9a6c1566e30693bce
|
||||
size 13450
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:3f642e27272a26c7208cbcab6283909fb764494cfed7ec0fe7f8b5820b6b9b9f
|
||||
size 19359
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:019f7609fc3ffa7e5fc02ccfb7c98392755a2f48d0e5af00ff5c18da5a5184e9
|
||||
size 97594
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:c9e22d8d9153e03ade653323685c74dc8eae0e02fe4c7ce16fbe70179df0a91b
|
||||
size 510812
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:b4bd1335d65146332a6f6d4ee33e1ad474a2ef07af4f220080120bd3c7a6ffb7
|
||||
size 176159
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:f52779d41873ab1fc1990969eee9189ed21081e479cc610916c08f1cd13498f1
|
||||
size 2984
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:2425640a1b1dd97a39147a1d18de174f59f90991ca1518b0d3bbc9791e9ae53b
|
||||
size 113428
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:718f708002af71349b2699d59b95ed781d142e531baeb3350f77ac2c313d348b
|
||||
size 176846
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:7a118e7e1e1bedd8a59be62858b8c44254c8783ec42d099ab41e936d9c1576d7
|
||||
size 11223
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:36332ac0da58f3e60d45cb022a9b433f4714928eb2536b8c852a9e8b74a7dc2d
|
||||
size 88055
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:57d810055d49995047e42ab49a17a8d2b5e0017d8b7b35e083403bade95f94a7
|
||||
size 37403
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:fb13e134805a1157664a8e26beda2dc9e077d2ffa17ba11caff05446a9b460e5
|
||||
size 28718
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:0d404ffe6c030dc316f88cd2dd371268a2f87cff622e179aa1bf56c1a6190bea
|
||||
size 8737
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:3d6169e2d7275bcd42e3434fec977e778b91247bb91bd8722b7153a01584cb8f
|
||||
size 14741
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:d7f448f6d02b01e4e907ab2e10c70135c15d296e191ff534ff88a1662616cb7a
|
||||
size 13720
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:771fc414dc8d183dbf6c9f69d2df656714a4dae6ee5eb5a7d92381ec22fcc848
|
||||
size 179100
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:1f6ce26596152bf578bbb360140f78a315edeba1ebb310f60c6dd6eec848a655
|
||||
size 4198
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:d6c095ea6c1740930988172b0375f9c523b027eb3c16b42a94d91028df0731a2
|
||||
size 19878
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:59381c5fe3ad23ac55329ee2e6184e16f5ce4b92df8559c82a1f333b33c9c5e2
|
||||
size 71269
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:4b20acb13ae9b91c9f4c66e27384d861c76bb0bba097b77d4f8cd7319aec5f25
|
||||
size 106590
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:f7cbd113262985d31362bfdcae2369aec16b440fc2034d845bfb94f145426f83
|
||||
size 259486
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:79867beada16ecd9b6f5d5098c1e0fc7232dc774b03e493a4b14cbac924ab495
|
||||
size 12926
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:903a60d35369ddaa16342ac5fce665ac9035afedbd1800c91ad2b2a0c4b000ad
|
||||
size 23792
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:b9570eed7513344df67a18ff8093c9d04172ec48f6d612b234890c48142de92a
|
||||
size 66701
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:545397279a26ef6f4e52a8f0bcdd43c740e624962fac96909976250410544289
|
||||
size 159756
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:7e0ef22983a17be16630dc363897f536e5cd104a347f8758420803a842691f20
|
||||
size 14842
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:14fe69390583f4ed92a7bb764bda4dc8b83b4604eba8b34b5cfe4924f056ad37
|
||||
size 85183
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:d44eeadaba605c0410a22c6f4056b87dfc5a5edc908e5e2dc0155f2f103dd462
|
||||
size 6703
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
---
|
||||
Order: 4
|
||||
Area: ssh
|
||||
TOCTitle: Add SSH key
|
||||
PageTitle: Add SSH key to your virtual machine
|
||||
MetaDescription: Add SSH key to your virtual machine
|
||||
DateApproved: 7/9/2020
|
||||
---
|
||||
# Add SSH key to your VM
|
||||
|
||||
In the previous step, you generated an SSH key pair. Take the public key and paste it into your VM setup, by copying the entire contents of the `id_rsa.pub`. You also want to allow your VM to accept inbound SSH traffic by selecting **Allow selected ports** and choosing **SSH** from the **Select inbound ports** dropdown list.
|
||||
|
||||
|
||||
|
||||
## Auto-shutdown
|
||||
|
||||
A cool feature of using Azure VMs is the ability to enable auto-shutdown (because let's face it, we all forget to turn off our VMs…). If you go to the **Management** tab, you can set the time you want to shut down the VM daily.
|
||||
|
||||
|
||||
|
||||
Select **Review and Create**, then **Create**, and Azure will deploy your VM for you!
|
||||
|
||||
Once the deployment is finished (it may take several minutes), go to the new resource view for your virtual machine.
|
||||
|
||||
Next, you'll connect to your virtual machine through SSH with Visual Studio Code.
|
||||
|
||||
----
|
||||
|
||||
<a class="tutorial-next-btn" href="/remote-tutorials/ssh/connect-to-vm">I've added my SSH key and created the VM</a> <a class="tutorial-feedback-btn" onclick="reportIssue('remote-tutorials-ssh', 'add-ssh-key')" href="javascript:void(0)">I ran into an issue</a>
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
---
|
||||
Order: 5
|
||||
Area: ssh
|
||||
TOCTitle: Connect using SSH
|
||||
PageTitle: Connect to your virtual machine using SSH
|
||||
MetaDescription: Connect to your virtual machine using SSH
|
||||
DateApproved: 7/9/2020
|
||||
---
|
||||
# Connect using SSH
|
||||
|
||||
Now that you've created an SSH host, let's connect to it!
|
||||
|
||||
You'll have noticed an indicator on the bottom-left corner of the Status bar. This indicator tells you in which context VS Code is running (local or remote). Click on the indicator to bring up a list of Remote extension commands.
|
||||
|
||||
|
||||
|
||||
Choose the **Remote-SSH: Connect to Host** command and connect to the host by entering connection information for your VM in the following format: `user@hostname`.
|
||||
|
||||
The `user` is the username you set when adding the SSH public key to your VM. For the `hostname`, go back to the [Azure portal](https://portal.azure.com) and in the **Overview** pane of the VM you created, copy the **Public IP address**.
|
||||
|
||||
|
||||
|
||||
Set the user and hostname in the connection information text box.
|
||||
|
||||
|
||||
|
||||
VS Code will now open a new window (instance). You'll then see a notification that the "VS Code Server" is initializing on the SSH Host. Once the VS Code Server is installed on the remote host, it can run extensions and talk to your local instance of VS Code.
|
||||
|
||||
|
||||
|
||||
You'll know you're connected to your VM by looking at the indicator in the Status bar. It shows the hostname of your VM.
|
||||
|
||||
|
||||
|
||||
The Remote - SSH extension also contributes a new icon on your Activity bar, and clicking on it will open the SSH explorer. Here you can configure your SSH connections. For instance, you can save the hosts you connect to the most and access them from here instead of entering the user and hostname.
|
||||
|
||||
|
||||
|
||||
Once you're connected to your SSH host, you can interact with files and open folders on the remote machine. If you open the integrated terminal (`kb(workbench.action.terminal.toggleTerminal)`), you'll see you're working inside a bash shell **while you're on Windows**.
|
||||
|
||||
|
||||
|
||||
You can use the bash shell to browse the file system on the VM. You can also browse and open folders on the remote home directory with **File** > **Open Folder**.
|
||||
|
||||
|
||||
|
||||
----
|
||||
|
||||
<a class="tutorial-next-btn" href="/remote-tutorials/ssh/create-website">I've connected to my VM</a> <a class="tutorial-feedback-btn" onclick="reportIssue('remote-tutorials-ssh', 'connect-to-vm')" href="javascript:void(0)">I ran into an issue</a>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
---
|
||||
Order: 3
|
||||
Area: ssh
|
||||
TOCTitle: Set up SSH
|
||||
PageTitle: Set up SSH
|
||||
MetaDescription: Set up an SSH key to use with Visual Studio Code
|
||||
DateApproved: 7/9/2020
|
||||
---
|
||||
# Set up SSH
|
||||
|
||||
There are several authentication methods into a VM, including an SSH public/private key pair or a username and password. We strongly recommend using key-based authentication (if you use a username/password, you'll be prompted to enter your credentials more than once by the extension). If you're on Windows and have already created keys using PuttyGen, you can [reuse them](/docs/remote/troubleshooting.md#reusing-a-key-generated-in-puttygen).
|
||||
|
||||
## Create an SSH key
|
||||
|
||||
If you don't have an SSH key pair, open a bash shell or the command line and type in:
|
||||
|
||||
```bash
|
||||
ssh-keygen -t rsa -b 2048
|
||||
```
|
||||
|
||||
This will generate the SSH key. Press `kbstyle(Enter)` at the following prompt to save the key in the default location (under your user directory as a folder named `.ssh`).
|
||||
|
||||
|
||||
|
||||
You will then be prompted to enter a secure passphrase but you can leave that blank. You should now have a `id_rsa.pub` file which containers your new public SSH key.
|
||||
|
||||
Next, you'll add the SSH key to your virtual machine SSH host.
|
||||
|
||||
---
|
||||
|
||||
<a class="tutorial-next-btn" href="/remote-tutorials/ssh/add-ssh-key">I have an SSH key</a> <a class="tutorial-feedback-btn" onclick="reportIssue('remote-tutorials-ssh', 'create-ssh-key')" href="javascript:void(0)">I ran into an issue</a>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
---
|
||||
Order: 2
|
||||
Area: ssh
|
||||
TOCTitle: Create a VM
|
||||
PageTitle: Create a virtual machine on Azure
|
||||
MetaDescription: Create a virtual machine on Azure
|
||||
DateApproved: 7/9/2020
|
||||
---
|
||||
# Create a virtual machine
|
||||
|
||||
If you don't have an existing Linux virtual machine, you can create a new VM through the [Azure portal](https://portal.azure.com). In the Azure portal, search for "Virtual Machines", and choose **Add**. From there, you can select your Azure subscription and create a new resource group, if you don't already have one.
|
||||
|
||||
|
||||
|
||||
Now you can specify details of your VM, such as the name, the size of, and the base image. Choose Ubuntu Server 18.04 LTS for this example, but you can choose recent versions of other Linux distros and look at VS Code's [supported SSH servers](/docs/remote/troubleshooting.md#installing-a-supported-ssh-server).
|
||||
|
||||
|
||||
|
||||
Next, you'll set up an SSH host by creating and adding an SSH public key.
|
||||
|
||||
----
|
||||
|
||||
<a class="tutorial-next-btn" href="/remote-tutorials/ssh/create-ssh-key">I've configured a virtual machine</a> <a class="tutorial-feedback-btn" onclick="reportIssue('remote-tutorials-ssh', 'create-vm')" href="javascript:void(0)">I ran into an issue</a>
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
---
|
||||
Order: 5
|
||||
Area: ssh
|
||||
TOCTitle: Create a website
|
||||
PageTitle: Create a Node.js Express web app on your virtual machine
|
||||
MetaDescription: Create a Node.js Express web app on your virtual machine
|
||||
DateApproved: 7/9/2020
|
||||
---
|
||||
# Create your Node.js Application
|
||||
|
||||
In this step, you will create a simple Node.js application. You will use an application generator to quickly scaffold out the application from a terminal.
|
||||
|
||||
## Install Node.js and npm
|
||||
|
||||
From the integrated terminal (`kb(workbench.action.terminal.toggleTerminal)`), install Node.js and npm, the Node.js package manager.
|
||||
|
||||
```bash
|
||||
sudo apt-get install nodejs npm
|
||||
```
|
||||
|
||||
You can verify the installations by running:
|
||||
|
||||
```bash
|
||||
node --version
|
||||
npm --version
|
||||
```
|
||||
|
||||
## Install the Express Generator
|
||||
|
||||
[Express](https://www.expressjs.com) is a popular framework for building and running Node.js applications. You can scaffold (create) a new Express application using the [Express Generator](https://expressjs.com/en/starter/generator.html) tool. The Express Generator is shipped as an npm module and installed by using the npm command-line tool `npm`.
|
||||
|
||||
```bash
|
||||
sudo npm install -g express-generator
|
||||
```
|
||||
|
||||
The `-g` switch installs the Express Generator globally on your machine so you can run it from anywhere.
|
||||
|
||||
## Scaffold a New Application
|
||||
|
||||
You can now scaffold a new Express application called `myExpressApp` by running:
|
||||
|
||||
```bash
|
||||
express myExpressApp --view pug
|
||||
```
|
||||
|
||||
The `--view pug` parameters tell the generator to use the [pug](https://pugjs.org/api/getting-started.html) template engine.
|
||||
|
||||
To install all of the application's dependencies, go to the new folder and run `npm install`.
|
||||
|
||||
```bash
|
||||
cd myExpressApp
|
||||
npm install
|
||||
```
|
||||
|
||||
## Run the Application
|
||||
|
||||
Last, let's ensure that the application runs. From the terminal, start the application using the `npm start` command to start the server.
|
||||
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
The Express app by default runs on [http://localhost:3000](http://localhost:3000). You won't see anything in your local browser on localhost:3000 because the web app is running on your virtual machine.
|
||||
|
||||
## Port forwarding
|
||||
|
||||
To be able to browse to the web app on your local machine, you can leverage another feature called [Port forwarding](/docs/remote/ssh.md#forwarding-a-port-creating-ssh-tunnel).
|
||||
|
||||
To be able to access a port on the remote machine that may not be publicly exposed, you need to establish a connection or a tunnel between a port on your local machine and the server. With the app still running, open the SSH Explorer and find the **Forwarded Ports** view. Click on the **Forward a port** link and indicate that you want to forward port 3000:
|
||||
|
||||
|
||||
|
||||
Name the connection "browser":
|
||||
|
||||
|
||||
|
||||
The server will now forward traffic on port 3000 to your local machine. When you browse to http://localhost:3000, you see the running web app.
|
||||
|
||||
|
||||
|
||||
----
|
||||
|
||||
<a class="tutorial-next-btn" href="/remote-tutorials/ssh/edit-and-debug">I've created a web app</a> <a class="tutorial-feedback-btn" onclick="reportIssue('remote-tutorials-ssh', 'create-website')" href="javascript:void(0)">I ran into an issue</a>
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
---
|
||||
Order: 6
|
||||
Area: ssh
|
||||
TOCTitle: Edit and debug
|
||||
PageTitle: Edit and debug the web app on your virtual machine
|
||||
MetaDescription: Edit and debug the web app on your virtual machine
|
||||
DateApproved: 7/9/2020
|
||||
---
|
||||
# Edit and debug with VS Code
|
||||
|
||||
From the Visual Studio Code File Explorer (`kb(workbench.view.explorer)`), navigate to your new `myExpressApp` folder and double-click the `app.js` file to open it in the editor.
|
||||
|
||||
## IntelliSense
|
||||
|
||||
You have syntax highlighting for the JavaScript file as well as IntelliSense with hovers, just like you would see if the source code was on your local machine.
|
||||
|
||||
|
||||
|
||||
When you start typing, you'll get smart completions for the object methods and properties.
|
||||
|
||||
|
||||
|
||||
## Debugging
|
||||
|
||||
Set a breakpoint on line 10 of `app.js` by clicking in the gutter to the left of the line number or by putting the cursor on the line and pressing `kb(editor.debug.action.toggleBreakpoint)`. The breakpoint will be displayed as a red circle.
|
||||
|
||||
|
||||
|
||||
Now, press `kb(workbench.action.debug.start)` to run your application. If you are asked how to run the application, choose **Node.js**.
|
||||
|
||||
The app will start, and you'll hit the breakpoint. You can inspect variables, create watches, and navigate the call stack.
|
||||
|
||||
Press `kb(workbench.action.debug.stepOver)` to step or `kb(workbench.action.debug.start)` again to finish your debugging session.
|
||||
|
||||
|
||||
|
||||
You get the full development experience of Visual Studio Code connected over SSH.
|
||||
|
||||
## Ending your SSH connection
|
||||
|
||||
You can end your session over SSH and go back to running VS Code locally with **File** > **Close Remote Connection**.
|
||||
|
||||
## Congratulations!
|
||||
|
||||
Congratulations, you've successfully completed this walkthrough!
|
||||
|
||||
Next, check out the other Remote Development extensions.
|
||||
|
||||
* [Remote - WSL](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl)
|
||||
* [Remote - Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
|
||||
|
||||
Or get them all by installing the
|
||||
[Remote Development extension pack](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack) extension pack.
|
||||
|
||||
----
|
||||
|
||||
<a class="tutorial-next-btn" href="/docs/remote/remote-tutorials">I'm Done!</a> <a class="tutorial-feedback-btn" onclick="reportIssue('remote-tutorials-ssh', 'edit-and-debug')" href="javascript:void(0)">I ran into an issue</a>
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
---
|
||||
Order: 1
|
||||
Area: ssh
|
||||
TOCTitle: Getting started
|
||||
PageTitle: Connect over SSH with Visual Studio Code
|
||||
MetaDescription: Connect over SSH with Visual Studio Code
|
||||
DateApproved: 7/9/2020
|
||||
---
|
||||
# Remote development over SSH
|
||||
|
||||
This tutorial walks you through creating and connecting to a virtual machine (VM) on Azure using the Visual Studio Code [Remote - SSH](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh) extension. You'll create a Node.js Express web app to show how you can edit and debug on a remote machine with VS Code just like you could if the source code was local.
|
||||
|
||||
**Note**: Your Linux VM can be hosted anywhere - on your local host, on premise, in Azure, or in any other cloud, as long as the chosen Linux distribution meets these [prerequisites](/docs/remote/linux.md#local-linux-prerequisites).
|
||||
|
||||
## Prerequisites
|
||||
|
||||
To get started, you need to have done the following:
|
||||
|
||||
1. Install an [OpenSSH compatible SSH client](/docs/remote/troubleshooting.md#installing-a-supported-ssh-client) (PuTTY is not supported).
|
||||
2. Install [Visual Studio Code](https://code.visualstudio.com).
|
||||
3. Have an Azure subscription (If you don't have an Azure subscription, create a [free account](https://azure.microsoft.com/free/?WT.mc_id=A261C142F) before you begin).
|
||||
|
||||
## Install the extension
|
||||
|
||||
The Remote - SSH extension is used to connect to SSH hosts.
|
||||
|
||||
> <a class="tutorial-install-extension-btn" href="vscode:extension/ms-vscode-remote.remote-ssh">Install the Remote - SSH extension</a>
|
||||
|
||||
|
||||
|
||||
## Remote - SSH
|
||||
|
||||
With the Remote - SSH extension installed, you will see a new Status bar item at the far left.
|
||||
|
||||
|
||||
|
||||
The Remote Status bar item can quickly show you in which context VS Code is running (local or remote) and clicking on the item will bring up the Remote - SSH commands.
|
||||
|
||||
|
||||
|
||||
----
|
||||
|
||||
<a class="tutorial-next-btn" href="/remote-tutorials/ssh/create-vm">I've installed the Remote - SSH extension</a>
|
||||
<a class="tutorial-feedback-btn" onclick="reportIssue('remote-tutorials-ssh', 'getting-started')" href="javascript:void(0)">I ran into an issue</a>
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
---
|
||||
Order: 6
|
||||
Area: wsl
|
||||
TOCTitle: Edit and debug
|
||||
PageTitle: Edit and debug Python in WSL with Visual Studio Code
|
||||
MetaDescription: Edit and debug Python in WSL with Visual Studio Code
|
||||
DateApproved: 7/9/2020
|
||||
---
|
||||
# Edit and debug with VS Code
|
||||
|
||||
## Installing the Python extension (and additional tools)
|
||||
|
||||
Click on `hello.py` to open it for editing. You will be prompted with an extension recommendation, in this case to install the [Microsoft Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python) extension, which will give you rich editing and debugging experiences. Go ahead and select **Install** and reload if prompted.
|
||||
|
||||
|
||||
|
||||
To prove that the extension is installed in WSL, open the Extensions view again (`kb(workbench.view.extensions)`). You will see a section titled **WSL – Installed** and you can see any extensions that are installed on the WSL side.
|
||||
|
||||
|
||||
|
||||
Upon reload, you'll also get prompted telling you that the pylint linter is not installed. Linters are used to show errors and warnings in source code. Go ahead and select **Install**.
|
||||
|
||||
|
||||
|
||||
Now, when you edit your code, you get rich colorization and completions.
|
||||
|
||||
|
||||
|
||||
And when you save your file (`kb(workbench.action.files.save)`), you'll get linting errors and warnings on the file.
|
||||
|
||||
|
||||
|
||||
## Debugging
|
||||
|
||||
With your tools set up, let's take this one step further. Set a breakpoint on line 1 of hello.py by clicking in the gutter to the left of the line number or by putting the cursor on the line and pressing `kb(editor.debug.action.toggleBreakpoint)`.
|
||||
|
||||
|
||||
|
||||
Now, press `kb(workbench.action.debug.start)` to run your application. You will be asked how to run the application, and since this is a simple file, just choose **Python File**.
|
||||
|
||||
|
||||
|
||||
The app will start, and you'll hit the breakpoint. You can inspect variables, create watches, and navigate the call stack.
|
||||
|
||||
Press `kb(workbench.action.debug.stepOver)` to step and you'll see the output of the print statement in the debug console.
|
||||
|
||||
|
||||
|
||||
You get the full development experience of Visual Studio Code, using the Linux instance installed in WSL.
|
||||
|
||||
If you want to open another folder in WSL, open the **File** menu and choose **Open Folder**. You'll get a minimal file and folder navigator for the Linux file system, not the Windows file system.
|
||||
|
||||
|
||||
|
||||
If you want to switch back to the Windows, select the **Show Local** option and you'll get the standard Windows File Open dialog.
|
||||
|
||||
## Ending your WSL connection
|
||||
|
||||
You can end your session in WSL and go back to running VS Code locally with **File** > **Close Remote Connection**.
|
||||
|
||||
## Congratulations!
|
||||
|
||||
Congratulations, you've successfully completed this walkthrough!
|
||||
|
||||
Next, check out the other Remote Development extensions.
|
||||
|
||||
* [Remote - SSH](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh)
|
||||
* [Remote - Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
|
||||
|
||||
Or get them all by installing the
|
||||
[Remote Development extension pack](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack) extension pack.
|
||||
|
||||
----
|
||||
|
||||
<a class="tutorial-next-btn" href="/docs/remote/remote-tutorials">I'm Done!</a> <a class="tutorial-feedback-btn" onclick="reportIssue('remote-tutorials-wsl', 'edit-and-debug')" href="javascript:void(0)">I ran into an issue</a>
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
---
|
||||
Order: 2
|
||||
Area: wsl
|
||||
TOCTitle: Enable WSL
|
||||
PageTitle: Enable Windows Subsystem for Linux
|
||||
MetaDescription: Enable Windows Subsystem for Linux
|
||||
DateApproved: 7/9/2020
|
||||
---
|
||||
# Enable WSL
|
||||
|
||||
Windows Subsystem for Linux (WSL) is an optional feature on Windows 10. You can enable it through the Windows Features dialog or PowerShell.
|
||||
|
||||
## Windows Features dialog
|
||||
|
||||
In the Windows search bar, type 'features' to bring up the **Turn Windows Features on and off** dialog. Scroll down and check **Windows Subsystem for Linux**.
|
||||
|
||||
|
||||
|
||||
Select **OK** and you will be prompted to restart Windows.
|
||||
|
||||
## PowerShell
|
||||
|
||||
If you prefer, you can open PowerShell as an Administrator and type:
|
||||
|
||||
```powershell
|
||||
Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
|
||||
```
|
||||
|
||||
After the command runs, you will be prompted to restart Windows.
|
||||
|
||||
|
||||
|
||||
## Check
|
||||
|
||||
After restarting Windows, you can check that you have WSL enabled by opening a Command Prompt and typing 'wsl'.
|
||||
|
||||
|
||||
|
||||
WSL is enabled but you haven't installed a Linux distribution yet.
|
||||
|
||||
Next, you will install Linux from the Microsoft Store.
|
||||
|
||||
----
|
||||
|
||||
<a class="tutorial-next-btn" href="/remote-tutorials/wsl/install-linux">I've enabled Windows Subsystem for Linux</a> <a class="tutorial-feedback-btn" onclick="reportIssue('remote-tutorials-wsl', 'enable-wsl')" href="javascript:void(0)">I ran into an issue</a>
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
---
|
||||
Order: 1
|
||||
Area: wsl
|
||||
TOCTitle: Getting started
|
||||
PageTitle: Work in Windows Subsystem for Linux with Visual Studio Code
|
||||
MetaDescription: Work in Windows Subsystem for Linux with Visual Studio Code
|
||||
DateApproved: 7/9/2020
|
||||
---
|
||||
# Remote development in WSL
|
||||
|
||||
This tutorial walks you through enabling [Windows Subsystem for Linux](https://docs.microsoft.com/windows/wsl/install-win10) (WSL) and running Visual Studio Code in WSL using the [Remote - WSL](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl) extension.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
You need [Visual Studio Code](https://code.visualstudio.com/) installed.
|
||||
|
||||
## Install the extension
|
||||
|
||||
The Remote - WSL extension enables you to run Visual Studio Code within the Windows Subsystem for Linux (WSL).
|
||||
|
||||
> <a class="tutorial-install-extension-btn" href="vscode:extension/ms-vscode-remote.remote-wsl">Install the Remote - WSL extension</a>
|
||||
|
||||
|
||||
|
||||
## Prerequisite check
|
||||
|
||||
With the Remote - WSL extension installed, you will see a new Status bar item at the far left.
|
||||
|
||||
|
||||
|
||||
The Remote Status bar item can quickly show you in which context VS Code is running (local or remote) and clicking on the item will bring up the Remote - WSL commands.
|
||||
|
||||
|
||||
|
||||
----
|
||||
|
||||
<a class="tutorial-next-btn" href="/remote-tutorials/wsl/enable-wsl">I've installed the Remote - WSL extension</a>
|
||||
<a class="tutorial-feedback-btn" onclick="reportIssue('remote-tutorials-wsl', 'getting-started')" href="javascript:void(0)">I ran into an issue</a>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
---
|
||||
Order: 3
|
||||
Area: wsl
|
||||
TOCTitle: Install Linux
|
||||
PageTitle: Install a Linux distribution
|
||||
MetaDescription: Install a Linux distribution
|
||||
DateApproved: 7/9/2020
|
||||
---
|
||||
# Install a Linux distro
|
||||
|
||||
You install Linux distributions for WSL from the Microsoft Store. You can use the store app, or search for a Linux distro in the Windows search bar. Choose the Linux distribution you want to install (for example Ubuntu) and follow the prompts.
|
||||
|
||||
|
||||
|
||||
Select **Install**.
|
||||
|
||||
|
||||
|
||||
And when done, select **Launch** to get started. This will open a Linux terminal and complete the installation. You'll need to create a user ID and password since you are setting up a full Linux instance. You are now running Linux on Windows.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
<a class="tutorial-next-btn" href="/remote-tutorials/wsl/install-python">I've installed a Linux distro</a> <a class="tutorial-feedback-btn" onclick="reportIssue('remote-tutorials-wsl', 'install-linux')" href="javascript:void(0)">I ran into an issue</a>
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
---
|
||||
Order: 4
|
||||
Area: wsl
|
||||
TOCTitle: Install Python
|
||||
PageTitle: Install Python tools
|
||||
MetaDescription: Install Python tools into Windows Subsystem for Linux
|
||||
DateApproved: 7/9/2020
|
||||
---
|
||||
# Python development
|
||||
|
||||
If you don't have Python already installed, run the following commands to install Python3 and pip, the package manager for Python, into your Linux installation.
|
||||
|
||||
```bash
|
||||
sudo apt update
|
||||
sudo apt install python3 python3-pip
|
||||
```
|
||||
|
||||
And to verify, run:
|
||||
|
||||
```bash
|
||||
python3 --version
|
||||
```
|
||||
|
||||
Start with the canonical "Hello World" app. Create a new folder called "helloWorld" and then add a Python file that will print a message when run:
|
||||
|
||||
```bash
|
||||
mkdir helloWorld && cd helloWorld
|
||||
echo 'print("hello from python on ubuntu on windows!")' >> hello.py
|
||||
python3 hello.py
|
||||
```
|
||||
|
||||
In a remote Linux environment (this WSL distro is technically another machine without UI, that just happens to be running locally on your computer), your development tools and experiences are pretty limited. You can run [Vim](https://stackoverflow.blog/2017/05/23/stack-overflow-helping-one-million-developers-exit-vim/) in the terminal to edit your file or you can edit the sources on the Windows side through the `\\wsl$` mount:
|
||||
|
||||
|
||||
|
||||
The problem with this model is that the Python runtime, pip, or any conda packages for that matter, are not installed on Windows.
|
||||
|
||||
|
||||
|
||||
Remember, Python is installed in the Linux distro, which means if you're editing Python files on the Windows side, you can't run or debug them unless you install the same Python development stack on Windows. And that defeats the purpose of having an isolated Linux instance set up with all your Python tools and runtimes!
|
||||
|
||||
----
|
||||
|
||||
<a class="tutorial-next-btn" href="/remote-tutorials/wsl/run-in-wsl">I've installed Python</a> <a class="tutorial-feedback-btn" onclick="reportIssue('remote-tutorials-wsl', 'install-python')" href="javascript:void(0)">I ran into an issue</a>
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
---
|
||||
Order: 5
|
||||
Area: wsl
|
||||
TOCTitle: Run in WSL
|
||||
PageTitle: Run Visual Studio Code in Windows Subsystem for Linux
|
||||
MetaDescription: Run Visual Studio Code in Windows Subsystem for Linux
|
||||
DateApproved: 7/9/2020
|
||||
---
|
||||
# Run in Windows Subsystem for Linux
|
||||
|
||||
In the WSL terminal, make sure you are in the helloWorld folder, and type in `'code .'` to launch Visual Studio Code. The `'.'` argument tells VS Code to open the current folder.
|
||||
|
||||
> **Note:** If this command does not work, you may need to restart your terminal or you may not have added VS Code to your path when it was installed.
|
||||
|
||||
|
||||
|
||||
The first thing you'll see is a message about "Installing VS Code Server" (the c7d83e57… number is the version of the VS Code Server that matches the client-side tools you just installed). VS Code is installing a small server on the Linux side that the desktop VS Code will then talk to. That server will then install and host extensions in WSL, so that they run in the context of the tools and frameworks installed in WSL. In other words, your language extensions will run against the tools and frameworks installed in WSL, not against what is installed on the Windows side, as it should for the proper development experience.
|
||||
|
||||
The next thing that happens is VS Code will start and open the `helloWorld` folder. You may see a quick notification telling you that VS Code is connecting to WSL, and you may be prompted to allow access to the Node.js-based server.
|
||||
|
||||
|
||||
|
||||
Now, when you hover over `hello.py`, you get the proper Linux path.
|
||||
|
||||
|
||||
|
||||
## Integrated Terminal
|
||||
|
||||
Run **Terminal** > **New Terminal** (`kb(workbench.action.terminal.toggleTerminal)`) to open a new terminal instance.
|
||||
|
||||
|
||||
|
||||
You'll start a new instance of the bash shell in WSL, again from VS Code running on Windows.
|
||||
|
||||
**Tip**: In the lower left corner of the Status Bar, you can see that you're connected to your **WSL: Ubuntu** instance.
|
||||
|
||||
|
||||
|
||||
### Known issue: Missing Activity bar icons
|
||||
|
||||
When VS Code restarted connected to WSL, some icons provided by extensions may be missing. This is a [known issue](https://github.com/microsoft/vscode-remote-release/issues/687) and the workaround is to close and reopen the connection.
|
||||
|
||||
* Close the connection with **File** > **Close Remote Connection**.
|
||||
* Open the **File** > **Open Recent** list.
|
||||
* Choose the folder with the **[WSL: Ubuntu]** suffix.
|
||||
|
||||
----
|
||||
|
||||
<a class="tutorial-next-btn" href="/remote-tutorials/wsl/edit-and-debug">I'm running VS Code in WSL</a> <a class="tutorial-feedback-btn" onclick="reportIssue('remote-tutorials-wsl', 'run-in-wsl')" href="javascript:void(0)">I ran into an issue</a>
|
||||
Загрузка…
Ссылка в новой задаче