도란도란 :: [Visual Studio Code]의 html.json 수정하기

[Visual Studio Code]의 html.json 수정하기

HTML - CSS - 웹표준2023. 3. 15. 15:14

기본적으로 제공되는 html 자동완성 코드들이 있지만 수정할 필요없이 본인에게 딱 맞는 자동완성이 되면 훨씬 더 효율적입니다.

먼저 기본적으로 자동완성되는 코드를 보면 lang을 ko로 변경해야하고 viewport부분도 제거하고싶습니다. 또 title태그 내용부분이 지워져있으면 더 좋을 것 같기 때문에 위의 내용을 담은 자동완성을 만들어 보겠습니다.

기본 제공 html 자동완성 코드

 

vscode 왼쪽 하단의 톱니바퀴 모양을 눌러 '사용자 코드 조각'부분을 클릭합니다.

코드조각 클릭 시 화면

그러면 위와같은 화면이 나오는데 '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"
      // }
     
 "코드 조각 제목" : {
      "prefix": "html",
      "body": [
          "<!DOCTYPE html>",
          "<html lang=\"ko\">",
          "<head>",      
          "\t<meta charset=\"UTF-8\">",
          "\t<meta name=\"description\" content=\"상세설명\">",
          "\t<meta name=\"keyword\" content=\"키워드\">",
          "\t<meta name=\"author\" content=\"\">",
          "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
          "\t<title>\"페이지제목\"</title>",
          "\t<link rel=\"stylesheet\" href=\"\">",
          "\t<script src=\"\"></script>",
          "</head>",
          "<body>",
          "$2",
          "</body>",
          "</html>"
      ],
      "description": "html 자동완성 추가"
  }
}


 

각 key에 대한 설명입니다.

  • 코드 조각 제목 : 임의로 작성할 수 있는 코드 조각의 이름입니다.
  • prefix : 중요한 항목으로 에디터에서 여기 있는 글자를 쓰면 body의 내용이 작성됩니다.
  • body : 중요한 항목으로 prefix에 해당하는 명령어가 실행되면 실제로 에디터에 작성될 내용입니다.
  • description : 코드 뭉치의 설명입니다. 본인만 사용할 거면 굳이 중요하지는 않습니다.

이 4가지 요소 중에 prefix와 body가 가장 중요한 요소입니다. prefix는 특별한 규칙이 없지만 body 는 중요한 규칙들이 있어요.

사용자 코드 조각의 body에 대한 간단한 문법

body는 []로 감싸지며 "~ 블라블라 ~~ " , "~ 블라블라 ~~ " ,으로 줄바꿈을 할 수 있습니다.

코드 조각 문법

코드 조각 작성 시 사용되는 문법 중 몇 가지를 설명드린다면..

  • \n: 한줄 띄어쓰기가 됩니다.
  • 비슷하게 \t 를 입력하시면 탭 띄어쓰기가 됩니다.

문서 중에 $1, $2, $3, $0이런것이 있는데 이것을 Tabstops라고 해요. Tab키로 순서대로 내용을 입력할 수 있게 포커싱을 이동해 줍니다.

위의 코드에서 보면 $1이 title에 표시되어 있는데 코드 조각을 불러오면 맨 처음 커서가 $1에 위치해서 타이틀을 입력할 수 있게 해줘요. 그다음 Tab 키를 누르면 이번에는 $2위치인 tag에 커서가 위치하게 돼요. 내용 입력하기 편리하겠죠

$0은 가장 마지막에 위치할 곳에 넣어주시면 돼요.(위의 코드에는 없지만 문제는 없어요)

${1:array}, ${2:element}이렇게 입력을 하면 미리 기본값을(array, element) 입력한 상태로 커서가 위치하기 때문에 작성에 도움을 줄 수도 있었어요.

${1|one,two,three|} 처럼 파이프 표시로 몇 개를 작성하면 해당 값 중에서 Select 할 수도 있어요.

반응형
저작자표시

'HTML - CSS - 웹표준' 카테고리의 다른 글

Swiper Pagination  (0) 2023.04.11
Element.ariaCurrent  (0) 2023.04.10
[Visual Studio Code]의 Emmet  (1) 2023.03.15
[CSS] Grid  (0) 2023.03.07
[CSS] :nth-child :nth-of-type 가상 클래스(의사 클래스)  (0) 2023.03.02

티스토리툴바