Visual Studio Code tips and tricks [ 2020 Updated ]
Theme Changes in VS Code
In VS Code, open the File Icon Theme picker with File
Preferences
File Icon Theme. ...
You can also use the Preferences: File Icon Theme command from the Command Palette (Ctrl+Shift+P).
Use the cursor keys to preview the icons of the theme.
Select the theme you want and hit Enter.
Command Palette
The Command Palette allows you to access various available commands just by typing a keyword instead of navigating through menus.
The Command Palette can be opened with the key combination Ctrl+Shift+P. You can then type relevant keywords to see a list of commands in the drop-down window.
Zen Mode
Zen Mode is a distraction-free view. All the extra tool boxes 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 center-align your code in Zen Mode to experience a view like a document editor. Jump in and out of the centered layout by selecting View -: Appearance -: Toggle Centered Layout.
Centered Code in Zen Mode
Centered Code in Zen Mode
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 lay out files vertically or horizontally.
You can achieve the split view by selecting View -: Editor Layout -: Split Up.
Comparing Files in Split View
Tag wrapping
Emmet is a plugin that saves time and improves developer productivity by helping you type less but generate more code.
Emmet allows you to get the corresponding tags from the abbreviated code you are typing. You can see an example in the following screenshot. Check out this list of all the pre-supported tag wraps in Emmet.
Tag Wrapping Using Emmet
Tag Wrapping Using Emmet
Git integration
Visual Studio Code comes with Git integration that allows you to commit, pull, and push your code changes to a remote Git repository.
Open a file in a Visual Studio 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.
Check out this cheat sheet for all the Git commands.
Code Difference between Working Copy and Code Base
Code Difference between Working Copy and Code Base
New themes and plugins
VS Code lets you apply a theme to the syntax highlighting of text in the editor based on your preferences. You can find many themes in the VS Marketplace that are absolutely free.
visual studio code keyboard shortcuts windows
visual studio code shortcuts mac
vscode command palette
vscode extensions
#USAThe Coding Bus #unitedstates
#usa visual studio code extensions
Theme Changes in VS Code
In VS Code, open the File Icon Theme picker with File
Preferences
File Icon Theme. ...
You can also use the Preferences: File Icon Theme command from the Command Palette (Ctrl+Shift+P).
Use the cursor keys to preview the icons of the theme.
Select the theme you want and hit Enter.
Command Palette
The Command Palette allows you to access various available commands just by typing a keyword instead of navigating through menus.
The Command Palette can be opened with the key combination Ctrl+Shift+P. You can then type relevant keywords to see a list of commands in the drop-down window.
Zen Mode
Zen Mode is a distraction-free view. All the extra tool boxes 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 center-align your code in Zen Mode to experience a view like a document editor. Jump in and out of the centered layout by selecting View -: Appearance -: Toggle Centered Layout.
Centered Code in Zen Mode
Centered Code in Zen Mode
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 lay out files vertically or horizontally.
You can achieve the split view by selecting View -: Editor Layout -: Split Up.
Comparing Files in Split View
Tag wrapping
Emmet is a plugin that saves time and improves developer productivity by helping you type less but generate more code.
Emmet allows you to get the corresponding tags from the abbreviated code you are typing. You can see an example in the following screenshot. Check out this list of all the pre-supported tag wraps in Emmet.
Tag Wrapping Using Emmet
Tag Wrapping Using Emmet
Git integration
Visual Studio Code comes with Git integration that allows you to commit, pull, and push your code changes to a remote Git repository.
Open a file in a Visual Studio 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.
Check out this cheat sheet for all the Git commands.
Code Difference between Working Copy and Code Base
Code Difference between Working Copy and Code Base
New themes and plugins
VS Code lets you apply a theme to the syntax highlighting of text in the editor based on your preferences. You can find many themes in the VS Marketplace that are absolutely free.
visual studio code keyboard shortcuts windows
visual studio code shortcuts mac
vscode command palette
vscode extensions
#USAThe Coding Bus #unitedstates
#usa visual studio code extensions
