IDE

As a computer engineer, a significant portion of my time is spent programming. After using a variety of IDEs I settled on Vim and VS Code, extensively configuring them to maximize my productivity.

Showcase

This is what my VS Code configuration looked like when I was still using the setup repository. Currently my configuration looks mostly the same, but uses the Vim extension instead of the Neovim extension.

Vim Keybindings

My IDEs of choice support Vim keybindings, which significantly reduces my mouse usage while programming. After overcoming the steep learning curve, I was able to write code much faster.

Here are some Vim learning resources that I recommend:

• Vim Tutorial
• Vim As Your Editor
• Mastering the Vim Language
• How to Do 90% of What Plugins Do (With Just Vim)

I have extensively customized my Vim configuration based on the following configurations:

• amix/vimrc
• tylerlum/vim_configuration

Vim

I use Vim to quickly modify a file from the terminal. I do not use any plugins, opting to use Neovim or VS Code when working on projects. Vim is noticeably faster than Neovim with plugins or VS Code for large files.

Configuration file: .vimrc

Neovim

Neovim is a fork of Vim which has powerful plugins that adds IDE features. I use it to edit projects in the CLI. Since configuring these plugins is complicated and breaks all the time (because Neovim is still in rapid development), I use the LazyVim distribution to manage all of this for me. And for anything else that I want, LazyVim makes it easy to add my own configuration and plugins.

Configuration files: .config/nvim

VS Code

VS Code has great support for debugging, remote development, Git, most programming languages, and much more through extensions. It is also extremely configurable, with its settings and keyboard shortcuts being able to be modified through a UI or JSON file.

To get Vim keybindings in VS Code I use the Vim extension. You can enable various features in its settings, which include some Vim extensions and using a .vimrc.

I use VS Code's built-in Settings Sync to sync my configuration, but have copied some of my configuration files to my dotfiles repository for your reference:

• reference_dotfiles/vscode/keybindings.json
• reference_dotfiles/vscode/settings.json

Resources:

• VS Code user interface

Extensions

In addition to the Vim extension and language and framework extension packs, I found the following extensions to be useful:

Extension Name	Description
Edit csv	View and edit csv files with a table UI
Git History	View git log, file history, compare branches or commits
GitLens	See who committed each line of code and when they did it
Live Share Extension Pack	Real-time collaborative development
Path Intellisense	Autocomplete filenames
Peacock	Change workspace border color to be able to quickly identify workspaces
Remote Development	Support for development using WSL, SSH, and Docker
toggle semicolon	Ctrl+; to add or remove the semicolon at the end of a line
vscode-icons	Clean file icons for the file explorer
vscode-pdf	Display pdf file in VS Code

Quirks

Several quirks that I have noticed with my VS Code configuration:

• Undo and redo behavior is different in Vim and VS Code. Thus saving a file, making a change, then using U to undo will not bring the file back to its saved state
  • Workarounds: enable auto-saving or map U and Ctrl+R to the VS Code implementation of undo and redo
• "Quick Fix" on Windows and Linux (Ctrl+,) is overridden by my toggle semicolon extension

Software Infrastructure

VS Code has some amazing features that can be used to customize and automate your development environment for a project and share it with the project's developers.

Workspace Settings

Workspace settings customize the VS Code configurations of everyone who opens the workspace in VS Code. Besides the settings.json file, you can add launch configurations, recommended extensions, tasks, and much more. These files are stored in the .vscode/ directory. Workspace settings override user settings.

Example workspace settings: UBCSailbot/docs/.vscode, UBCSailbot/sailbot_workspace/sailbot.code-workspace.

Dev Container

Dev container wrap up your VS Code configuration with your dependencies in a Docker container. These files are stored in the .devcontainer/ directory.

Example dev container: UBCSailbot/sailbot_workspace/.devcontainer.