Why do we have two configurations to setup the build environment in Visual Studio Code? What is the difference between them?
They are not both used to setup the build configuration.
launch.json is used for to launch an app for debugging. It has settings geared for things like mapping to your workspace source code or defining the Chrome port to use.
To use a configuration from launch.json, you select it on the Debug panel and click the run button.
tasks.json is used to execute anything else you may want, be that source code formatters, bundlers or a SASS compiler.
To use a configuration from tasks.json, you select Run Task from the command list.
Here's an example of how they differ in purpose:
I have an Angular 5 application that connects to a .NET web service.
I have one task configured to run the web service, using a command that fires up IISExpress. I have another task configured to run the Angular app using ng serve, which recompiles the app when files change. I execute these two tasks whenever I reopen VS Code, or when the web service changes.
I have two launch configurations as well: One to launch Chrome and start the debugger, and another to debug a page already loaded in Chrome. These I execute whenever I start a debug session.