VS Code Flashcards
code directory
code . = to open VS code for current directory
this opens VS Code for that directory
ctrl +k ctrl+s
for keyboard shortcuts
command palate
ctrl+p = to search for files
it is quicker than using a directory tree to navigate
extension:Numbered bookmark extension
for book marking code
Create bookmark: Press key combination Ctrl+Shift+ to create a bookmark, where can be any number from 0 to 9.
Navigate to bookmark: Press key combination Ctrl+Alt+ to move to the bookmark location.
Delete a bookmark: Right click on the bookmark, in the bookmark margin.
Delete all bookmarks: Press key combination Ctrl+Alt+Backspace.
Information about bookmark: Mouse hover over the bookmark shows basic information about it, that includes bookmark number, file name, line number and column number.
How to use information: Mouse hover over the Green coloured bookmark in the Bookmark Margin shows the basic how to.
https://github.com/alefragnani/vscode-numbered-bookmarks
angular snippets
Angular 6 snippets; Mikael morlund and John Papa
Angular Snippets (Version 9)
There are snippets available for angular material; Ngxs and others
Integrated Terminal
we could also run the commands in the command palatte
like ctrl+p > npm install
Intellisense
auto completion
See details in a file
interfaces, methods and properties defined in a file
using @ in the command palate in a file
Peek definition
to see the definition of a variable like its class or interface
Go to References
right-click on an object to see list of references for that type
Rename symbol
To change the name of the class or any object in all the places; you can not rename predefined classes like Console.log
Extension: Paste JSON as code
copy all the json from web api response into a test.jsonfile and create a new file test.ts
open command palette- open > Paste JSON
it creates interface from the json data
Zen Mode
ctrl+k+z - view port with all the distractions removed. if we do not care about what our docker container is doing or git etc
Extension:vscode-spotify
for spotify music extension in vs code
Debugger
the bug icon
node works by default but if we need anything else we could add extension
This opens the local variables and Global variables
Debbuger Console
we have access to current state variables
global.testval = prints the value
Extension : Debugger for Chrome
for debugging the angular apps with chrome browser
once you start the debugger– environment - select chrome
this will create launch.json = change the port to 4200 for angular
it creates .vscode folder and adds launch.json file
Git changes
chagnes untracked files - green U Modified files - Yellow M files with lint errors are red you can type the message for commiting the changes
we could also revert the changes with the .. option in the git
we could revert the changes on a file by right click on revert
To add only some files - click the plus button and it stages them for commit
Extension : Gitlens
to get the git status
who changed what and when it was changed
it gives all the info like remote branches, git statsh, tags
and annotations
Extension: vscode live share
Extension: vscode live share
VS Code settings
file- preferences - settings
https://code.visualstudio.com/docs/getstarted/settings
managing extensions
https://code.visualstudio.com/docs/editor/extension-gallery
Real time sonarqube scan
https://blogs.sap.com/2019/12/25/real-time-code-scan-with-sonarlint-following-sonarqube-server-rules-in-visual-studio-codevs-code/
https://www.sonarlint.org/vscode
https://www.sonarlint.org/vscode
Prettier for code formatting
https://www.codereadability.com/automated-code-formatting-with-prettier/
https://www.xspdf.com/resolution/50756779.html#:~
:text=Prettier%20remove%20unused%20imports,json
%20%2D%2Dfix%20%2D%2Dproject%20.
Remove unused extensions ;
even with ctrl+shift+P =Ctrl shift P = command palette = Organize imports ; Format Documents (uses prettier)
https://wesleygrimes.com/angular/2019/02/14/how-to-use-tslint-to-autoremove-all-unused-imports-in-a-typescript-project.html
