10 Neat Tips & Tricks Every Developer Should Know in Visual Studio Code in 2021💻🤩

Sanyam Sharma — Thu, 14 Jan 2021 19:00:58 +0000

Even without the extensions and themes that make the VS Code a powerful tool for every developer, but it is loaded with lots of features by default. However, some of these useful features are not obvious, even to experienced developers. And with each new update of VS Code, more handy features get rolled in — often remaining below the waterline.

Here I’ve listed 10 useful VS Code tricks that you might or might not be aware of. It will be helpful for developers of all levels, from the newcomers to the seasoned vet.

1. Type to find any command

Want to find a command, in VS Code? Press Ctrl-Shift-P and start typing.
The command palette, as it’s called, gives you fast access to any registered command, including those provided by add-ons. Plus, if there’s a key binding associated with a given command, it’s displayed in the type-to-search drop-down list. This way, you can cut straight to the key shortcut in the future.

2. Open/Close terminal with one hand

The pop-open terminal window in VS Code is a massive convenience. No need to switch out to another application window to deal with the terminal. It’s also readily accessible by pressing Ctrl-` (the backtick key). What’s nice about this is that pressing these keys requires only one hand, so you can kick open the window or shut it without touching the mouse.

3. Multi cursor selection

One fairly wizardly way to edit a document in the VS Code is to define multiple cursors. That’s right—you can type in a document in more than one place at a time.

To add cursors at arbitrary positions, select a position with your mouse and use Alt+Click and to set cursors above or below the current position use Ctrl+Alt+Up or Ctrl+Alt+Down.

You can add additional cursors to all occurrences of the current selection with Ctrl+Shift+L.

To go back to a single cursor, just hit the Escape key.

4. Word-based suggestions from multiple documents

It has the ability to make word-based suggestions as you type for most common plain-text document types. By default, however, suggestions only get supplied from the current document or open documents of the same type.

But the recently introduced feature lets you find suggestions from all currently open files.

Set the editor.wordBasedSuggestionsMode configuration option to allDocuments to get suggestions from every open file, not just what you’re currently editing or open files with the same extension. This is handy if you have files that hold type stubs for your application, but don’t share a file extension with the file you’re editing.

5. Focus/Zen Mode

It is a distraction-free view. All the extra toolboxes and bars in your window will be removed, allowing you to completely focus on your code.
Jump to and from Zen mode by selecting View > Appearance > Toggle Zen Mode.

Also, you can centre-align your code in Zen Mode to experience a view like a document editor. Jump in and out of the centred layout by selecting View > Appearance > Toggle Centered Layout.

6. Split view

If you’re good at multitasking, and you are working on two different files of the same project simultaneously, or need to check the difference between two files, then go to the split view.

The split view can be customized based on your preferences, whether you like to layout files vertically or horizontally.

You can achieve the split view by selecting View > Editor Layout > Split Up.

7. Git integration

It comes with Git integration that allows you to commit, pull, and push your code changes to a remote Git repository.

You just have to open a file in a VS Code that belongs to a Git repository. The editor will show the difference between the working copy and the current file in a remote repository. This won’t work without an internet connection; one is required to stay connected with the Git repository.

8. Exclude folders

You can use the exclude folder option to remove unwanted folders like node_modules or others you don’t want to open in Visual Studio Code.

To exclude a folder, go to File > Preferences, and search for file.exclude in the search settings. You can add the pattern of the folder you don’t want VS Code to open.

9. Go to definition

While programming or scripting, you’ll often run into a variable or method that you don’t recognize. You could spend several minutes searching for the right file, or you could hold Command Ctrl (on Windows) and click the variable or method name. VS Code will then take you to its definition.

10. Errors and warnings

Edsger Dijkstra once said that if debugging is the process of removing software bugs, then programming must be the process of putting them in.

During your development journey, you’ll often run into errors or warnings. One way to address them is to scroll down to that particular error in the code or a better way is to quickly jump to errors and warnings in the project using Ctrl+Shift+M or cycle through errors with F8 or Shift+F8.

NOTE

Keyboard reference sheet

Conclusion

I hope you have enjoyed learning some new tricks in making effective use of Visual Studio Code.
Know a trick in VS Code and feel it would be helpful for others? Share it as a comment below! Will add it to another article.

Happy Coding!

Read my previous article

Setting Up Visual Studio Code for Web Development in 2021

SETTING UP VISUAL STUDIO CODE FOR WEB DEVELOPMENT IN 2021💻

Sanyam Sharma — Mon, 04 Jan 2021 10:09:51 +0000

Visual Studio Code is a streamlined code editor with support for development operations like debugging, task running, and version control. It aims to provide just the tools a developer needs for a quick code-build-debug cycle.

VS Code also has a build-in git integration and terminal, so you don’t have to jump from one window to another and it supports a large number of extensions that can be used for faster development.

So, here are some of the best and trending vs code extensions for you to start your development journey in 2021.

• How to install and browse extensions in VS Code.

You can browse and install extensions from within VS Code. Bring up the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the VS Code.

1. Live Server

Launch a local development server with live reload feature for static & dynamic pages.

2. Prettier

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

3. CSS Peek

Allow peeking to CSS ID and class strings as definitions from HTML files to respective CSS. Allows peek and goto definition.

4. Bracket Pair Colorizer

This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use.

5. Debugger for Chrome

Debug your JavaScript code in the Chrome browser or any other target that supports the Chrome Debugger protocol.

6. Visual Studio IntelliCode

The Visual Studio IntelliCode extension provides AI-assisted development features for Python, TypeScript/JavaScript and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.

7. Project Manager

Helps to easily switch between projects.

8. Better Comments

Improve your code commenting by annotating with an alert, informational, TODOs, and more!

9. Advanced New File

Helps to create files anywhere in your workspace from the keyboard.

10. Auto Rename Tag

Auto rename paired HTML/XML tags.

11. Better Align

Align your code by a colon(:), assignment(=,+=,-=,*=,/=) and arrow(=>). It has additional support for comma-first coding style and trailing comment.

And it doesn't require you to select what to be aligned, the extension will figure it out by itself.

12. Bookmarks

Mark lines and jumps to them.

13. CodeSnap

Take beautiful screenshots of your code.📷

14. GitLens

Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

15. JavaScript (ES6) Code Snippets

Code snippets for JavaScript in ES6 syntax.

Conclusion

In this article, I have shared with you my favourite extensions for Visual Studio Code which will help you to improve your performance of your development. Also, if you are a beginner, it may help you to focus on learning programming then on looking for an opening or closing bracket:)

Did I miss something? Please comment down below!

Happy coding!

DEV Community: Sanyam Sharma

10 Neat Tips & Tricks Every Developer Should Know in Visual Studio Code in 2021💻🤩

1. Type to find any command

2. Open/Close terminal with one hand

3. Multi cursor selection

4. Word-based suggestions from multiple documents

5. Focus/Zen Mode

6. Split view

7. Git integration

8. Exclude folders

9. Go to definition

10. Errors and warnings

Conclusion

Read my previous article

SETTING UP VISUAL STUDIO CODE FOR WEB DEVELOPMENT IN 2021💻

• How to install and browse extensions in VS Code.

Conclusion