sahilrajput03

Learn vscode

VScode Amazing shortcuts

Add eslint settings to your vscode directly

settings.json

"eslint.options": {
	"overrideConfig": {
		"rules": {
			"no-multiple-empty-lines": ["error", { "max": 1, "maxBOF": 0, "maxEOF": 0 }],
		}
	}
}

Useful new shortcuts - DATE - 27 August, 2023

  1. Use ctrl+enter in Pallete to open file with Open to the Side feature. This always open the file in the right column of the currently active column.
  2. ctrl+g g for switching git section in vscode.
  3. ctrl+1 to switch from any left bar menu (search/git/etc) to code editor.
  4. ctrl shift - to go forward in history (shift means uppercase i.e., move forward in time)
  5. ctrl alt - to go backward in history (move backward in time)
  6. alt+k s to open VS Code keybindings

Some more information on above above keybindings:

1. (default from vscode)
2. (default from vscode)
3. (default from vscode)
4. (default from vscode) { "key": "ctrl+shift+-", "command": "workbench.action.navigateForward", "when": "canNavigateForward" }
5. (default from vscode) { "key": "ctrl+alt+-", "command": "workbench.action.navigateBack", "when": "canNavigateBack" }
6. (my custom keybinding)

Navigate Errors fastly ❀️ ❀️:

image

Useful Refresh button to update recenty made commits locally on current branch

image

That’s how you track which remote the vscode is tracking

You need to hover that area on the bottom of vscode where the branch-name is shown like that-

image

Use Git Delete Branch to delete branch

Why? Because it is more handy than to type branch’s name in the terminal β™‘ πŸ’œ

image

Primary Sidebar vs. Secondary Sidebar

image

Click here

image

Git lens - Viewing diff for current file or all files of a commit

image

Amazing three way commit view and comparing with base for both (current,incoming changes)

Superawesome video: Click here

Git lens - Viewing previous commits of current branch - Awesome

image

Git lens - Opening git diffs active file or all files of the commit

image

Git lens

image

viewing latest contributions made by you

It is so awesome like that as you can see diff in vscode itself with that!

image

creating branch and switching branch like that is very very effecient and handy

image

Using a two-level fold works so awesome in a function/class where we hav lots of methods/functions

image

You can automatically organize imports as well via that:

image

Go to matching pair emmet

I added a new shortcut.

image

Make vscode autoimport paths to to be relative path instead of absolute path

Source: Click here

Below worked awesomely for me:

image

Source: Click here

// For example the following text would act as link in vscode: file://./scripts/deployKryptoBird.js

vscode cli options

image

Swithing to terminal to run a bash script or npm command very often?

Consider using a .vscode/tasks.json file (you can autogenerate this file with vscode very easily). I personally use ctrl+alt+r keybinding to launch run tasks, yo!!

{
	"version": "2.0.0",
	"tasks": [
		{
			"type": "shell",
			// "command": "pwd", // for testing.
			"command": "./fso-part13/curls/post_note.sh",
			"label": "post a note ~Sahil"
		},
		{
			"type": "shell",
			"command": "./fso-part13/curls/get_a_note.sh",
			"label": "Get a note ~Sahil"
		},
		{
			"type": "shell",
			"command": "./fso-part13/curls/resetNotes.sh",
			"label": "Reset notes table! ~Sahil"
		}
	]
}

Vscode Extensions

Install All my Extensions: Click here

image

Change project folder very fast

Press ctrl+r and choose from recent projects:

image

or you can do it like that:

image