10 tips to supercharge VS Code and code 10x faster (0 to 100)
![10 tips to supercharge VS Code and code 10x faster (0 to 100)](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fvscode-tips-supercharge.png&w=3840&q=75)
95% of developers are just wasting the potential of VS Code.
It has so many hidden gems that upgrade your productivity and quality of life -- but they're not using them.
Use these 10 solid tips to gradually supercharge VS Code and code faster: with powerful extensions, little-known keyboard shortcuts, beautiful fonts & colors, and so much more.
1. First things first
Starting with the essentials.
Learn important keyboard shortcuts
You will code so much faster once you learn these
- Copy line with Ctrl + C
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fcopy-line.gif&w=3840&q=75)
- Highlight code left & right with Shift + Left / Right
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fhighlight-code-left-and-right.gif&w=3840&q=75)
- Move line up / down with Alt + Up / Down
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fvscode-move-line-up-down-1.gif&w=3840&q=75)
- Delete line with Ctrl + K
- Close file with Ctrl + W
- Close all files with Ctrl + K, W
Enable autosave
To save your files automatically.
I've talked about why I dislike autosave before, but it's a great feature to stop the constant Ctrl + S's.
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fimage-18.png&w=3840&q=75)
Set up outline view
The Outline View gives you a quick overview of all the symbols in your active file from the File Explorer Pane:
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fimage-23.png&w=3840&q=75)
But I recommend you move to a separate pane to have more space:
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fvscode-outline-view.gif&w=3840&q=75)
2. Set up source control
You need to set up integrations for Git to easily track your changes.
Init repo with VS Code
Use the Source Control Pane to initialize a new local repo.
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fsource-control.png&w=3840&q=75)
Commit changes
You can quickly stage your files and press Ctrl + Enter anytime you need to commit:
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fcommit.gif&w=3840&q=75)
Install this extension
Now install the GitLens extension for even better integration:
GitLens will show you essential repo data and info on your current file -- file history, commits, branches, and more.
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fgitlens-1.png&w=3840&q=75)
Place the cursor on any line in the editor and GitLens will display info on the latest commit where the line was changed:
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fgitlens-line-changed.png&w=3840&q=75)
3. Code faster with AI
GenAI has booming recently and now we have extensions that give you intelligent AI code completions as you type.
And IDE-integration chatbots, some of which use context from your codebase.
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fcode-completion.png&w=3840&q=75)
Great ones you can try:
- GitHub Copilot: paid, $10/month
- Coding Beauty Assistant: free, $10 per month for more features
- Tabnine: has free version, $12 per month
4. Learn snippets to code faster
Emmet
With this I type much faster when working with JSX, CSS, HTML, and more.
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Femmet-vscode.gif&w=3840&q=75)
One thing you'll notice is how similar the abbreviations are to CSS selectors.
This is by design: Emmet syntax is inspired by CSS selectors.
Install this extension
JavaScript (ES6) code snippets: fully loaded with heaps of time-saving code snippets for JavaScript.
See how the imp
and imd
snippets quickly import the modules with the ES6 syntax:
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fimp-imd-snippets.gif&w=3840&q=75)
5. Install keymaps and feel at home
Priceless if you're used to another code editor.
So if you're coming from:
- Vim: Install this extension
- Atom: Install this extension
- Visual Studio: Install this extension
For example in Atom, you could easily press A
and Shift + A
to create a new file or a new folder.
Installing the Atom keymap instantly brings this shortcut to VS Code -- no need to manually edit hotkeys:
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fvscode-new-file-folder-keyboard-shortcut.gif&w=3840&q=75)
6. Start auto-linting code
You should install a linter to avoid errors and enforce style.
Use ESLint to quickly find and fix problems in your JS code and easily avoid poor coding practices -- like unused vars:
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Feslint-no-unused-vars.png&w=3840&q=75)
7. Enable auto-formatting
Install Prettier to automatically format your code with consistent formatting.
With Format On Save, Prettier instantly formats your code when you press Ctrl + S.
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fprettier-in-action.gif&w=3840&q=75)
You can enable it in Settings:
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fimage-17.png&w=3840&q=75)
8. Set up debugging and testing
So VS Code already gives you fantastic debugging features.
Set breakpoints, inspect the call stack, watch variables and more.
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fimage-14.png&w=3840&q=75)
Testing
These extensions will make testing much easier:
- Jest Runner for Jest testing
- Mocha sidebar for Mocha testing
Clicking Run runs the particular test case with no need for the terminal.
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fimage-15.png&w=3840&q=75)
9. Use a more code-friendly font
If you look closely you'll see that I'm NOT using the default Consolas font.
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fimage-20.png&w=3840&q=75)
I'm using Cascadia Code -- a beautiful font from Microsoft with aesthetically pleasing code ligatures.
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fcascadia-code.png&w=3840&q=75)
Ligatures:
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fligatures-1.png&w=3840&q=75)
Fira Code is another great one I've used:
You can easily change your font in settings:
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fimage-24.png&w=3840&q=75)
10. Beautify your editor with colorful themes
Color themes
Set up a beautiful theme to easily modify the colors of all the aspects of the UI.
Including your code's highlighting:
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fthemes_hero.gif&w=3840&q=75)
Some great themes I've used:
- Atom One Light & Atom One Dark -- The main two I switch between.
- One Dark Pro
- Night Owl
You can change themes with the Settings icon:
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fimage-16.png&w=3840&q=75)
Icon themes
The way VS Code displays icons in the File Explorer Pane is pretty underwhelming:
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fimage-21.png&w=3840&q=75)
That's why you should install VS Code Icons and spice things up:
The distinct icons make it much easier to understand every file and the purpose they play in the codebase.
![Go from 0 to 100 in VS Code](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fimage-22.png&w=3840&q=75)
Final thoughts
With all these new settings & extensions, you're all set up to build rapidly and achieve your dev goals much faster.
See also
- 10 essential VS Code tips & tricks for greater productivity
- 10 essential VS Code tips & tricks for greater productivity: Part 2
- 5 unnecessary VS Code extensions you should uninstall now (#2)
- How do computers actually understand the code you write?
- 10 must-have skills to become a top 1% web developer
- 10 must-have VS Code extensions for web development