Visual Studio Code (VSC) and most useful extensions
What is Visual Studio Code?
Visual Studio Code is a free lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, HTML, PHP, Go).
Visual Studio Code combines the simplicity of a source code editor with powerful developer tooling, like IntelliSense code completion and debugging.
Fun fact: It was made with Electronjs.
Installation
In case you dont have it, go to the direction visualstudio.com/Download, then you should select the option that is suitable for you. If you are in Windows, the best one is the "User installer" (take care with the 64/32 bits version). If you are in Linux, you should already know which format you will download and if you are in macOS, there is only one version for you.
After running the installator and following the steps, you should have already installed the Visual Studio Code in your computer.
Interface
VSC's User Interface
| Letter | Description |
|---|---|
| A | Standard Menu bar. |
| B | In the left-top there is the Activity Bar. It contains the Files Explorer, Search, Source Control, Debug and Extensions. |
| C | In the left-bottom there are the VSC and Accounts settings. |
| D | This is the Side bar, that depends on the option selected in the Activity Bar. |
| E | In the left of the Status Bar you can select the version of compiler, configure some extensions and other things of VSC. |
| F | In the right of the Status Bar you can change the identation, encoding of the file and other things related to the file. |
| G | Tabs to select between the opened files. |
| H | Here you can run the file or change the way you visualize the file. |
| I | This is the main area where you edit your files. |
| J | Minimap of the code. |
| K | Here you can find the terminal, errors and everything generated by your code. |
Most used shortcuts
| Shortcut | Description |
|---|---|
| Ctrl+N | Create a new file. |
| Ctrl+S | Save the changes in the current file. |
| Ctrl+Shift+S | Save file as. |
| Ctrl+O | Open a file. |
| Ctrl+K+U | Comment current line / selection. |
| Ctrl+} | This work only in latino keyboard. Comment current line / selection. |
| Ctrl+K+O | Open a folder. |
| Ctrl+W | Close current file. |
| Ctrl+Tab | Swap to a file already open. |
| Ctrl+` / Ctrl+Ñ | Open a terminal. |
| F5 | Debug start view. |
| Alt+Click | Add another cursor. |
| ALT+↑/↓ | Move up/down the current line. |
| Ctrl+K+S | Check/change current shortcuts. |
Most useful extensions no matter which language you are coding at
| Extension | Description |
|---|---|
| Live Share | This works as a CodeShare, but you are actually sharing the files and the terminal of your computer with someone. |
| Bracket Pair Colorizer 2 | This will colorize the brackets in your code, so you won't get lost which bracket close which one. |
| Path Intellisense | This will help to see the files/folders are in the path after you write "../". |
| Material Icon Theme | This will change the icons of the files. It helps to visualize them better. |
| Excel Viewer | This will show the ".csv" files in a Excel way. |