K/DEV

VS Code: Tips & Tricks

A collection of tips & tricks for Microsoft Visual Studio Code for Mac.

Add Next Occurance (cmd+d) selects case-insensitive.

By default, the cmd+d trick selects case-insensitively. Press...

Option+Command+C

to

toogleFindCaseSensitive

And that's that!

Rename Refactoring

To rename a symbol (i.e.: variable in javascript, class name in css or sass, etc.), do the following.

  • Place the cursor in the symbol text
  • Hit F2 to open the cursor name in a popout panel
  • Type the new name and hit Return
  • The symbol will be renamed everywhere it occurs in the document

You'll note how this is scope-sensitive through Intellisense.

Refactoring via Extraction

You can extract a function sitting inside another function and refactor it to it's own function of various scope types decided upon by Intellisense.

  • Select the text comprising the function you'd like to extract
  • Hit Cmd + . and select one of the options that pops up
  • After selecting the option, the name of the new function will hilite (if not anonymous, etc.) allowing you to rename it on the spot.

Code Formatting

Select the code you want to pretty-format and select Cmd+K Cmd+F. The code will be formatted by the Unbound built-in formatter.

Code Folding

  • To fold all foldable areas in the code at once, hit Cmd+K Cmd+0.
  • To unfold all foldable areas in the code at once, hit Cmd+K Cmd+J.

Using Cmd+K Cmd+1 through Cmd+5 will also fold those child sections of code.

Remember Cmd+K Cmd+J will always unfold everything.

Errors & Warnings

When there are errors in the document, F8 will cycle through all of them, popping up an explanation of the error.

Correcting these errors will remove the red hilight from the sidebar.

Typescript Type Checking

Typing

// @ts-check

or

// @ts-nocheck

at the top of a javascript or typescript file will enable/disable typescript type checking. Note: this means you can use typescript checking on a regular js file even though it's not typescript.

CSS Comment Region Folding

You can create a manually folding region in CSS by enclosing the area between two comment lines:

/* #region */
.foo {
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  font-size: 21px;
  line-height: 1;
}
/* #endregion */

Actually, this seems to work in a number of languages, including SASS, LESS and javascript plus frameworks but the documentation just states CSS.