VSCode

Open directory in new window

code -n path/to/your/project

or if already in the directory

code -n .

Keyboard Shortcuts (Windows)

Toggle terminal

<CTRL> + <J>

Open command palette

<CTRL> + <SHIFT> + <P>

Select current line

<CTRL> + <L>

Select block

<SHIFT> + <ALT> + <KEY right>

Copy line up/down

<SHIFT> + <ALT> + <KEY up/down>

Move line

<ALT> + <KEY up/down>

Delete line

<CTRL> + <SHIFT> + <K>

Insert line below

<CTRL> + <ENTER>

Insert line above

<CTRL> + <SHIFT> + <ENTER>

Insert cursor

<ALT> + <CLICK>

Undo inserted cursor

<CTRL> + <U>

Insert cursor to end of each selected line

<CTRL> + <ALT> + <I>

Select all occurrences of find match (ctrl + f)

<ALT> + <ENTER>

Select all occurrences of selected text

<CTRL> + <SHIFT> + <L>

Show all occurrences of word where the cursor is

<CTRL> + <F2>

Add selection to next find match of selected word

<CTRL> + <D>

Jump to closing bracket

<CTRL> + <SHIFT> + <^>

Make a block comment

<SHIFT> + <ALT> + <A>

Fast scrolling

<ALT> + scroll

Prettier

Local Configuration

Install Prettier - Code formatter (prettier.io)

// In the settings.json (<CTRL> + <,>, click icon on the top right)
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
// This line only if prettier should auto format on save
"editor.formatOnSave": true
}

// Manual formatting on Windows (if auto save is turned off)
<SHIFT> + <ALT> + <F>
// on Linux
<SHIFT> + <CTRL> + <I>
or
<CTRL> + <SHIFT> + <P> and search for "Format Document", then hit <ENTER>

Optional: Local Configuration

// Optional: Local Configuration
1. create a ".prettierrc" file in the projects root directory
2. Add configuration to the file, e.g.:
{
"semi": true, // adds semicolons at the end of a statement
"singleQuote": true, // uses single quotes instead of double quotes
"tabWidth": 2,
"trailingComma": "es5"
}

// Example settings.json with extended configuration
{
"[javascript, typescript, json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.semi": true,
"prettier.singleQuote": true,
"prettier.tabWidth": 2,
"prettier.trailingComma": "es5"
}

Configuration for Teamwork

1. Install prettier package (on dev branch)

npm install -D prettier

2. Configure package.json

"scripts": {
  "format": "prettier --write .", // formats everything
  "format:check": "prettier --check ." // check formatting (CI/PR checks)
}

3. Create .prettierrc in the root folder of your local repo

touch .prettierrc

4. Add configuration options to .prettierrc

{
  "singleQuote": true,
  "semi": false,
  "trailingComma": "all",
  "printWidth": 80
}

5. Add and commit

git add .prettierrc
git commit -m "Add Prettier config"
git push

6. Set up editor to format on save

Enter VSCode settings: ctrl + ,

✔ Format On Save → enable
✔ Default Formatter → Prettier – Code Formatter

Now every Ctrl+S (or Cmd+S) formats the file.
Prettier VSCode extension is now no longer needed

7. Optional: install husky (npm package) to auto-format on commit

8. Recommended for professional setup: .editorconfig and .gitattributes End-of-line issue on Windows vs. other (Windows has CRLF, others have LF)

.editorconfig # shared team rules for editor (vscode)
[*]
end_of_line = lf
indent_style = space
indent_size = 2
charset = utf-8
insert_final_newline = true

.gitattributes # Controls how Git treats files
* text=auto eol=lf
*.bat text eol=crlf

9. Best-practice for Windows setup (prevents Git from silently rewriting files) CRLF is not needed anymore, even on Windows git config --global core.autocrlf false

Snippets

File/Preferences/Configure Snippets

Choose:

- “New Global Snippets file…” for a global file

or

- “New Snippets file for …” for the current project

or

- Choose a language from the list for a language specific snippet

{
"Backtick block": {
		"scope": "javascript, typescript, markdown",
		"prefix": "bb",
		"body": [
			"```${1:js}",
			"$0",
			"```"
		],
		"description": "A block of backticks"
	},
}

// prefix: How the snippet is started from vscode
// $0: the final cursor position
// $1, $2, $3, etc.: tab stops

Ignore Files For Live Share Extension

Create a .vsls.json in the main folder

{
    "$schema": "http://json.schemastore.org/vsls",
    "gitignore":"none",
    "excludeFiles":[
        "*.p12",
        "*.cer",
        "token",
        ".env"
    ],
    "hideFiles": [
        "bin",
        "obj"
    ]
}

excludeFiles: Files are completely inaccessible to participants

hideFiles: Files are hidden from the file tree but still accessible if requested