sahilrajput.com

Learn vscode

• My Vscode settings.json and keybindings.json: Click here
• Vscode Tips and Trick (Official Docs): Click here
• Open same solder in two windows of Vscode: From command pallete(ctrl+shift+p), use Workspaces: Duplicate Workspace in New Window option. Source. Tip: Use dupl as filter to get that option faster.
• Terminal Renaming and Colouring: Click here
• Set git-bash as default terminal for vscode: Add "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe" to settings.json.
• VsCode for Web (Official): Click here

VScode Amazing shortcuts

• fn+f12 - Go to Definition (mostly useful)
• fn+shift+f12 - Go to References
• fn+ctrl+f12 - Go to implementations
• fn+rightCtrl - Show right click menu (Awesome)
• 🛑 f8 to cycle through errors
• 🚫 💣 ctrl+k ctrl+i replicate mouse over for e.g., to see an error
• 🚀🚀 ctrl+alt+rightArrow and ctrl+alt+leftArrow to move a tab from one of two split editors to another
• 👻 ctrl+alt+j to open Join collaboration link text input

External browser for opening links can now be set in vscode

Check this setting in vscode: workbench.externalBrowser

Duet AI in vscode ~ Google

• Duet AI for Developers (Free until - February 1, 2024): Click here
• Docs: Click here
• Fireship Io’s Video: Click here

1 / n

2 / n

3 / n

I am selecting my project from google

4 / n

5 / n

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 ❤️ ❤️:

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

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-

Use Git Delete Branch to delete branch

Why? Because it is more handy than to type branch’s name in the terminal ♡ 💜

Primary Sidebar vs. Secondary Sidebar

Click here

Open Jira tickets or other work management tickets via Autolinks feature of git-lens

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

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

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

Git lens

viewing latest contributions made by you

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

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

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

You can automatically organize imports as well via that:

Go to matching pair emmet

I added a new shortcut.

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

Source: Click here

Below worked awesomely for me:

In vscode you can reference file as links as well

Source: Click here

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

vscode cli options

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

• EditorConfig for VS Code (official site of editorconfig)
• Colorful Comments Refreshed
• Error lens
• Create Bitbucket pull request, Extension id: ramiroberrelleza.bitbucket-pull-requests
• TODO Tree Extension: officia vscode video
• Bookmarks Extension: source-stackoverflow

Change project folder very fast

Press ctrl+r and choose from recent projects:

or you can do it like that: