VS 코드 및 emmet에 대한 바로 가기.

Emmet 사용에 대해 자세히 알아보고 Visual Studio Code를 사용할 때 유용한 것들을 배웠습니다.
이전에는 단축키를 많이 사용하지 않았지만 단축키를 사용하면 시간을 절약하고 코드를 더 빨리 작성할 수 있습니다.

VS 코드의 Mac OS용 바로 가기.



https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf
  • 오늘 배운 단축키 몇가지

  • ⌘(명령어)+N: 새 파일
    ⌘(명령어)+S: 파일 저장

    줄 아래/위로 이동:
    옵션(Alt) + 아래쪽
    옵션(Alt) + 위로

    줄 아래/위로 복사:
    Shift+Opt+Down
    Shift+Opt+Up

    단어로 이동:
    Opt+오른쪽
    Opt+왼쪽

    Opt(Alt) + 클릭: 다중 커서 추가

    ⌘(command) + D: 다음 일치 항목 찾기에 선택 항목 추가

    스니펫 추가



    또한 VS 코드에 스니펫을 추가하는 방법도 배웠습니다.
    설정 버튼을 클릭한 다음 사용자 스니펫을 클릭합니다.
    검색 상자에 html을 입력합니다. 그런 다음 html.json 파일에 여기에 스니펫을 추가합니다.
    이것이 내가 한국어 기반 페이지에 포함시킨 것입니다.

    {
      // 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 템플릿"
      }
    }
    


    이제 이것은 htmlko로 저장되며 !(html) 대신 htmlko를 입력하여 내 VS 코드에 이 스니펫을 가져올 수 있습니다.

    웹용 VS 코드!



    이제 https://vscode.dev/의 VS 코드를 다운로드하지 않고도 사용할 수 있습니다! 상당히 새롭다고 들었습니다. git 저장소에 있는 경우 github.com 대신 > github.dev로 이동합니다.
    ig. https://github.dev/daaahailey/repository_name
    또는 단순히 .(점)을 입력하면 VS 코드 웹 버전으로 이동합니다.
    여기에서 웹용 VS 코드에 대해 자세히 알아보십시오. https://code.visualstudio.com/docs/editor/vscode-web

    Emmet 치트 시트



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

    어린이: >
    형제자매: +
    그룹화: ()
    곱셈: *
    항목 번호 매기기: $
    ID 및 CLASS 속성 : #(id), .(class)
    맞춤 속성:
    ig. [a='값1' b="값2"]

    <div a="value1" b="value2"></div>
    


    텍스트: {}
    올라가기: ^
    div+div>p>스팬+em^bq

    <div></div>
    <div>
        <p><span></span><em></em></p>
        <blockquote></blockquote>
    </div>
    


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

    <div></div>
    <div>
        <p><span></span><em></em></p>
    </div>
    <blockquote></blockquote>
    

    좋은 웹페이지 즐겨찾기