Five tips & tricks when using VS Code

VS Code is one of the most popular code editors out there, and my personal favourite (unless I was allowed to write everything in ZX Spectrum Basic).

So here are a few tips and tricks for when using VS Code.

1. Use shortcut keys to speed up your workflow. Some useful ones to try are:
   • Ctrl + Shift + P to open the command palette
   • Ctrl + P to quickly jump to files in your project
   • Ctrl + Shift + L to select all occurrences of a selected word
   • Ctrl + / to comment/uncomment lines of code
2. Customize your workspace by installing extensions to add extra functionality. Some popular ones include:
   • Prettier for automatic code formatting
   • ESLint for identifying and fixing coding issues
   • GitLens for enhanced Git integration
   • Live Server for a quick way to spin up a local development server
3. Use the built-in terminal to run commands and scripts directly within VS Code. You can open the terminal by clicking on the Terminal tab at the bottom of the window or by using the shortcut key Ctrl + .
4. Take advantage of the debugging features to find and fix errors in your code. You can set breakpoints, step through your code, and inspect variables to understand what’s going on.
5. Use the Git integration to manage your code changes and collaborate with others. You can commit changes, create branches, and merge code directly from within VS Code.

Bonus

Okay, you know all those things anyway didn’t you, so here is something I personally do. By default, the blade and side panel of VS Code (where you see your files, or extensions) is on the left. I move it to the right.

Now, one handy shortcut is Ctrl + B which opens and closes the side panel. You can of course use this shortcut when the panel is on the left, but then using it makes your code jump when the panel opens and closes. Having it on the right stops that, and opening it on the right means it has less impact on the code you can see.

Another Bonus

Learn to use snippets in VS Code, they will make coding much easier, and faster. Here is an example snippet for creating a simple console.log statement in JavaScript.

"Log to console": {
    "prefix": "log",
    "body": [
        "console.log('$1');"
    ],
    "description": "Log output to console"
}

To use this snippet, type log and then press Tab. The cursor will jump to the position of the $1 placeholder, and you can type in the message you want to log. When you press Enter, the snippet will be expanded to a full console.log statement.

You can customize this snippet by replacing $1 with any other placeholder, or by adding more lines to the body array. For example, you could add a second line to log the value of a variable like this.

"Log to console": {
    "prefix": "log",
    "body": [
        "console.log('$1:', $1);",
        "console.log('Variable value:', ${2:variable});"
    ],
    "description": "Log output to console"
}

I hope this helps give you an idea of how to create and use snippets in VS Code.

VS Code Extensions

Extensions are a great way of improving your VS Code experience, over the next few months I’ll be posting a couple of posts about different VS Code extensions, so keep an eye out for those.