Objective :-
Get comfortable enough to work around in VS Code
How to change theme
Editing Shortcuts
Configuration and customization
Intended reader :-
Anyone who is super new to vs code or to coding in general and is trying out VS code for the first time.
VS Code makes writing code very pleasant experience, and is extremely customisable though it might seem a little intimidatingly the first time.
Below images are testament to this fact. Even though it looks gorgeous it which was achieved with no more than 10 mouse clicks - so any beginner out there need not get intimidated or overwhelmed.
First things First - Picking a Theme
Let’s get you hooked up with a nice set of themes first.
Ctrl+shift+x (Shortcut to Extensions)
Type in the theme you want ( Maybe go for `Alt Catppuccin` )
Install
Set colour theme
You can choose any theme you want, the ones I am using in the above shown three image are :-
Palenight (the actual colour theme to match with wallpaper) and GlassIt ( for transparency )
Nebula Panda
Night Owl
Now that your editor look a bit nicer, lets get over the basics at a very high overview.
Basic Shortcuts
Editing is made seamless via the tonnes of keyboard shortcuts that vs code provides out of the box. Even these can be changed with preference (will discuss shortly) of user.
The following cheat-sheet contains few of the most important shortcuts that are quick to grasp and will get you editing with ease. Practising these while editing is the key in building muscle memories.
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
Few skills that are really useful and easy to grasp are :-
moving an entire line up or down :- Alt + Up / Down arrow key
Duplicating the entire line up or down :- Alt + Shift + Up / Down arrow key
Multi-cursor :- Ctrl + Alt
Find certain text and replace them with something else :- Ctrl + F Ctrl + H
these are just few of the shortcuts mentioned in that short PDF.
Basic Layout
You have your Directory Pane in your left ( only if you opened a folder in VS Code)
The bottom bar is called status-bar, it shows the status of various extensions you have installed from the marketplace ( the place we reached when we did Ctrl + Shift + X for installing the themes )
the activity bar is the one at the right, it has icons of few of those extension you downloaded
You can hide any or all of these bars, change their positions etc.
Configuration
You can config whatever you want mostly from :-
setting.json
VS Code allows you to customize various aspects of the editor to suit your preferences. One way to customize VS Code is through the
settings.jsonfile. This file contains configurations for VS Code, such as the font size, tab size, and even the colour theme. You can modify this file directly or use the Keyboard Shortcut UI (Ctrl+K, Ctrl+S) to access the settings.Ctrl K + Ctrl S ( Keyboard Shortcut UI )
You can define your OWN keyboard shortcuts. You can search either by the command that is triggered when you press the keybinding OR search by using the keybinding itself ( if it already is used for triggering the command and you want to change that keybinding )
Extensions
Another way to customize VS Code is by adding extensions. Extensions are add-ons that provide additional functionality to VS Code, such as code formatting, debugging support, and more. You can add your favourite extensions by accessing the Extensions panel (Ctrl+Shift+X) and searching for the extension you want. It's advised to look for any add-ons relating to the programming language or technology you are working with before coding since they can make coding considerably more pleasant.
This is the YouTube channel of a Microsoft developer who is working on VS Code and releases short AND to-the-point videos on VS Code.
You can learn more A LOT of editor productivity techniques from him.
Happy Coding!
-Niranjan Gopal