DEV Community 👩‍💻👨‍💻

Dahye Ji
Dahye Ji

Posted on • Updated on

Shortcuts for VS code and emmet.

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 Click the setting button > then click User Snippets
Search html 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.

{
  // 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 템플릿"
  }
}
Enter fullscreen mode Exit fullscreen mode

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"]

<div a="value1" b="value2"></div>
Enter fullscreen mode Exit fullscreen mode

Text: {}
Climb-up: ^
div+div>p>span+em^bq

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>
Enter fullscreen mode Exit fullscreen mode

div+div>p>span+em^^bq

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.