Skip to content

Visual Studio Code Setup

For quite some time now, I've been an avid VSCode user. This was one tool I kinda wished I had and/or knew about, and used. I am aware of some alternatives - Sublime Text was the one I used during undergrad, and Atom used to be a thing. Now in the advent of AI being immersed into everything from code editors to personal devices and operating systems to even refrigerators, there are even more options, and forks of VSCode like Cursor. I have not really been keeping up with that front, it's a little fatiguing trying to chase after the best each time. While I'm checking things out, here's a rundown on how I use my trusty code editor.

Installation

Go over to the official website here to download it. If you're on macOS, you may also download the cask using Homebrew.

brew install --cask visual-studio-code

Should you intend on working with the terminal a lot, I would recommend making sure VSCode is in your system's $PATH . You can do this from inside VSCode itself by going into the Command Palette, and select Shell Command: Install 'code' command in PATH.

With this, you may now use a Terminal command to open VSCode. Personally, I would often navigate into my project directory, and then type the following command:

code .

This will open up a new VSCode window with the project directory's contents available on the Explorer (left-hand side of the VSCode window).

Additional Setup

C/C++

This will take effect only within the scope of the project folder.

  1. In the Command Palette, select C/C++: Edit Configurations (UI).
  2. Under Compiler Path, select the location of the compiler. (Refer to what this outputs: echo "$(brew --prefix gcc@15)/bin/gcc-15" ; change gcc@15 and gcc-15 as appropriate to the current version number). Use g++ for C++, and gcc for C.

Extensions

VSCode has plenty of extensions which can either make your code editor appear more visually appealing, or help ease your workflow with some useful fixes. Here are some extensions I have:

Python

For IT5001 students at NUS

Officially, the module requires you to work predominantly on Python IDLE instead of any other code editor. This is sorta in line with the hardcore-ness this module is supposed to bring, in addition to preferring learners to go from the ground up with as fewer aids as possible. At the time of completing this guide, VSCode is permitted but not recommended (especially during practical exams). With Copilot being a thing now, I have a feeling that VSCode will no longer be permitted for use during practical exams.

If you would still like to continue with using VSCode while completing this module, go on right ahead wherever that you're permitted to do so. But I should caution you - it's always better to learn from the start without being handheld too much.. learning should not require this level of aid.

  • Python by Microsoft (ms-python.python) - The official Python extension by Microsoft. Download it if you want to work on anything Python in this code editor.
  • Python Debugger by Microsoft (ms-python.debugpy) - As it states, it allows for debugging Python code in VSCode.
  • Pylance by Microsoft (ms-python.vscode-pylance) - A Python type checker by Microsoft.
  • autopep8 by Microsoft (ms-python.autopep8) - Python code formatter based on the PEP8 standard.. yes, there's an official standard on how Python code should be presented.

Web Development

  • Highlight Matching Tag by vincaslt (vincaslt.highlight-matching-tag) - This is helpful especially for checking if HTML tag pairs are correctly placed or omitted by mistake.
  • Prettier - Code formatter by prettier (esbenp.prettier-vscode) - Code formatter to have HTML/JS files properly indented and formatted (hence the name).
  • IntelliJ IDEA Keybindings by Keisuke Kato (k--kato.intellij-idea-keybindings) - Rebinds shortcut keys to match what one may find with any of JetBrains' products, like their well-known IDE IntelliJ IDEA.
  • Tailwind CSS IntelliSense by Tailwind Labs (bradlc.vscode-tailwindcss) - Provides autocomplete, syntax highlighting, and linting features for TailwindCSS.

Here's what I used to have, but I no longer need anymore:

  • Live Server by Ritwick Dey (ritwickdey.liveserver) - Quickly starts up a live server to view front-end-only websites. It dynamically reflects any changes made to those pages on the fly, reducing the need to refresh the browser each time.

C/C++

  • C/C++ Extension Pack by Microsoft (ms-vscode.cpptools-extension-pack) - Supplies the following extensions:

    • C/C++ by Microsoft (ms-vscode.cpptools) - The official C/C++ extension by Microsoft. Download it if you want to work on anything C/C++ in this code editor.

    • C/C++ Themes by Microsoft (ms-vscode.cpptools-themes) - UI themes for C/C++ extension. Not sure what it means, but if I understood it right, it's sort of like a way to make the C/C++ code syntax more presentable.

    • CMake Tools by Microsoft (ms-vscode.cmake-tools) - Provides extended CMake (makefiles for C/C++) support.

Markdown

(screw Prettier for messing up nested unordered lists)

  • markdown-formatter by mervin (mervin.markdown-formatter)