Visual Studio Code Notes

Visual Studio Code Notes


Last Updated: November 01, 2022 by Pepe Sandoval



Want to show support?

If you find the information in this page useful and want to show your support, you can make a donation

Use PayPal

or

Use/Enable Monetization

Not Monetized

This will help me create more stuff and fix the existent content...


Visual Studio Code

Shortcuts

Shortcut Meaning
Ctrl+ Shift + P Open Command Palette
Ctrl+ N Create new generic file
Ctrl+ Alt + Win + N Create new file with commander
Ctrl+ S Save
Ctrl+ Shift + S Save As...
Ctrl+ F4 Close current file
Ctrl+ o Open file...
Ctrl+ k ; Ctrl+ o Open folder...
Ctrl+ b Toggle Open/Close File Explorer
F2 Rename file/folder
Ctrl+ F2 Refactor/Change all ocurrences in code
Ctrl+ Shift + L Refactor/Change all ocurrences in code
Ctrl+ ` Open terminal
Shift+ Alt + F Try to fix Indentation
Ctrl+ , Open Settings
Alt+ Z Toggle Wrap Lines
Ctrl+ / Toggle comment
Shortcut Meaning
Alt+ Move line up/down
Shift+ Alt+ Duplicate line up/down
Ctrl+ L Select line
Ctrl+ G Go to line
Ctrl+ K ; W Close all tabs

Basics

  • Install: Just download and install the VS Stable Build from VS official Page
  • Preview mode Single-click just opens a file in preview mode to actually open the file in a new tab you need to double-click
  • Auto Save Go to Files -> Auto Save to enable it
  • Split Drag and drop opened files to sides or click the Split button views
  • 'Open in Editor' to show context lines thath can be changed or disabled, double click on search tab words opens file
  • Regex VS basic examples:
    • Wh(e|i|o) : OR letters
    • g(oog)+le : one or more pattern of words
    • ^code begin with certain word
    • code$ end with certain word
  • To replace indivially click on individual 'Replace' button that appear on the matches
  • To replace all just clik on othe 'Replace All' button
  • Consider the 'Preserve Case' button and 'Refresh' if there are new changes
  • Exclude/Include files and folders using the three dots (···) on the search bar to show the 'Toggle Search Details'
  • Consider the 'Use Exclude Settings and Ignore Files' to easily ignore folders like .git, node_modules, json config files, etc

VS Terminal

  • code .: Use it on the folder to open it on VS
  • code --version: use it to check VS code full version info
  • code <file_paths>: use it open one or more files in VS code
  • Go to View -> Terminal to open terminal and use +▼ button to select which terminal or to open multiple terminals
    • VS terminals
  • code --help for common help of code command

VS Settings

  • To open settings go to File -> Preferences -> Setting or Ctrl + ,

  • Click on gear icon to reset setting to default

  • Common Settings : Font size: 16, Tab size, Auto save, Render Whitespace: trailing, Insert spaces

  • Switch between tabs and spaces: Ctrl + Shift + P or on the bottom Blue bar click on the Spaces: N label then select the Convert Indentation to Tabs or Convert Indentation to Spaces

  • Change number of spaces: Open command palette (Ctrl + Shift + P) or on the bottom Blue bar click on the Spaces: N label then select the Indent Using Spaces

  • Change theme go to File -> Preferences -> Color Theme (Ctrl + K ; Ctrl+ K) : Use Dark+

  • Open Settings and type Minimap for the checkbox to enable/disable

  • Change Language specific settings: Open command palette and select the Preferences: Configure Language Specific Settings... and select the language to modify Language

    • If you modify the User [LANG] this is a global change
    • If you modify the Workspace [LANG] this is a local change only applicable to the workspace
  • Check settings JSON file: Open command palette (Ctrl + Shift + P) and select Preferences: Open User Settings (JSON) or Preferences: Open Default Settings (JSON)

  • Consider enabling Bracket pair colorization

  • Customize the terminal

    1. Open JSON settings file (Ctrl + Shift + P + Preferences: Open User Settings (JSON))
    2. Add the customization you want from here: Theme Color, for example:
      "workbench.colorCustomizations": {
        "terminal.background": "#07053b",
        "terminal.foreground": "#ffffff",
       }
      
  • Set Custom Keyboard Shortcuts

    1. Go to File -> Preferences -> Keyboard Shortcuts (Ctrl + K ; Ctrl + S)
    2. Click on Open Keyboard Shorcuts (JSON) button file to open JSON file and add shorcuts there, for example:
      // Place your key bindings in this file to override the defaults
      [
        {"key": "Ctrl+U", "command": "workbench.action.files.openFile"}
      ]
      
    3. Go back to list of shorcuts and search for the command, for example "workbench.action.files.openFile" in this case and verify it is mapped to specified shortcut ("Ctrl+U" in this example)
    4. (optional) you can add a When condition

Extra Setups

Sync files with remote system ftp-sync

  1. Install git for windows and make sure it works by doing git --version in a cmd prompt
  2. Install ftp-kr plugin in Visual Studio Code
  3. Open folder you want to sync in Visual Studio Code
  4. Click F1 to open the commands input and enter ftp-kr: Init to open the ftp-kr.json config file
  5. Fill the remotePath (Make sure a folder with the same name you put in here exists in the remote system), host, username, password,protocol and port. For example
    {
        "host": "192.168.1.94",
        "username": "myuserhere",
        "password": "mypasswordhere",
        "remotePath": "/home/jose/jms-box",
        "protocol": "sftp",
        "port": 22,
        "fileNameEncoding": "utf8",
        "autoUpload": true,
        "autoDelete": true,
        "autoDownload": false,
        "ignore": [
            ".git",
            "/.vscode"
        ]
    }
    
  6. Type F1 and enter ftp-kr: Upload All in the command input and you should see if uploads files in the Output, every time you save a file it should be uploaded automatically as well

Use bash as terminal on Visual Studio Code

  1. Install git for Windows

  2. Opens User Settings file (File -> Preferences -> Settings) then click on the brackets icon ({}) to open in JSON

    • To open User Settings file you can also do Ctrl+Shift+P or F1 to open the commands input and type Preferences: Open Settings
  3. On the user settings side (right-side) add to the JSON file: "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe". For example it may look like this:

{
    "editor.detectIndentation": false,
    "files.trimTrailingWhitespace": true,
    "diffEditor.renderSideBySide": true,
    "git.autofetch": true,
    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
    "window.zoomLevel": 0
}
  1. (Optional) Add a .bashrc in your home (~) for your aliases and stuff, execute: cd; echo alias ll=\'ls -alF\' >> .bashrc
Want to show support?

If you find the information in this page useful and want to show your support, you can make a donation

Use PayPal

or

Use/Enable Monetization

Not Monetized

This will help me create more stuff and fix the existent content...