Vs Code is a famous code editor developed by Microsoft, if you never used it before, the time is now, and who stoped to use, make sure about it after you read the tips!! hahaha

Here you’r going to get some vs code tips to be more productive and work fast. Bunch of this tips are hotkey, where i’m going to release throught the article and you can save them to memorize. There is a list of top 10 extensions too, to help you on coding, organizing and thinking.

Hotkeys

Some of them you probably know about, but if don’t, i’m sure that’s going to help you soo much ;)

So, checkout the list bellow (clicking on a hotkey you can see how to use and some examples).

• Open error window
  • ctrl + shift + m
• Switch theme
  • ctrl + k and them ctrl + T
• Search files on the project
  • ctrl + p
• Vs Code settings
  • ctrl + ‘
  • Here you can active the “Word Wrap” option, which breaks the line into your vision field
• ZEN MODE ( Good for focus )
  • ctrl + k them press ‘z’
• Side by side tabs ( edit 2 files or more in the same window
  • ctrl + (tab number). Example: ctrl + 2 opens the second file, ctrl + 3 open the third one, and goes …
• Close files
  • ctrl + w
• Change file
  • ctrl + tab
• Reopen files recently closed
  • ctrl + shift + t
• See running extensions ( this one is to who get lag on vscode and want to see the size of downloaded extensions
  • ctrl + shift + p them type “running extensions”
• Edit equal words
  • ctrl + shift + l
• Search for equal words ( One at a time )
  • ctrl + d
• Move the code line
  • alt + up / down
• Select a specific line
  • ctrl + g
• Return to the lastest cursor position
  • ctrl + u
• Remove whitespace
  • ctrl + k and them ctrl + x
• Search for words
  • On the file: ctrl + f
  • On the project: ctrl + shift + f
• Delete whole word with backspace
  • Delete to the right: ctrl+ del
  • Delete to the left: ctrl + backspace
• Select words
  • ctrl + shift + left / right
• Delete line
  • ctrl + x
• Fast comment
  • ctrl + ;
• Minimize all file functions
  • ctrl + k and them ctrl + 0
• Open all file functions

With VS Code terminal

• Create new terminal
  • ctrl + shift + ‘
• Split terminal
  • ctrl + shift + 5
• Change editing terminal
  • alt + left / right
• Minimize terminal

Extensions

• Live Server - Local server with auto reload.
• Bracket pair colorizer: Objects and functions with brackets colorized to a easier identification on the code.
• CSS Peek: A css highlight while we edit our html.
• Javascript es6 code snippets: Code snippets to code faster.
  • Here are some usual snippets from the extension:
    • Import: imp
    • Import without a module: imn
    • Require: rqr
    • Export a class: ecl
    • Class constructor: con + tab
    • Class method: met
    • Getter: pge
    • Setter: pse
    • ForEach: fre
    • for of: fof
    • console log: clg
    • console error: cer
• Bookmarks: It bookmark important lines that you select.
• Polacode: Transform your code into an image. Pressing ctrl + shift + p and them typing ‘polacode’ to open.
• Better Align: Align your code / variable declarations pressing ctrl + shift + p and them typing ‘align’.
• Better Comments: Let comments / notes into your code
  • '* - ' Normal comment
  • '* + !' - Alert comment (Red)
  • '* + ?' - Doubt comment (Blue)
  • ' + ' - Emphasis comment (Darker)
  • '* + TODO' - Todo comment (Yellow)

That's it for today, I hope you all enjoyed that and makes a good use of it! This one is my first article that I write, so, I know that i got a lot of stuffs to improve, but for now is it!

Cover image font: tabnine.com/blog/top-vscode-themes