How to setup devcontainer in vscode for dashboard

setup-devcontainer-in-vscode.md

Benefits

• Run eslint in the docker container
• Run jest in the docker container (and get updates when snapshots change)
• Much more, share your tips!

Instructions adapted from here

1. Install Remote development extension pack
2. In VSCode, control+shift+p, Remote-Containers: Add Development Container Configuration Files. Choose From 'docker-compose.yml'. This should create a folder .devcontainer which is .gitignored.
3. Edit the .devcontainer/devcontainer.json file. Ensuring a few different settings:

"dockerComposeFile": [
	"../docker-compose.yml",
	"docker-compose.yml"
],
  
"service": "dashboard",

"workspaceFolder": "/usr/src/app",
// Set *default* container specific settings.json values on container create.
"settings": {
	"eslint.debug": true,
	"eslint.alwaysShowStatus": true,
	"eslint.lintTask.enable": true,
	"eslint.format.enable": true,
	"eslint.validate": [
		"javascript",
		"javascriptreact"
	],
	"eslint.codeAction.showDocumentation": {
		"enable": true
	}
},

// Add the IDs of extensions you want installed when the container is created.
"extensions": [
	"dbaeumer.vscode-eslint",
	"orta.vscode-jest"
],
  
  "forwardPorts": [5000]

4. Then, in the .devcontainer/docker-compose.yml file, the main thing is you'll want to ensure is:

services:
  # Update this to the name of the service you want to work with in your docker-compose.yml file
  dashboard:

5. control+shift+p, Remote-Containers: Rebuild and Reopen in Container. 🎉 Now you can run eslint fix commands using control+shift+p.