Compiling with a Build Task in VS Code

The emcc command is a little verbose, and having to manually run this on the command line for different files can get cumbersome. To expedite the compilation process, we can use VS Code's Tasks feature to create a build task for the files we'll use. To create a build task, select Tasks | Configure Default Build Task…, select the Create tasks.json from template option, and select Others to generate a simple tasks.json file in the .vscode folder. Update the contents of the file to contain the following:

{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Build",
"type": "shell",
"command": "emcc",
"args": [
"${file}",
"-Os",
"-s", "WASM=1",
"-s", "SIDE_MODULE=1",
"-s", "BINARYEN_ASYNC_COMPILATION=0",
"-o", "${fileDirname}/${fileBasenameNoExtension}.wasm"
],
"group": {
"kind": "build",
"isDefault": true
},
"presentation": {
"panel": "new"
}
}
]
}

The label value is simply a name to refer to when running a task. The type and command values indicate that it should run the emcc command in a shell (terminal). The args value is an array of arguments to be passed to the emcc command (based on space separation). The "${file}" argument tells VS Code to compile the currently open file. The "${fileDirname}/${fileBasenameNoExtension}.wasm"  argument indicates that the .wasm output will have the same name as the currently open file (with a .wasm extension), and it should be placed in the active folder of the currently open file. If you don't specify ${fileDirname}, the output file will be placed in the root folder (rather than /chapter-05-create-load-module in this case).

The group object indicates that this task is the default build step, so if you use the keyboard shortcut Cmd/Ctrl + Shift + B, this is the task that will be run. The presentation.panel value of "new" tells VS Code to open up a new CLI instance when the build step runs. This is a personal preference and can be omitted.

You can save and close the tasks.json file once it's fully populated. To test it out, first delete the without-glue.wasm file that you generated with the emcc command in the previous section. Next, ensure you have without-glue.c open with the cursor in the file and run the build task by either selecting Tasks | Run Build Task… or using the keyboard shortcut Cmd/Ctrl + Shift + B. A new panel in the integrated terminal will perform the compilation and a without-glue.wasm file should appear after a second or two.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset