Skip to content

VsCode.md

Latest commit

 

History

History
270 lines (219 loc) · 18.4 KB

VsCode.md

File metadata and controls

270 lines (219 loc) · 18.4 KB
Raw

Visual Studio Code Tips And Tricks

My Favorite Visual Studio Code Shortcut Keys

(with Resharper 9 Keybindings and Visual Studio Keymap extensions )

Shortcut Key Action
ALT+ARROW UP/DOWN Moves (selected) line/lines up or down
ALT+F12 Find All References
ALT+Insert Insert New File
ALT+Insert+F Insert New Folder
ALT+O Switch from Code-behind to/from razor files (ASP.NET Core Switcher Extension - adrianwilczynski)
ALT+SHIFT+ARROW UP/DOWN Moves (selected) line/lines up or down
CTRL- Zoom out
CTRL+- Navigate Back
CTRL+, Open Settings
CTRL+. Quick Fix
CTRL+/ Split Editor
CTRL+ Zoom in
CTRL+7 Comment Line (toggle)
CTRL+ALT+C Create New Git Branch (own Keyboard short cut)
CTRL+ALT+L Reveal Active File in Explorer
CTRL+ALT+B Show/Hide GitHub Copilot Chat Window
CTRL+ALT+B+ENTER Hide GitHub Copilot Chat Window
CTRL+K, I GitHub Copilot Fix This
CTRL+ALT+T Surround with ... (Surround Extension - Mehmet Yatkı)
CTRL+ARROW LEFT/RIGHT Move to Next Word
CTRL+B, CTRL+B Copy current branch name [install extension 'Copy name of current git branch' ]
CTRL+Q Show/Hide Terminal
CTRL+C,C Clear Console
CTRL+C Copy (no need to select line)
CTRL+D Copy Line Down (no need to select line)
CTRL+F,F Focus Editor (workbench.action.focusActiveEditorGroup)
CTRL+F Search in File
CTRL+H Search and Replace in File
CTRL+J Toggle Bottom Panel Visibility
CTRL+K+C or CTRL+/ Comment/Uncomment Line
CTRL+K+D Format Document
CTRL+K+S Shows VsCode shortcuts
CTRL+K+W Close All Documents
CTRL+L Delete Line (no need to select line)
CTRL+M Go to Type Declaration
CTRL+N,N New File...
CTRL+P Go to File
CTRL+S Pin tab/Unpin tab
CTRL+SHIFT+. Show methods, properties, fields of a TypeScript class
CTRL+SHIFT+D Focus Debugger
CTRL+SHIFT+E Toggle Solution Explorer (toggleSideBarVisibility)
CTRL+SHIFT+F Search in All Files
CTRL+SHIFT+G Open Source Control Panel
CTRL+SHIFT+H Search and Replace in All Files
CTRL+SHIFT+O Shows list of methods, properties, fields of active field
CTRL+SHIFT+ö Opens External Terminal in Project Root
CTRL+SHIFT+P -> Balance (outward) Select a whole HTML tag
CTRL+SHIFT+P Command Palette
CTRL+SHIFT+R Rename Symbol
CTRL+SHIFT+T Open New Terminal
CTRL+SHIFT+TAB Toggle backwards through Tabs
CTRL+SHIFT+W Selection Shrink
CTRL+TAB Toggle through Tabs
CTRL+W Close Active Document
CTRL+X Cut (no need to select line)
ESC+ESC Exit Zen Mode
F2 Rename Symbol
SHIFT+ALT+(arrow key) Column (box) selection SHIFT+option+(arrow key) on mac mini
SHIFT+ALT+(drag mouse) Column (box) selection
SHIFT+ALT+ENTER Toggle Zen Mode
SHIFT+ALT+F12 Find all References
ALT+F5 Starting Live Server
SHIFT+ALT+F5 Stopping Live Server

My Favorite VsCode Extensions

Extension Description
.NET Core Test Explorer Text Explorer for .NET Core (MSTest, xUnit, NUnit)
ABPx Snippets for ABP that start with an x
ASP.NET Core Switcher Switch from Code-behind to/from razor files
Auto Close Tag Automatically add HTML/XML close tag, same as Visual Studio IDE does
Auto Self Close Tag by Zeeshan Ahmad Automatically removes the closing tag when entering a slash in the first
Auto Import Provides code actions and code completion for all available Typescript
Auto Rename Tag Renames the corresponding html tag
C# Dev Kit C# Dev Kit enhances VsCode by adding a set of powerful tools and utilities
C# Extensions - JosKreativ C# IDE Extensions for VSCode
C# C# for Visual Studio Code (powered by OmniSharp)
Code Spell Checker Spelling Checker for Visual Studio Code
CodiumAI Integrity Agent powered by GPT3.5&4
ColorTabs - Ore Poran Changes the active tab/status-bar/title-background
Copy name of current git branch Copy name of current git branch [do not forget to assign shortcut key]
Error Lens - Alexander Improve highlighting of errors warnings and other language diagnostics
ES7+ React/Redux/React-Native snippets ES7 Extension by dsznajder
GitHub Pull Requests Manage Your Pull Requests for a Repository from VSCode
Inline Fold - Mohammed Alamri A custom decorator that "fold" matching content in a single line
html tag Wrapper - hwencc wrap selected html tag by press ctrl+i, change the wrapper tag name too
Lorem Ipsum Generates and inserts lorem ipsum text into Visual Studio Code
Markdown Extension Pack Extension pack with some of the most popular Markdown extensions
Markdown Table Sort Sorts a Markdown Table
Mintlify Doc Writer AI powered documentation writer
Prettier Code Formatter for Visual Studio Code
Project Manager Switch projects easily
Razor+ Improved Razor syntax colorization for VS Code
Remove Comments - plibither8 Remove all comments from your code at once!
Resharper 9 Keybindings Port of Resharper 9 Keybindings
Sort JSON Objects Sorts the keys within JSON objects
Surround Surround with ... (Surround Extension - Mehmet Yatkı)
TabNine Code Faster with the All-Language AI Assistant for Code Completion
Tailwind CSS Intellisense - Tailwind Labs Intelligent Tailwind CSS tooling for VS Code
Tailwind Fold - Stivo Intelligent Tailwind CSS tooling for VS Code
Headwind - Ryan Heybourn Sorts and organizes Tailwind CSS classes
Thunder Client Lightweight Rest API Client for VS Code
Todo Tree Shows all the TODOs in your code
Visual Studio Keymap Ports popular Visual Studio keyboard shortcuts to Visual Studio Code
VS Sharper for C# VS Sharper VS Code Extension for C#
vscode-icons Icons for Visual Studio Code
vscode-pdf Display PDF files in Visual Studio Code
Prisma Visual database management UI
indent-rainbow A simple extension to make indentation more readable

Customize Settings

Change Shortcut to Pin/Unpin Tabs in VSCode

    // File -> Preferences -> Keyboard Shortcuts (CTRL+K, CTRL+S)
    search for workbench.action.pinEditor : assign shortcut key (CTRL+S)
    search for workbench.action.unpinEditor : assign shortcut key (CTRL+S)

Change Location Debug Toolbar

    // File -> Preferences -> Settings
    search for **Tool Bar Location**: change from **floating** to **docked**

Change Shortcut to Toggle Explorer in VSCode

    // File -> Preferences -> Keyboard Shortcuts (CTRL+K, CTRL+S )
    search for workbench.action.toggleSidebarVisibility : assign shortcut key (CTRL+SHIFT+E)

Set Command Prompt as default terminal

    // File -> Preferences -> Settings -> Terminal
    search for "terminal.integrated.defaultProfile.windows" set to  "Command Prompt"

VS Sharper for C# (Capital letter generating interface issue)

    // Navigate to folder below on WINDOWS machine
    // C:\Users\<YourUserName>\.vscode\extensions\eservice-online.vs-sharper-0.2.0\templates
    // Edit file csharpInterface.vstpl -> Update **Interface** to **interface**

Autoclose Brackets

    // File -> Preferences -> Settings  
    search for "autoclose" set Editor: Auto Closing Brackets to  "always"

Get rid off annoying sounds when working on a project

    // File -> Preferences -> Settings  
    search for "editor.accessibilitySupport" set to "off"

Open Markdown Preview by default in a new tab

"workbench.editorAssociations": {
  "*.md": "vscode.markdown.preview.editor"
}

ColorTabs settings in settings.json file

    "colorTabs.config": [
        {
            "regex": ".*",
        }
    ],
    "colorTabs.statusBarBackground": false,
    "colorTabs.titleLabel": true,
    "colorTabs.ignoreCase": true,

Prettier settings in settings.json file

  "prettier.jsxSingleQuote": true,
  "prettier.bracketSameLine": true,
  "prettier.bracketSpacing": true,
  "prettier.htmlWhitespaceSensitivity": "ignore",

Wrap an HTML-element with another HTML-element

    // File -> Preferences -> Settings -> Keyboard Shortcuts 
    search for "editor.emmet.action.wrapWithAbbreviation" 
    and assign a keyboard shortcut, I use CTRL+W,CTRL+W

Auto rename HTML tags

    // Open settings.json and add 
    "editor.linkedEditing": true

File Nesting

Controls whether files are automatically nested

Open Settings in VsCode and enter File Nesting in the Search Bar

Enable File Nesting.

Search for File Nesting: Patterns and add the following entry

Patterns File Nesting.

Go to File -> Preferences -> Settings -> Search for: File Nesting Explore > Check File Nesting: Enabled

Add a Pattern in Explore > File Nesting Patterns

  • Item: *.razor
  • Value: ${capture}.razor.cs, ${capture}.razor.css

Set the Commit button to Commit & Push in Source Control window

Go to File -> Preferences -> Settings Search for Post Commit Command and select push in Git:Post Commit Command dropdown

On a Mac

Create a Quick Action to open a Folder in VsCode with Finder

  1. Open Launchpad
  2. Search for Automatorand open it
  3. Select Quick Action
  4. Search for Open Finder items and drag and drop it
  5. Set workflow to Finder => in any application (choose Finder.app)
  6. Choose a Custom Image if you want to
  7. Set the Open Finder Items to VsCode
  8. Save the Quick Action. File -> Save

Remove Keybinding that closes Application keyboard shortcut in VS Code

  1. Settings -> Keyboard Shortcuts -> Search for CTRL+Q that closes Application
  2. Remove the keybinding

Remove CTRL+C Keybinding that closes Terminal

  1. Settings -> Keyboard Shortcuts -> Search for CTRL+C that closes Terminal
  2. Remove the keybinding

CTRL+Z Shortcut Stops a Process in the Terminal

Set Enable Preview to false

  1. Settings -> Search for Workbench Enable Preview
  2. Uncheck checkbox