VS-code tricks

import * as tools from "../js/tools.js"; await tools.init()

the palette¶

the palette is the swiss knife of vs-code
you activate it with ⌘-⇧-p (mac) or ⌃-⇧-p (windows)

Format Document¶

with this command use the palette to reach it you can ask vs-code to re-format the whole document

Indent Line and Outdent Line¶

bound to ⌘ [ et ⌘ ] respectively

select a block, these keys will help you move the code left or right

emmet¶

you can easily create repetitive stuff using this very handy tool - it is built into vs-code

e.g. you type

(div.the-class>ul>(li*2))*3

you get

<div class="the-class">
  <ul>
    <li></li>
    <li></li>
  </ul>
</div>
<div class="the-class">
  <ul>
    <li></li>
    <li></li>
  </ul>
</div>
<div class="the-class">
  <ul>
    <li></li>
    <li></li>
  </ul>
</div>

insert a wrapping tag¶

emmet wrap

one often needs to add wrapping tags in your html
typically wrap a <div> around a whole HTML fragment to create sophisticated layouts

to do this easily under vs-code :

• select the text you want to wrap

• in the palette type Emmet wrap with abbreviation

• enter the tag name

in pictures: if you need to add a wrapping <div> / </div> around some text
select it (can be multiple lines)

then activate the palette and search for ‘emmet: wrap with abbreviation’

select that function, you will be prompted for the name of the wrapping tag

matching tags¶

check out the extensions named “Auto Rename Tags”
with that in place, when you change e.g. a <div> into a <span>, the matching </div> gets renamed automatically as well

multiple cursors¶

you can set multiple cursors, and then everything you type is done multiple times at once

several ways to use this feature

• manually add/remove cursors using ⌥ click (⌥ is Option)

• use ⌥⌘↓ or ⌥⌘↑ to add more cursors up or down

• select a block and use Add cursors to Line Ends to get one cursor on each of the selected lines

for more info, check out this page
https://code.visualstudio.com/docs/editor/codebasics#_multiple-selections-multicursor

and/or on youtube, search for vscode multiple cursor

custom keybinding¶

it is rather straightforward to attach a custom keybinding to a vs-code function that you use often
start with .. the palette, of course
locate the function, and click the gear icon on its right hand side

for example here, we just type ‘Alt-o’ and the shortcut gets recorded
from then on you can just press that key combo to trigger the function