How to change font size and theme on VS code

 

ctrl+shift+P

.vscode/settings.json

{
    "editor.fontSize": 24,
    "window.zoomLevel": 1,
    "terminal.integrated.fontSize": 18,
    "workbench.colorTheme": "Noctis Minimus",
}

react not hot reloading, and where to keep WSL files for fast performance

In this case it was due to the slowness caused by using the wrong folder for WSL.

fastest place to keep files:

//wsl$/Ubuntu/mnt/d

or

\\wsl$\Ubuntu\home\<username>, this is usually the "cd ~" folder of VSCode, so this is probably the best folder to use.

Clone github repos, etc to this folder, and open them in VSCode. 

//wsl$/Ubuntu/mnt/wsl should not be used. It is just WSL's temp session folder.

Similar issue: 

https://github.com/facebook/create-react-app/issues/10253

Good evening everyone, Tonight I bring you an alternative to the madness.

If running Win10/Win11 and running Ubuntu WSL2, you will find that the Windows file system has a specific file directory that acts as this VM.

Open file explorer and you can navigate to this directory with \\wsl$ in the search.

You will notice this directory has a folder titled the Ubuntu you are running. Within this folder will be a /mnt directory. Inside, once more, is ./wsl.

This is the folder you should run your project from.

Copy the contents of your project here, open it with your IDE to verify you have permission to do so.

Once it's open, you will need to recursively update permissions on the folder to ensure you have privilege to run your react scripts start command using npm run start.

To do this: Open Powershell with elevated privilege on your local system. Run your Ubuntu exe. For me it was: image

Navigate to the wsl directory, example: image

Run this command to update rights, recursively on the directory: sudo chmod -R +x ./<YourProjectName> You'll be asked to authenticate, do as the computer asks 👌

Presto.

docker-compose up your project from VSCode or where ever you are deving. If your docker-compose.yml is configured with the correct chokidar_usepolling environment variable, you're good to go.

Hope this helps us Windows users.

This helped for me on Windows 11, Thank you so much! But i also needed to create project again to run server.

Moving everything to the /mnt/wsl folder did the trick. Man things started loading crazy fast when I moved them in there.

Thanks a lot!

A lot of the paths here didn't work for me. \\wsl$\Ubuntu\home\<user> worked for me where <user> is the name of your Linux user. 

npm start on custom port

In package.json (don't need to redo npm install) -  

  "scripts": {

    "start": "PORT=9999 react-scripts start", //add or replace with this line

   

    "build": "react-scripts build",

    "test": "react-scripts test",

    "eject": "react-scripts eject"

  },

npm start command => terminal is stuck on " > react-scripts start"

 It actually took up to 2 minutes to start, in WSL2, so just wait 

Convert existing unbuntu distro to WSL 2

 Windows PowerShell

Copyright (C) Microsoft Corporation. All rights reserved.

PS C:\Windows\system32> wsl -l -v

  NAME      STATE           VERSION

* Ubuntu    Stopped         1

PS C:\Windows\system32> wsl --set-version Ubuntu 2

Conversion in progress, this may take a few minutes...

For information on key differences with WSL 2 please visit https://aka.ms/wsl2

Conversion complete.

PS C:\Windows\system32> wsl -l -v

  NAME      STATE           VERSION

* Ubuntu    Stopped         2