> For the complete documentation index, see [llms.txt](https://marcylabschool.gitbook.io/swe/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://marcylabschool.gitbook.io/swe/javascript/environment-setup/local-environment-setup-windows.md).

# Local Environment Setup - Windows

Today, we'll be setting up our local development environment for Windows 10. For the Mac instructions, see [here](/swe/javascript/environment-setup/local-environment-setup-mac.md).

## Table of Contents

* [Table of Contents](#table-of-contents)
* [WSL](#wsl)
  * [Enable WSL](#enable-wsl)
  * [Download WSL](#download-wsl)
    * [Upgrade from WSL 1 to WSL 2](#upgrade-from-wsl-1-to-wsl-2)
* [Visual Studio Code, Node, and Your Local development Environment](#visual-studio-code-node-and-your-local-development-environment)
  * [Download VSCode for Windows](#download-vscode-for-windows)
  * [Familiarize yourself with VS Code](#familiarize-yourself-with-vs-code)
  * [Configure VS Code](#configure-vs-code)
  * [Download Node and NPM](#download-node-and-npm)
  * [Set up local development directory](#set-up-local-development-directory)

## WSL

Windows Subsystem for Linux (WSL) is a Linux distribution that allows you to run Windows applications in a Linux environment, the environment used by most software developers.

### Enable WSL

Within a few easy steps, you can get this done. Press **Windows Key + S** open up the search bar, and type “Windows Features.”

![windows](https://2917380161-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6MVtB4m00n1SibG54HLC%2Fuploads%2Fgit-blob-dc74e5e6164708c6531f8bc382a719f290ba7252%2Fwindowfeature.webp?alt=media)

Click on the “Turn Windows features on or off”

![wsl](https://2917380161-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6MVtB4m00n1SibG54HLC%2Fuploads%2Fgit-blob-26e0b6682459d0fcc93a2ebd2c14cb7224db8abb%2Fwsl.webp?alt=media)

Select **Windows Subsystem for Linux** and click OK. (This will require a restart of Windows to get things installed).

### Download WSL

After your computer starts up again, open the Windows Search, find the **Windows PowerShell** application, and **Run as Administrator**.

Type the following commands in the **Windows PowerShell** application:

```powershell
wsl --update
wsl --install
```

This will update and install WSL on your computer!

When WSL finishes installing, run this command to check your version (take note of the value under `NAME` and `VERSION`):

```powershell
wsl -l -v
```

If it is version 2, you're good to go! You may close Powershell.

If it says version 1, follow these steps below.

#### Upgrade from WSL 1 to WSL 2

> Note: These instructions are based on Microsoft's documentation found [here](https://learn.microsoft.com/en-us/windows/wsl/install#upgrade-version-from-wsl-1-to-wsl-2)

If the version is 1, you can change it to version 2 with a command like `wsl --set-version [NAME] [VERSION]`.

* For example, to switch to `Ubuntu` version 2, you would use the command `wsl --set-version Ubuntu 2`

You should see "Conversion in progress, this may take a few minutes (it can take as long as 30 minutes or more)

* If you see a warning telling you to install/update the WSL 2 kernel, you may be asked to visit <https://aka.ms/wsl2kernel>. Do so and install the WSL Linux kernel update package for x64 machines.
* If you see "Please enable the Virtual Machine Platform Windows feature and ensure virtualization is enabled in the BIOS." do the following:
  * In the Windows search bar, look for "Turn Windows features on or off"
  * Scroll down and select "Virtual Machine Platform" and then click "Ok"
  * Reboot your computer.
  * Re-open Powershell, check the version with `wsl -l -v` and restart these instructions.

## Visual Studio Code, Node, and Your Local development Environment

Visual Studio Code is the standard IDE used by developers.

### Download VSCode for Windows

Visit [this web site](https://code.visualstudio.com/) and download VS Code.

* Download the latest build and install it in your PC.
* Now open VS Code and press **Ctrl + Shift + P** to open the **Command Palette** and search "WSL".
* Then, select **WSL: Connect to WSL in New Window**. This should open a new VS Code window running using WSL!

VS Code should automatically detect your WSL installation and suggest an extension.

![extension](https://2917380161-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6MVtB4m00n1SibG54HLC%2Fuploads%2Fgit-blob-f37da68e66b2dc546c401bfc673d7a716721bcc4%2Fextention.webp?alt=media)

If not, you can click on the “Extensions” tab in VS Code. Search for "Remote - WSL" and install (I will have a penguin icon).

![vscode](https://2917380161-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6MVtB4m00n1SibG54HLC%2Fuploads%2Fgit-blob-832dd6dc27473265c512c8c59325c87e1136332e%2Fvscode.webp?alt=media)

Visual Studio Code will open and will indicate its successfully connected to the server at WSL.

![](https://2917380161-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6MVtB4m00n1SibG54HLC%2Fuploads%2Fgit-blob-70053548e007726e07671c93aa0081125bc6c340%2Fwslubuntu.webp?alt=media)

When you open the terminal from VS Code you will see the bash terminal at WSL.

![](https://2917380161-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6MVtB4m00n1SibG54HLC%2Fuploads%2Fgit-blob-3ac45dbf7bb57b3a78265896fe27a775a5f08457%2Fterminalubuntu.webp?alt=media)

You should pin Ubuntu Terminal and VS Code to the taskbar since you'll be using them a lot.

![taskbar](https://2917380161-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6MVtB4m00n1SibG54HLC%2Fuploads%2Fgit-blob-4d0a575e7a4ee8c473c24c9666cd564fc3d82dd2%2Ftaskbar.png?alt=media)

### Familiarize yourself with VS Code

Now, let's get to know the VS Code layout!

* Your directories and files are in the left panel. You should see your `development` folder as the root with your sub-directories listed inside.
* VS Code has an integrated Terminal application that you can use by selecting **Terminal > New Terminal** from the top menu bar.
* The VS Code Terminal is *exactly* the same as your Mac "Terminal". Anything you do in Terminal you can do here as well.

![VS Code on MacOS](https://2917380161-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6MVtB4m00n1SibG54HLC%2Fuploads%2Fgit-blob-bf336bc10872b12183519e06b44830aa213a2cea%2Fvscode.png?alt=media)

### Configure VS Code

1. Go to your settings (click on the cog in the bottom-left corner) and search for "save".

   * Set **Files: Auto Save** to **onFocusChange**
   * CHECK the checkbox for **Editor: Format On Save**

   ![Turn on Auto Save and Format on Save.](https://2917380161-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6MVtB4m00n1SibG54HLC%2Fuploads%2Fgit-blob-3b53ab38e32eb0661a2dfdb69c7555d19dd2daff%2Fvs-code-save-settings.png?alt=media)
2. Stay in your settings and search for "compact folders":

   * UNCHECK the checkbox for **Explorer: Compact Folders**.

   ![Turn off Compact Folders](https://2917380161-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6MVtB4m00n1SibG54HLC%2Fuploads%2Fgit-blob-ad1b26188481aaf011c92300c9761db78cde70a2%2Fvs-code-compact-folders.png?alt=media)
3. Finally, in your settings search for "AI Features"

   * CHECK the checkbox for **Chat: Disable AI Features**.

   ![Disable AI Features](https://2917380161-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6MVtB4m00n1SibG54HLC%2Fuploads%2Fgit-blob-4f9bda55c6b28c2758451a7c7adae3a309fdf1b9%2Fvs-code-disable-ai-features.png?alt=media)

### Download Useful Extensions

VS Code includes a number of features out-of-the-box but it also allows you to customize your experience with **extensions**. VS Code extensions let you add languages, debuggers, and tools to your installation to support your development workflow.

You can browse and install extensions from within VS Code. Bring up the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of VS Code.

![VS Code Extensions Icon](https://code.visualstudio.com/assets/docs/configure/extensions/extension-marketplace/extensions-view-icon.png)

From the Extensions view you can search for and brose popular extensions.

![Browse the VS Code Extensions Marketplace](https://code.visualstudio.com/assets/docs/configure/extensions/extension-marketplace/extensions-popular.png)

Start by installing these extensions:

* **Code Spell Checker** — spelling checker for source code
* **Error Lens** — highlights errors directly in your code

### Download Node and NPM

> Note: These instructions are based on Microsoft's documentation found [here](https://learn.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-wsl#install-nvm-nodejs-and-npm).

1. Go back to the Ubuntu terminal. Inside the terminal, type the following command and press enter:

   ```bash
   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
   ```
2. Close the Ubuntu terminal and re-open it
3. Install the "Long Term Support" version of Node by entering the command `nvm install --lts`.
4. Confirm that you have Node installed by running the command `node --version` and you should see something like `v18.18.0` in response.
5. Confirm that you have `npm` installed by running the command `npm --version`, and you should see something like `9.8.1` in response.

You are now set up with Node and npm!

![.node](https://2917380161-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6MVtB4m00n1SibG54HLC%2Fuploads%2Fgit-blob-30e929c634941352e8cd27e28ce95c89014e671a%2Fnode.webp?alt=media)

### Set up local development directory

Every time you open your Terminal, you'll be in the home directory. Run `pwd` to see the current path. You'll see `home/your-user-name`.

![home](https://2917380161-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6MVtB4m00n1SibG54HLC%2Fuploads%2Fgit-blob-291927be5a5b96cae0a28605c9456ab23c30c580%2Fhome.png?alt=media)

Using your Terminal as a command line, create a folder structure where you can put all your Marcy Lab code. You can do using the following commands:

* `cd` to navigate to the home directory.
* `mkdir development` to create a folder for *all* your work.
* `cd development` where you will create more subdirectories.
* `mkdir mod-{0..7}` etc... to make multiple folders at once.
* `ls` to list the contents of `development/` and ensure the folders were created.

Next, type the command `code .` into your terminal and it will open VS Code at the current directory (your "development" folder). You'll use this command a lot so remember it!