VS Code Tips and Extensions Every Developer Should Know

VS Code Tips and Extensions You Shouldn't Miss

So I just ask a programmer what editor they use, and the answer is almost always Visual Studio Code, or VSCode. Is VSCode an editor, really? I don't think so. I think it is a multi purpose application akin to a multi tool like a Swiss Army knife. You can customise (sorry) just about everything in VSCode and there are thousands of extensions to customise it as well. You can use the application right out of the box, but it is only when you start adding some extensions to it, that things change in a significant way. In this post I'll be explaining what you'll need to do to setup and customise VSCode to become a fully functional development environment.

The Secret Sauce of VS Code

As an editor, VS Code walks a fine line of feature completeness. It has many useful features and is neither overwhelming nor resource demanding – unlike Atom or IntelliJ. It boasts a better Git interface, a debugger, decent autocompletion, and is unbelievably lightweight.

VS Code: Things You Need To Have Up Your Sleeve

Keyboard Shortcuts

• Ctrl+Shift+P (Cmd+Shift+P on Mac): Command Palette
• Ctrl+P: File search
• Ctrl+`: Terminal
• Ctrl+B: Toggle sidebar
• Ctrl+/: Toggle comments
• Alt+Up/Down: Move lines
• Ctrl+Shift+K: Delete line
• Ctrl+D: Select same
• Ctrl+H: Find and replace
• F2: Rename symbols

Crafting Your Perfect Workspace

Settings.json configurations

"editor. wordWrap": "off", "editor. rulers": "[80]", "editor. showDeprecatedOptionsUI": false, "editor. detectIndentation": false, "editor. formatOnPaste": true, "editor. fontFamily": "FiraCode", "editor. fontSize": 18, "editor. lineHeight": 1.5, "editor. minimap. enabled": false, "editor. cursorShape": "line", "search. useGlobalScrollOption": true, "editor. formatOnSave": true, "editor. defaultFormatter": "esbenp. prettier-vscode", "files. autoSave": "afterDelay", "terminal. integrated. defaultProfile. windows": "PowerShell".

Multi-Cursor Shenanigans

• Ctrl (Cmd on Mac) + click: Add cursor
• Ctrl+D: Select next word
• Ctrl+Shift+L: Select all instances
• Shift+Alt+Click: Vertical cursors

Git it Like You've Never Gitted Before

Efficient workflow: using VS Code with Git

• Access Source Control (Ctrl+Shift+G) for changes
• Stage and commit easily
• View authorship of changes
• Easy to handles branches and merges

Must-Have Extensions

Essential Extensions

• Prettier - Code Formatter (esbenp.prettier-vscode)
• ESLint (dbaeumer.vscode-eslint)
• GitLens (eamodio.gitlens): Visualize Code Changes and History in Git
• Peacock (johnpapa.vscode-peacock): Color-code your projects. Confusion? Not here.
• Thunder Client (rangav.vscode-thunder-client): No need for Postman with this quick alternative.
• Path Intellisense (christian-kohler.path-intellisense): File paths that just work.
• Better Comments (aaron-bond.better-comments): Add some flair to your comments.
• Code Spell Checker (streetsidesoftware.code-spell-checker): Spelling errors? Not on my watch.
• Live Server (ritwickdey.liveserver): Preview every change with the click of a button.
• Remote - SSH (ms-vscode-remote.remote-ssh): Keep your remote development local.

Language-Specific Power-Ups

Dial in with these for your chosen language:

• Python: Python (ms-python.python)
• Java: Extension Pack for Java (vscjava.vscode-java-pack)
• C++: C/C++ (ms-vscode.cpptools)
• Go: Go (golang.go)
• Rust: Rust-analyzer (rust-lang.rust-analyzer)
• Vue: Vetur (octref.vetur) or Volar (vue.volar)
• React: ES7+ React/Redux/React-Native snippets (dsznajder.es7-react-js-snippets)

Keep VS Code Zippy

Is an Extension slowing VS Code down? Here's what you can do to fix it.

Trim the Fat

Get rid of those extensions you haven't used in forever.

Stay Focused

Only activate extensions in workspaces where they are needed.

Identify Performance Hogs

Use Developer: Show Running Extensions to monitor what's slowing you down.

Avoid Big Data Pitfalls

Exclude hefty folders in settings.json:

{
"files.watcherExclude": {
"/.git/objects/": true,
"/.git/subtree-cache/": true,
"/node_modules/*/": true,
"/dist/": true
}
}

Sync Your Setup Across Devices

Settings Sync—your personal setup clone across machines. Enabling Settings Sync takes about 10 seconds and gets you out of the setup every other machine cycle. You can enable Settings Sync by going to File > Preferences > Turn on Settings Sync.

The Final Word

I have come to realize that VS Code can be just about anything you want it to be. Keys can be remapped, settings tweaked, extensions installed and uninstalled. The Goal is to make it as comfortable and as useful as possible. A few extensions have really made my life easier so I've added them here. Any others that you have found to be particularly useful? Add a comment!