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.

  • 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:

Move by Word:

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\">",
      "    <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>",
      "    $2",
    "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 now without downloading it! I heard it's quite new. If you are on your git repository, instead of, go to >
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:

Emmet 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: ^

Enter fullscreen mode Exit fullscreen mode


Enter fullscreen mode Exit fullscreen mode

Top comments (0)