VS Code Tip: commit part of a file

A cool feature of Git is that you can stage/commit some of the modifcations that were made to a file while leaving the other parts unstaged.

This is nice when you’ve made several changes and need to commit one of them to fix something asap.

You can use this Git feature right from VS Code. Select the changes you want commited by clicking the change indicators in the gutter.

selectChange

Stage the change using the + icon.

stageChange

You can then commit it normally. You will see your other unstaged changes for this file under the CHANGES header.

commitChange

JavaScript tip: format console.log output

You can format the output of console.log() using CSS. Use %c in your console log string and then add an argument for the CSS.

Here’s a simple script that uses CSS formatting to make a formatted console logger:

const fl = {
  log: function (title, message, color) {
    console.log('%c%s:%c %s', 
      `color: ${color}; font-weight: bold; text-decoration: underline ${color}`,
      'color: black',
      title, message);
  },

  info: function (message) {
    this.log('Info', message, 'green');
  },

  warning: function (message) {
    this.log('Warning', message, 'orange');
  },

  error: function (message) {
    this.log('Error', message, 'red');
  }
};

 

Here is the result in the console:

console formatting

Search for things faster in Visual Studio with these two weird tricks

Here are two ways to search within a document that won’t open the search dialog in Visual Studio 2010. The first one is also useful for 2013.

Incremental search (Ctrl-i): Ctrl-i will start an incremental search. In Visual Studio 2010 this won’t even open the search dialog. Your search pattern will be displayed on the bottom bar in 2010 and in the standard search box in 2013. You can cycle through various entries by continuing to press Ctrl-i.

I often use incremental search to quickly jump to a specific location on the same line or a nearby line. For example if I want to jump to the word string I can just press Ctrl-i followed by the first few characters of the words I am looking for, in this case: st and I’m usually there. By using this feature I am able to prevent using the mouse or the arrow keys to move the cursor.

This is a big gain as taking your hands away from the keyboard has a huge impact on your workflow and the arrow keys are a slow way to move around (even with shift-arrow key).

Keep in mind that as the distance you need to travel increases, you’ll tend to get more and more misses with this strategy and might need to keep repeating Ctrl-i too much.

Search for the word under the cursor (Ctrl-F3): This next one is specific to Visual Studio 2010. If you want to find other occurrences of a specific word just move your cursor to it and then press Ctrl-F3 which will automatically send you to the next occurrence. Again this will not bring up the search dialog, which would then necessitate at least one more click to confirm.

You can continue pressing F3 (no need for the Ctrl key) to move to the other occurrences of the same word within the current file.

This is particularly useful when you are already positioned on the word you want to search, say a variable or function, and contrary to Find all references it will also find commented out instances.

In Visual Studio 2013 search has been improved which rendered this shortcut obsolete. You can still press Ctrl-F3 which will have the same behaviour has Ctrl-F. F3 will also cycle to the next search hits.

In the same series:

Delete things faster in Visual Studio with these two weird tricks