Super Useful C++ Online Compiler (VSCode Edition)

Compiler Explorer is a highly popular online C++ compiler that can be used to test different compilation and execution environments or to share code. As a C++ enthusiast, I interact with it almost daily, far more frequently than I initially imagined. Additionally, I am a heavy VSCode user, handling almost all tasks within VSCode. Considering the frequent need to write code locally and then copy it to Compiler Explorer, it often feels cumbersome. Sometimes, I directly modify the code in its web editor, but without code completion, it’s equally uncomfortable. Therefore, in collaboration with @iiirhe, we developed this plugin Compiler Explorer for VSCode, which integrates Compiler Explorer into VSCode using the API provided by Compiler Explorer, allowing users to directly utilize Compiler Explorer’s functionalities within VSCode.

Now you can search for this plugin in the VSCode marketplace.

Demonstration

#

Single File Support

#

Let’s introduce from top to bottom.

The functions of these three buttons are as follows:

• Compile All: Compile all compiler instances.
• Add New: Add a new compiler instance.
• Share Link: Generate a link based on the current compiler instance and copy it to the clipboard.

The functions of these four buttons are as follows:

• Add CMake: Add a CMake compiler instance (details will be discussed later).
• Clear All: Close all displayed webview panels.
• Load Link: Load compiler instance information based on the input link.
• Remove All: Delete all compiler instances.

The functions of these three buttons are as follows:

• Run: Compile this compiler instance.
• Clone: Clone this compiler instance.
• Remove: Delete this compiler instance.

Below are the parameters for setting up the compiler instance:

• Compiler: Click the button on the right to select the compiler version.
• Input: Select the source code file, default is active, i.e., the currently active editor.
• Output: The file to output the compilation results, default uses webview.
• Options: Compilation options, click the button on the right to open the input box.
• Execute Arguments: Arguments passed to the executable.
• Stdin: Buffer for standard input.
• Filters: Some options.

Multi-File Support

#

Using the Add CMake button, you can add a CMake compiler instance, which can be used to compile multiple files.

Most options are the same as the single-file compiler instance, with two additional ones:

• CMake Arguments: Arguments passed to CMake.
• Source: The path to the folder containing CMakelists.txt.

Note, since multi-file compilation requires uploading all used files to the server, we default to reading all files in the specified directory (regardless of the file extension), so please do not specify folders with too many files at this time. We may add options to allow users to filter out some files in the future, but not currently.

Some User Settings

#

compiler-explorer.default.options: Default parameters when creating a compiler with the + sign.

"compiler-explorer.default.options": {
  "type": "object",
  "description": "The default compiler configuration",
  "default": {
    "compiler": "x86-64 gcc 13.2",
    "language": "c++",
    "options": "-std=c++17",
    "exec": "",
    "stdin": "",
    "cmakeArgs": "",
    "src": "workspace",
    "filters": {
      "binaryObject": false,
      "binary": false,
      "execute": false,
      "intel": true,
      "demangle": true,
      "labels": true,
      "libraryCode": true,
      "directives": true,
      "commentOnly": true,
      "trim": false,
      "debugCalls": false
    }
  }
}

compiler-explorer.default.color: Used to specify the color for highlighting assembly code.

"compiler-explorer.default.color":{
    "symbol": "#61AFEF",
    "string": "#98C379",
    "number": "#D19A66",
    "register": "#E5C07B",
    "instruction": "#C678DD",
    "comment": "#7F848E",
    "operator": "#ABB2BF"
}

compiler-explorer.default.url: The default link loaded when opening the plugin, default is empty.

"compiler-explorer.default.url": {
  "default": ""
}

Feedback

#

This plugin is still in its early stages. If you encounter any issues during use or have any suggestions, please feel free to leave a message on GitHub for discussion. Or join the QQ group: 662499937.

https://qm.qq.com/q/DiO6rvnbHi (QR code automatically recognized)

Additionally, the Output window may provide some useful information, so please pay attention to it.