Common Visual Studio Shortcuts

Using Lorem Ipsum

You can use lorem followed by a number in Visual Studio Code to generate placeholder text quickly inside an HTML document.

<p>lorem20</p>

This expands to generate 20 filler words:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

Extensions

General

• Live Server ritwickdey.liveserver : allow for the website to auto-reload the changes made in code
• Mobile testing Setup: in Live Server setting, check the option to "Use Local Ip"; this will allow mobile devices to access the same website by putting in the same url, but make sure the phone is connected to the same Wifi
• Prettier - Code formatter esbenp.prettier-vscode : extremely useful code formatter for a variety of language
• Formats JavaScript , TypeScript , Flow , JSX , JSON , CSS , SCSS , Less , HTML , Vue , Angular , HANDLEBARS , Ember , Glimmer , GraphQL , Markdown , YAML
• Todo Tree gruntfuggly.todo-tree : highlight TODO and FIXME tags, and give a view of all those tags in a project
• The Todo Tree can be viewed in the left side panel.
• GitHub Copilot github.copilot : AI assistant

Ansible / YAML

• Ansible: (redhat.ansible)
• Has autocomplete for modules, syntax validation, and hover a module to see its documentation
• YAML: (redhat.vscode-yaml)
• Has YAML validation, autocomplete, and built-in Kubernetes syntax support

Javascript / Typescript

• ESLint dbaeumer.vscode-eslint : code analysis tool for Javascript and Typescript
• Requires the eslint npm package to be installed in the project to work: link
• It detect syntax error before compiling the code, enforce coding standards and best practices
• Document This oouo-diogo-perdigao.docthis : create a quick documentation template for a Javascript or Typescript function
• Right click the function name and select 'Document This'. Another shortcut is Ctrl + Alt + D, then Ctrl + Alt + D again
• Pretty TypeScript Errors yoavbls.pretty-ts-errors : makes typescript error easier to read

Java

• Extension Pack for Java vscjava.vscode-java-pack : provides Java IntelliSense, debugging, testing, Maven/Gradle support
• To create a project, type in VS Code command palette: Sprint Initializr: create Gradle project or Sprint Initializr: create Maven project
• Spring Boot Extension Pack vmware.vscode-boot-dev-pack : collection of extensions to develop Spring Boot projects
• https://spring.io/tools

GitHub Copilot

AI assistant integrating with VS Code (github.copilot), Visual Studio, XCode, JetBrains, and Neovim through extensions.

• Shortcut :
• Open inline chat in editor or terminal: Ctrl + I for Windows/Linux or Cmd + I for Mac
• Opens the chat view: Ctrl + Alt + I for Windows/Linux or Cmd + Alt + I for Mac
• Tab accepts suggestion
• Ctrl + Enter cycles suggestions
• Troubleshoot : Ctrl + Shift + P for Windows/Linux or Cmd + Shift + P for Mac and select Diagnostics > GitHub Copilot
• Documentation on Copilot : docs.github.com/en/copilot
• Doc on Copilot integration with VS Code : code.visualstudio.com/docs/copilot/reference/copilot-vscode-features
• Smart Actions : code.visualstudio.com/docs/copilot/copilot-smart-actions
• Features :
• Code autocompletion
• Generating unit tests for functions; Copilot learns from context so well-documented code help
• Generating code snippets; can suggest code based on comments
• Explaining code snippets and bugs
• Creating sample data
• Making documentation, commits messages, alt text for images
• Commands : right click and selecting Copilot will also list the commands; using these help give context
• /explain : gives explanation for selected code
• /suggest : Offers code suggestions based on the current context
• /comment : Converts comments into code snippets
• /docs : Creates documentation for the selected function, class, or code block
• /tests : Generates unit tests for the selected function or class
• /setupTests : suggests appropriate testing frameworks
• /fix : fix code
• /edit : edit code
• /optimize : analyzeand improves runtime of the selected code block
• /help : get help on using Copilot
• Chat Participants / Agents : acts as domain experts that provide Copilot the context of that domain
• @workspace : give context about the code in your workspace so Copilot will consider the structure of your project, design patters, and how your code interacts
• @file : focus on content of specific file
• @directory : focus on content of specific directory
• @terminal : has context about VS code terminal shell and its contents; good for creating/ debugging terminal commands
• @vscode : has context about VS Code commands and features
• @azure : give context about Azure services and how to use, deploy and manage them.
• @github : allows you to use GitHub-specific Copilot skills: Details in link
• Modes :
• Ask Mode : fast, helpful, and focused on answering the question without touching your code; can ask any anything programming related even questions outside your project
• Edit Mode : allows Copilot to edit multiple files and then have you check which edits should be applied
• Drag all related files to the Copilot chat panel to tell it what to work on
• The "Add Context" button lets you add file from outside the workspace
• Agent Mode : a more powerful version of Edit mode except it's more automated and applies most edits without waiting for explicit approval
• The amount of context it can hold is limited so it might forget what it wrote at the beginning later on.
• Writing specific custom instructions can help keep it consistent. Example here.