VSCode의 사용자 정의 스니펫.

이것은 VSCode에서 DIY 스니펫 도구가 필요한 사람을 위한 튜토리얼입니다.
이 자습서에서는 html용 스니펫 도구를 시연하지만
VSCode의 모든 파일 유형에 이 방법을 사용할 수 있습니다.

템플릿을 생성하는 방법.
템플릿 생성은 3단계 프로세스입니다.
1. 파일 --> 기본 설정 --> 사용자 스니펫
2. 탐색 표시줄에 "html"을 입력합니다.
3. 구성해야 하는 ~/.config/Code/User/Snippets에서 html.json 템플릿을 가져옵니다.

그림 1. html.json 형식의 구조

{
    "Text that Appears on Dropdown List": {
        "prefix": "xxx yyy",
        "body": [
            “Text that will be inserted to source file”
        ],
        "description": "Text xxxyyyzzz"
    }
}

그림 2. 드롭다운 목록에 나타나는 텍스트.

html.json 구성 방법
먼저 "드롭다운 목록에 나타나는 텍스트":
"접두사"의 첫 번째 문자를 입력할 때 드롭다운 목록(그림 2 참조). 제출해야 할 2개의 다른 주요 항목이 있습니다: "접두사"및 "본문". "접두사"
우리가 입력하고 Enter 키를 누를 때마다
"본문"의 내용은 소스 파일에 자동으로 삽입됩니다.

그림 3, Ex1을 살펴보겠습니다. "접두사": "athtml"은 입력한 후를 의미합니다.
소스 파일의 "athtml", HTML 상용구의 스니펫은
즉시 삽입합니다. "접두사"는 Ex1과 같은 단일 단어이거나
"prefix": "divc atdivc"가 있는 Ex2와 같이 두 단어 이상이 될 수 있습니다.
"divc"또는 "atdivc"를 입력하여 div 태그를 가져올 수 있음을 의미합니다.
클래스=클래스명.

"본문"에서 정적 콘텐츠, 자리 표시자가 있는 정적 콘텐츠를 넣을 수 있습니다.
또는 동적 콘텐츠(콘텐츠와 몇 가지 변수). 예를 들어, Ex2,
${1:className}은 이후에 콘텐츠를 편집할 수 있는 자리 표시자입니다.
스니펫이 소스 파일에 삽입됩니다. 거기에 가능하다
Ex4의 경우와 같이 삽입된 콘텐츠에 많은 자리 표시자가 있습니다.
2개의 자리 표시자가 있는 경우 커서가 처음에 멈춥니다.
자리 표시자 및 TAB을 사용하여 두 번째 자리 표시자로 이동할 수 있습니다.

테스트를 위해 그림 3을 복사하여 자신의 html.json에 붙여넣을 수 있습니다.
또는 원하는 경우 자신의 스니펫을 추가/편집합니다.

그림 3. HTML 스니펫(html.json)의 예

{
    //Ex1. Type “athtml to get HTML boilerplate” 
    "HTML boilerPlate": {
    "prefix": "athtml",
    "body": [
        "<!DOCTYPE html>"
        "<html lang=\"en\">"
        ""
        "   <head>"
        "       <meta charset=\"UTF-8\">"
        "       <title>atHTML</title>"
        "       <style>"
        ""
        "       </style>"
        "   </head>"
        ""
        "   <body>"
        "       <script>"
        ""
        "       </script>"
        "   </body>"
        ""
        "</html>"       
    ],
    "description": "Paste boilerPlate Snippet to HTML file"
    }

    //Ex2. Type “divc” or “atdivc” to get div tag with class=xxxx 
    "HTML <div class=yy": {
        "prefix": "divc atdivc",
        "body": [
            "<div class=\"${1:className}\"></div>"
        ],
        "description": "Paste div tag"
    }

    //Ex3. Type “divi” or “atdivi” to get div tag with id=xxxx
    "HTML <div id=xx": {
        "prefix": "divi atdivi",
        "body": [
            "<div id=\"${1:id}\"></div>"
        ],
        "description": "Paste div tag"
    }

    //Ex4. Type “divic” or “atdivc” to get div tag with id=xxxx and class=yyyy
    "HTML <div id=xx class=yy": {
        "prefix": "divic atdivic",
        "body": [
            "<div id=\"${1:id}\" class=\"${2:className}\"></div>"
        ],
        "description": "Paste div tag"
    }

}

전체 참조가 필요한 경우 사용자 정의 스니펫에 대한 매뉴얼의 지침을 읽으십시오.
https://code.visualstudio.com/docs/editor/userdefinedsnippets

Reference

이 문제에 관하여(VSCode의 사용자 정의 스니펫.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/kpalaw/user-defined-snippets-in-vscode-561l

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

VSCode의 사용자 정의 스니펫.

Reference

좋은 웹페이지 즐겨찾기