14 Amazing VS Code Tips To Increase Productivity And Speed

    - Advertisement -

    Microsoft’s Visual Studio code editor (VS code editor) is a popular code editor used daily by many programmers due to its speed and simplicity, and it is powerful too. It comes with so many features that increase the coder’s productivity and speed. In this article, I’ll tell you some best VS code tips to increase your productivity and speed while coding.

    Best VS code tips
    VS Code Tips

    VS Code Tips : Use Themes

    The first thing I would recommend you to not work with the default theme. Because, in my opinion, it is so dull, VS code offers a plethora of themes to suit your preferences and work environment. It supports light, dark and high contrast themes.

    So to simply install themes click on extensions and search for themes. Some of the popular themes for VS code is listed below :

    Keyboard Shortcut: To display theme picker anytime in your VS code use Ctrl + K Ctrl + T 

    Customize Window Title Bar

    You can change the window title bar too for that get into settings and search for title. In the window title section, all the variables are listed that you can use. Like activeEditorShort variable to display the file name you are working on.

    Window Title Settings In VS Code Tips
    Window Title Settings In VS Code

    To show the VS code default title, the variables used are, first, there is a dirty variable that displays one small white circle. If the file you are working on is not saved. The following variable is activeEditorShort that displays the file name you are working on. Then separator, rootname separator and appname.

    - Advertisement -

    You can remove or add any of the variables or you can directly type anything that you want to be displayed on the title bar. Like I typed tips for productivity after the appname variable. The title will show the Visual studio code that is the appname and tips for productivity. So you can change what you want to display in your title bar from the windows title section in the settings.

    Customize Title Bar In VS code

    Use Auto Save : Very Useful VS code Tip

    The next tip is to enable autosave. Search for autosave in settings and from the Files : Auto Save section. You can allow autosave in VS Code. This is a beneficial feature cause after you enable this feature, VS code will automatically save the changes you made to any file.

    auto save in vs code
    AutoSave In VS Code

    There are 3 options available here first one is afterDelay. This will automatically save the file you edited after some time. Next is the onFocusChange option. This option saves the file after you change your focus, which means switching to another file from the file you were working on, and the last one onWindowChange saves the file after you switch windows. These are the 3 options that you get in VS code. You can select any one of these 3 according to your need. I like to use the onFoucsChange option.

    Remember Shortcuts

    The next tip is to try to remember and use as many shortcuts as you can remember. Whatever action you perform using the mouse, the keyboard shortcut to achieve the same action will also be displayed. As you can see in the image below. So try to remember and use shortcuts. This practice will incredibly increase your speed in VS code.

    Shortcuts in vs code

    Screencast Mode

    There is screencast mode in VS code too. You can enable it by searching screencast in the command palette.

    screencast mode in virtual studio code

    This feature is handy if you are recording something in VS code. Because if I want to highlight something after clicking there, this red circle will be displayed. Another great thing in screencast mode is that whenever you type something on the keyboard, it will be displayed on the screen.

    You can also play with the settings of screencast mode by searching screencast in settings. You’ll see all the options that are available for you to change according to your need. Like you can change the font size of the keypress that gets written on the screen and then overlay timeout. Then there are other options like mouse indicator color, indicator size, enable or disable only keyboard shortcuts. If the only keyboard shortucts option is disabled, everything you type will be displayed on the screen.

    Screencast Settings Visual Studio Code
    - Advertisement -

    Customize Activity Bar

    Next is that you can move the icons in the activity bar. By Holding them and then dragging them to anywhere you want. Also, you can change what icons to display what to hide by right-clicking on the activity bar and then again click on the view that you want to hide.

    Customizing Activity Bar - Vs code

    By clicking on, “move sidebar to right” You can move this sidebar to the right side of the screen. If you want to move it again back to the left side, right-click on the sidebar and select “move sidebar to left

    By clicking on “hide activity bar” you can hide the whole activity bar too. The same goes for the sidebar, right-click on it and select hide sidebar. In this way, you can hide the activity bar or sidebar. If you want to view it again, you can search it in the command palette and enable it. The same goes for the terminal panel. You can move it to the left or right, or bottom of the screen according to your preference.

    VS Code On Android In 3 Simplest Steps

    Pin Important Files

    Next is file pinning, Every time I end up opening many files in the editor, and it gets tough to find the main file. In those situations, you can use file pinning. Just right-click on the file you want to pin, and select pin.

    File pinning in VS code
    You can also use Ctrl + K then Shift + Enter shortcut to pin a file. 

    Just like in browsers, you can close a pinned file after you unpin it. This will prevent you from accidentally closing your important files.

    By searching “pin tab” in settings, you can change the size of pinned tabs. Normal displays pinned tabs normally. Compact shows just the icon of the file. Next is shrink that displays some part of the file name too. So don’t forget to pin your important file.

    - Advertisement -

    Default File Language

    Whenever you create a new file in the editor, you need to manually select the language of the file. You can let VS code decide the language of the new files you create.

    For that, search “default language” in settings. In Files: Default language section, you can specify the default language like HTML. Then, if you create a new file by default, it will be an HTML file. Instead of setting a language, you can enter ${activeEditorLanguage} variable.

    Default Language VS code tip

    ${activeEditorLanguage} variable will create a new file of the same language you were working on. For example, If I create a new file while working on a Python file, the new file will be automatically a python file. I recommend you enable this feature cause you can get rid of selecting file language every time you create a new file.

    Wrap Tab And Code

    When we open a lot of files in the editor. We can see some files but not all. So to see all the active files in the editor at one glance, you can enable “wrap tab” feature by searching it in settings. This will wrap all the tabs in another new section if they don’t fit in the first section. The same goes for editor wrap. If you turn it on, all the code in the editor will be automatically wrapped by default.

    Settings Sync

    The next tip is to turn on settings sync. Imagine using VS code on your PC and laptop or on multiple distros if you make some change like enabling or disabling some feature or changing theme. You may want to apply the same settings automatically on all the VS code editors you use.

    For that, you can turn on settings sync by clicking on settings and then Turn on Settings sync. After that, select what you want to sync. I’ve chosen everything. After that, click on sign in & turn on. Then, select your account Github, Microsoft, or any other account. Done! Settings sync will be enabled in a few seconds. Now, whenever you log in with your selected account in any VS code. All your settings will be synced.

    Multicursor Editing

    You can create multiple cursors in your editor to edit your code multiple times at once. To do that, select the text you want to edit, and then VS code will automatically highlight all matching names. Now, press Ctrl + D, to get a new cursor at the highlighted word. You can press Ctrl + D as many times as you want. Like if you want to edit three highlighted words, you are going to need 2 more cursors so in that case press Ctrl + D twice.

    Multi cursor Editing In Vs code

    Another way to use multiple cursors is by holding the Alt button and clicking on the editor at the place you want a new cursor.

    Moving Or Copy Code Efficiently

    A normal way to move code in VS code is to cut the piece of code using Ctrl + X and then paste it to another place with Ctrl + V, but there is a more straightforward way to do this. First, select the piece of code you want to move, then hold the Alt button and use the arrow key to move your code. To move it up, press the arrow up key while holding the Alt key and vice versa.

    And, if you want to copy the piece of code, hold one more key, i.e., Hold Alt + Shift button, and press the arrow up key or down key to copy it.

    Comment A Piece Of Code

    Next is commenting a piece of code. In python, we can comment a line using hash at the beginning, but what if I want to comment so many lines. I can start commenting every line, or I can do it efficiently. The efficient way is to select the piece of code and then press Ctrl + / to comment out the selected code. This will work in python language, but this shortcut will also work in every language.

    Now to uncomment it, select the commented piece of code, and use the same shortcut. That is Ctrl + / . This is an efficient way to comment and uncomment large chunks of code in VS code editor.

    All Keyboard Shortcuts In VS Code

    If you want to know more keyboard shortcuts of VS code editor. Click on settings, then keyboard shortcuts. There, you’ll see all the available shortcuts that you can use in VS code. If you want, you can change key combinations by double-clicking on shortcuts. Then, press any desired key combination you want and hit enter.

    keyboard shortcuts in vs code


    So these were some tips to increase your productivity and speed in vs code. The major one is to try to notice and remember all the shortcuts for actions you perform with your mouse in day-to-day coding. This practice will greatly improve your speed in VS Code.

    - Advertisement -

    Recent Articles

    Leave A Reply

    Please enter your comment!
    Please enter your name here