https://console.firebase.google.com/project/pepedocs-ecf95/storage/pepedocs-ecf95.appspot.com/files?hl=es-419

Visual Studio Code

Shortcuts

• VS Shortcuts

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
• Outline Use the Outline section to explore symbol of the currently opened file (Classes, methods, varaibles, etc)
• Peek Right click element of your code, then select Peek and choose what you want to peek (Definition, declaration, references, callers), the result will be displayed in an embedded editor
• Wrap tabs: When you have many file tabs to avoid scrolling through all of them from left to right, you can group them in multiple rows
  • Preferences -> Settings -> Write Wrap tabs -> check to enable it
• Pin Tabs Keep one or more file tabs pinned with right click and Pin option (Ctrl + K ; Shift + Enter)
• Custom Fold regions You can create custom regions that can be hidden/shown
  1. Add a comment before the code section you want to include that starts with #region <Optional Name for region>
  2. Add a comment at the end of the code section that starts with #endregion

Search

• '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
  • 
• 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

• Sticky Scroll In settings search for Sticky Scroll, enable it and (optional) set nested scopes, recommended is 5

• 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

Workspaces in VS

• Single folder Workspace only one folder opened
• Multi-root Workspace
  • Multiple folders opened (not necessarily related)
  • You can configure settings at a workspace level
  • Enables search in multiple folders or repos
  • How to create a VS Workspace:
    1. Go to File -> Add Folder to Workspace select the folder and add it, this will create an UNTITLED Workspace
    2. Repeat prev step to add more folders to the workspace
    3. Go to File -> Save Workspace as... save the .code-workspace file with a name
    4. To close Workspace go to File -> Close Workspace (Ctrl + K + F) and reopen it with File -> Open Workspace from File... and using the .code-workspace file

VS Extensions

• Install/Uninstall an Extension

  1. Open Extensions menu (Ctrl+Shift+X)
  2. Search/Find the extension you want to install/uninstall
     • You can select Released or Unreleased version
     • You can click on Gear icon to Uninstall, Switch version or Install a differemt version
     • You can use search filters with @like @category, @builtin, @sort:rating, etc. and combine them. Example: @category: "themes"

• You can use Gear icon on the Installed extension to Enable/Disable it if you don't want to use it at the moment for some reason, for example disable Python Extension to work on a Non-Python related project

  • Disabled all extensions go to command palette (Ctrl + Shift + P) and select Extensions: Disable All Installed Extensions

• You can disable auto-update on extensions if you go to command palette (Ctrl + Shift + P) and select Extensions: Disable Auto Update for All Extensions

• To enable a formatter/linter you need to:

  1. Install a formatter/linter extension (i.e.: Prettier or ESLint) and you may also need extra package or SW in your system for the linter to work
  2. Create a Linter or Formatter config file (if needed)
  3. Update the seetings if needed
  • For a Formatter for example:
    • On Settings set the Default Formatter
    • On settings Enable the Format On Save

• To customize an extension settings go to Gear icon -> Extension Settings

• Live Server extnesion to launch a dev server that reloads in real time, to avoid reloading the browser

VS Code Snippet

• A code snippet is like a template or re-usable code block that you can customize and use in your program, VS has 3 types of code snippets we can use: Built-in, Custom (defined by user), Downloaded (like extensions)

• Built-in on command palette (Ctrl + Shift + P) select Insert Snippet or on the editor write the name of the snippet and on the suggestion click on the one with for the snippet

• Downloaded you actually add an extension with snippets, to do this go to the extensions search bar write snippets find snippets for the language you want

• Custom on command palette (Ctrl + Shift + P) select Configure User Snippets -> Select Language define snippet in the template using the specified syntax, to remove snippet just delete it from that same file

Git in VS

• Use the + button on the source control panel (ctrl+shift+G) to stage changes and see a visual dif
• Use the TIMELINE section on the source control panel to check historical changes to a file
• Use the ↶ to discard changes to files
• If you use source control panel GUI to perform operatiosn you can see the git commands that are being executed behind the scenes in the Output pannel (View -> Output or Ctrl + Shift + U) select Git on the Dropodown that is on the right upper corner
• Source COntrol git Extensions:
  • Git Lens Visualize changes in files using graphs
  • Git Graph Visualize commits and branches ina dots graph like in Git GUI
  • Git History For sisual representations of git log and branch comparisons

Python in VS

VS Python Setup

1. Download official Python extension (The verified one released by MS)
2. Install python (Example on C:\Python\Python310) and make sure to select the Add to Path option
3. You can select or change the python interpreter being used on the right bottom corner
4. Setup a Python Linter (customize them in File > Preferences > Settings type Python)
   1. Install Pylint (official MS extension)
   2. Open command palette (Ctrl + Shift + P) and select Python: Select LInter then select one of the options or Disable Linting (Check Linting messages on bottom left corner)

Create Virtual env in VS

1. Create venv, on termina execute python -m venv .venv (this will create a .venv folder)
2. Click Yes on the popup asking to select it to avoid activating it manually (You should see a change in your interpreter path)
   • .venv/Scripts/activate.bat or & c:/Users/jmsandov/repos/vs-sandbox/python_project/.venv/Scripts/Activate.ps1
   • 
3. Install packages you need (In windows it is recommended to use command prompt instead of powershell for this step to avoid permissions error)
   • python -m pip install matplotlib
   • 

VS Python Debugger

• Debugger common flow
  • Open debugger (Ctrl + Shift + D) and click on Run and Debug or click Debug Python File on the top right corner
  • Add breakpoints
  • If this is the first time it will ask you to Select Debugger configuration (you can usew the gear icon on the debugger to change configuration and open launch.json)
  • You can add variables or expressions to watch on the Watch section using hte + button or check the Local and Global variables

• In VS you can add special breakpoints
  • To add one first add a breakpoint then right click on it and select the type you want
  • To see output of special breakpoints you need to open debug console (not the regular terminal)
  • Types:
    • Logpoints / Log Message: Shows a particular value at particular point but doesnt stop execution (Use {} to add expressions i.e.: Value of n: {n})
    • Conditional / Expression: Stops only if a condition is True at a particular line (you just need to type an expression following the syntax rules of the language you are using)
    • Hit Count: Stops only after you have reached that breakpoint a certain number of times (you just need to indicate the number of times)

Jupyter Notebooks in VS

1. Install Official Jupyter MS extension (Usually installing python official MS extension also install this)
2. Make sure to install ipykernel with pip install ipykernel (if you don't do this VS code should prompt you to install it automatically)
   • This install the jupyter notebook kernel which is a runtime environment that executes the code that we write in a Jupyter Notebook.
   • When we edit a Jupyter Notebook, the notebook connects to the kernel of each particular programming language to run our code.
   • You can restar or interrupt execution of the kernel in a Jupyter notebook if you notice it is taking to long or something is wrong
3. Create a jupyter notebook:
   1. Open cmd palette (Ctrl + Shift + P) then select Create: New Jupyter Notebook
   2. This should create a untitled.ipynb file, save the file (Ctrl + S) and make sure to save it with .ipynb extension
4. Add/remove code or text (markdown) cells to run them
5. Drag and drop cells (make sure to move cursor to show the Hand cursor then just drag and drop)
6. Toggle line numbers using the 3 dots and the Show Cell Line Numbers option
7. You can use the Jupyter tab on the bottom bar top see the variables
8. You can copy/cut/paste/insert/join cells
9. When done you can export notebook to HTML, Python, PDF, etc. using the 3 dots and the Export option
   • For PDF export, you must have TeX installed. If you don't, you will be notified that you need to install
   • A workaround to create a PDF is to export to HTML and then save as PDF using your browser

Extra Setups

• VS online on Github You can go to any of your repositories on Github and click . to open a Github Codespace for your repository, which is basically a VS code online Editor
• Notepad++ keymap Extension To have notepad++ keymap on VS code

Markdown Extensions

• Markdown+Math used to support math equations (integrals, limits, sums, etc.)
• Markdown to PDF used to easily export to PDF and/or HTML
• Markdown All in One good for autocompletion and syntax higlight

Web dev Setup

Web dev extensions

• Web Accessibility Help to test accessibility
• Better comments Helpful to highlight comments with special characers
• Code Spell Checker Add spell checker for source code
• HTML CSS Support to check id and class attributes
• Live Server extension
  • Used usually for web development to automatically refresh a dev local server
  • Adds a "Go Live" button on the bottom right corner, you use the bottom to run/stop it

Emmet Abbreviations

• Write html tag names using special symbols without spaces: > (nested), +(one after another), *(repeat), ( ) (group), {content} (add content), # (add id), . (add class) then click enter i.e.:
  • div>u1>li
  • div>u1>li*5
  • div+div+p+img or (div*2)+p+img
  • a{Link text here}
  • div#id_name_here{this is a div}
  • div.class_name_here{this is a div}>img+p

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
}

4. (Optional) Add a .bashrc in your home (~) for your aliases and stuff, execute: cd; echo alias ll=\'ls -alF\' >> .bashrc