10 Essential Tips to Supercharge VSCode and Code Faster

Most developers are missing out on VSCode’s potential. These tips will help you unlock its hidden gems to boost your productivity and coding speed with powerful extensions, keyboard shortcuts, beautiful fonts & colors, and more.

1. First Things First

Learn Important Keyboard Shortcuts

Speed up your coding with these shortcuts:

• Highlight code left & right: Shift + Left / Right
• Copy line without highlighting: Ctrl + C
• Move line up / down: Alt + Up / Down
• Delete line: Ctrl + K
• Close file: Ctrl + W
• Close all files: Ctrl + K, W

Enable Autosave

Automatically save your files to avoid constant Ctrl + S:

• Go to Settings and enable Autosave.

Set Up Outline View

Get a quick overview of symbols in your active file from the File Explorer Pane:

• Move Outline View to a separate pane for more space.

2. Set Up Source Control

Init Repo with VSCode

Use the Source Control Pane to initialize a new local repo.

Commit Changes

Stage your files and press Ctrl + Enter to commit.

Install GitLens Extension

GitLens shows essential repo data and file info, like history, commits, branches, and more.

3. Code Faster with AI

Try these AI extensions for intelligent code completions and chatbots:

1. GitHub Copilot: paid, $10/month
2. Coding Beauty Assistant: free
3. Tabnine: has free version, $12/month

4. Learn Snippets to Code Faster

Emmet

Use Emmet for faster coding in JSX, CSS, HTML, and more.

JavaScript (ES6) Code Snippets Extension

JavaScript (ES6) Code Snippets offers time-saving snippets for JavaScript.

5. Install Keymaps

Install keymaps to retain shortcuts from your previous editors:

• Vim: Vim Extension
• Atom: Atom Keybindings
• Visual Studio: VS Keybindings

6. Start Auto-Linting Code

Install ESLint to find and fix JS code problems and enforce style.

7. Enable Auto-Formatting

Install Prettier to format your code automatically:

• Enable Format On Save in Settings.

8. Set Up Debugging and Testing

Debugging

Use VSCode’s debugging features like breakpoints, call stack inspection, and variable watching.

Testing

Install these extensions for easier testing:

• Jest Runner
• Mocha Sidebar

9. Use a More Code-Friendly Font

Try Cascadia Code or Fira Code for beautiful fonts with code ligatures.

10. Beautify Your Editor with Colorful Themes

Color Themes

Install these themes for beautiful UI and code highlighting:

• Atom One Light
• Atom One Dark
• One Dark Pro
• Night Owl

Icon Themes

Install VSCode Icons for distinct file icons in the File Explorer Pane.

---

With these tips, you’re all set to enhance your coding experience and achieve your development goals faster.

Ref: Tari Ibaba - Medium