Shortcuts for VS code and emmet.
Tags: vscode, emmet, beginners, programming
Published: 2021-11-01 13:20:36

I've learnt more about using emmet and things that would be useful when using Visual Studio Code.
I haven't used much of shortcuts before but using shortcuts will save my time and help me to write code faster.

## Shortcuts for Mac OS in VS code.
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

* Some shortcuts I learnt today

⌘(command)+N: New file
⌘(command)+S: Save File

Move Line Down/Up:
Opt(Alt) + Down
Opt(Alt) + Up

Copy Line Down/Up:
Shift+Opt+Down
Shift+Opt+Up

Move by Word:
Opt+Right
Opt+Left

Opt(Alt) + Click: Adding multiple cursors



⌘(command) + D: Add Selection To Next Find Match


## Adding Snippets
Also, I've learnt how to add snippets in VS code.
![Setting-User Snippets]
(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4vxbp7z0csm7ygftx8t.png) Click the setting button > then click User Snippets
![Search html]
(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kamse6l6e8vtwcsh448.png) Type html on the search box. Then add snippets here in the html.json file.
This is what I included for the pages based in Korean language.

```html
{
  // Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  // "Print to console": {
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }

  // * This part is what I added.

  "Print to console": {
    "prefix": "htmlko",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"ko\">",
      "<head>",
      "    <meta charset=\"UTF-8\">",
      "    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
      "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
      "    <title>$1</title>",
      "</head>",
      "<body>",
      "    $2",
      "</body>",
      "</html>"
    ],
    "description": "한국어 페이지용 html 템플릿"
  }
}
```
Now this will be stored as htmlko and I can bring this snippet in my VS code by typing htmlko instead of !(html).


## VS code for the Web!
You can also use VS code from https://vscode.dev/ now without downloading it! I heard it's quite new. If you are on your git repository, instead of github.com, go to > github.dev
ig. https://github.dev/daaahailey/repository_name
or you can simply type .(dot) then this will take you to the VS code web version.
Find more about VS code for the web here: https://code.visualstudio.com/docs/editor/vscode-web

### Emmet cheat sheet
https://docs.emmet.io/cheat-sheet/

Child: >
Sibling: +
Grouping: ()
Multiplication: *
Item numbering: $
ID and CLASS attributes : #(id), .(class)
Custom attributes:
ig. [a='value1' b="value2"]
```html
<div a="value1" b="value2"></div>
```
Text: {}
Climb-up: ^
div+div>p>span+em^bq
```html
<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>
```
div+div>p>span+em^^bq
```html
<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>
```