After many years using Vs Code to implement web applications I’ve been improving my set-up which allows me to be more efficient, the set-up I will share you is to Mac Os, but you can take the ideas and adapt to other operative systems like Linux o Windows.

Set-ups

• hide default initial view, reason: you don’t need to think on many options when you will code, you open a repository and start coding
• move the sidebar to right, reason: you don’t want to move lose the view of your code when you open the sidebar
• move the panel to the right, reason: you want to see more content in your terminal
• move sidebar options bellow, reason: you want to save space to display sidebar and panel
• autosave your files when change the focus, reason: you don’t want to remember to save your files, you want to only change to the browser and see the result
• format on save, reason: you don’t want to spend time formatting your code, all code should follow the same rules
• enable accessibility support, reason: it plays a sound when a process is complete in the terminal, so you don’t need to wait and watch the terminal, when it sound the process is done

Set-up on settings.json

"workbench.startupEditor": "none",
"workbench.sideBar.location": "right",
"workbench.panel.defaultLocation": "right",
"workbench.activityBar.location": "bottom",
"files.autoSave": "onFocusChange",
"editor.formatOnSave": true,
"editor.accessibilitySupport": "on",

Extensions

• chose a theme with nice contrast in dark and light mode, my favorite Gruvbox Material, when the place where I’m working is lighter, I change to light mode, when is darker I change to dark mode, it will help you not make a lot of effort to see the code in any place Search by: sainnhe.gruvbox-material
• chose a great icon theme, my favorite Gruvbox Material Icon Theme, it has many icons for languages and folders, and has nice contrast with the theme I chosen, it will help you to see what kind of file are you watching without read all the file name and extension Search by: JonathanHarty.gruvbox-material-icon-theme
• Auto Close Tag, you don’t want to spend time writing the html tag which close the open tag Search by: formulahendry.auto-close-tag
• Auto Rename Tag, you don’t want to spend time renaming manually the tag which close the open tag Search by: formulahendry.auto-rename-tag
• Code Spell Checker, this will help you to see grammar issues and auto fix them with vs autocomplete, you will avoid many typo issues Search by: streetsidesoftware.code-spell-checker
• Color Highlight, when you write a color on hexadecimal, rbg, etc, you want to see what is that color Search by: naumovs.color-highlight
• Error Lens: to display the error in the code panel without making hover in the code Search by: usernamehw.errorlens
• Git Graph: this will help you to understand the current state of your git by displaying a nice chart with of your commits and branches Search by: mhutchie.git-graph
• Git Lens: the only feature I likes is when I my cursor is on a line my code, this extension display the commit information like author, message and date, when I will find other extension which makes only that I will change to that Search By: eamodio.gitlens
• EsLint: to detect when our code is not following our defined rules and make some fixes Search by: dbaeumer.vscode-eslint
• Prettier: to format the code Search by: esbenp.prettier-vscode

Then, depend of what technologies you will use you will need more tools like autocomplete, snippets, language highlight, etc.

Shortcuts

Code panel

• open a file CMD + p
• change between code panels CMD + 1 to focus panel 1, CMD + 2 to focus panel 2
• add multi cursor below CMD + option + arrow down
• add multi cursor above CMD + option + arrow up
• move a page down in your code Fn + arrow down
• move a page above in your code Fn + arrow up
• move code bellow option + arrow down
• move code above option + arrow up
• move to the definition FN + F12
• move to the previous/next cursor position CTRL + - / CTRL + SHIFT + -
• expand /collapse a scope OPT + CMD + [ / OPT + CMD + ]
• toggle wrap text vscode OPT + z
• select similar text CMD + d
• move to a specific line CTRL + g, then enter the number line and ENTER

Sidebar

• toggle sidebar CMD + b
• open file explorer CMD + SHIFT + E
• open global search sidebar CMD + SHIFT + F
• open git sidebar CMD + SHIFT + G
• open extensions sidebar CMD + SHIFT + X
• toggle the terminal CTRL + `
• create new terminal CTRL + SHIFT + `
• move to the next terminal into a group ALT + CMD + DOWN
• move to the previous terminal into a group ALT + CMD + UP
• navigate to the next group terminal CMD + SHIFT + ]
• navigate to the previous group terminal CMD + SHIFT + [

Other set-ups

I found an issue when I tried to copy something CMD + c, it is opening the external terminal is opened if I press the invalid keys CMD + SHIFT + C, so lets remove the shortcut of (open external terminal)

I hope this set-up helps you to improve your performance. Let me know if your have other tips and tricks to continue improving