VScode 기본 셋팅(2) - HTML snippets 설정

집이좋은 덜렁이
IT/VScode
2022. 7. 23.

★참고

저는 기본 셋팅으로 이렇게 설정한다. 를 알려드리고 싶은거 뿐 개인적으로 설정하시는데 참고용으로 봐주시기 바랍니다.

지난 번 세팅 때 요거 ↓↓↓ 설치하신분들 한해서 제가 쓰는 방법을 알려드릴게요!!

1. 로컬디스크(:C) > 사용자 > (사용자명) > .vscode > extensions > abusaidm.html-snippets-x.x.x > snippets 이동!

위에 보이는 snippets.json 파일을 vscode로 열어주세요.

비어있거나 작성된 것이 있다면 다 지워줍니다.

2. 단축키 작성

{  // { } 로 시작을해서 dictionary 형태로 작성해줍니다.
	"지정할 단축키" : {
    	"prefix": "지정한 단축키",
        "body": [
        	"<!DOCTYPE html>",
            "<html lang=\"ko\">",
            "<head>",
            "\t<meta charset=\"UTF-8\">",
            "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
            "\t<title>${1:Document}</title>",
            "</head>",
            "<body>",
            "\t",
            "</body>",
            "</html>"
        ],
    	"description": "이 단축키 설명문",
   	"scope": "text.html"
    },
    ...
    ...
    ......(또다른 단축키)
	...
}

한글로 써져있는 부분만 수정해서 쓰시면 됩니다.

아래는 위의 단축키로 만든 html 입니다.

위와 같이 작성시 조심하셔야 할 점.

1. body 작성시 해당 줄마다 " " (쌍따옴표) 로 감싼 후 그 안에 내용을 작성해야 합니다.

2. body 작성시 감싸준 " " (쌍따옴표) 와 구분하기 위해 \" 처럼 (\) 역슬래쉬를 엪어다가 사용해줍니다.

( \"(쌍따옴표) 말고 그냥 따옴표로 써주셔도 무관!!)

3. 한 줄 다 쓰면 ,(쉼표) 를 붙여줍시다. (마지막줄은 생략)

4. \t 는 탭을 표현한 것입니다. 들여쓰기 라고 보면됩니다.

작성 예제

{
	"html" : {	//일반 html 작성
    	"prefix": "html",
        "body": [
        	"<!DOCTYPE html>",
            "<html lang=\"ko\">",
            "<head>",
            "\t<meta charset=\"UTF-8\">",
            "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
            "\t<title>${1:Document}</title>",
            "</head>",
            "<body>",
            "\t",
            "</body>",
            "</html>"
        ],
    	"description": "html 기본작성",
   	"scope": "text.html"
    },
    
    // jQuery CDN
    "jQuery" : {
    	"prefix": "jQuery",
        "body": [
          "<!-- jQuery -->",
          "<script src=\"https://code.jquery.com/jquery-1.12.4.min.js\"></script>",
          "<script src=\"https://code.jquery.com/jquery-migrate-1.4.1.min.js\"></script>",
          "$1"
    	],
        "description": "jQuery 1.12.4 버전",
        "scope": "text.html"
    },
    ...
    .......다른 단축키
    ...
}

이전글 기본셋팅(1) - 확장프로그램 추천 편

VScode 기본 셋팅(1) - 확장프로그램 추천

※참고 !! 제가 편하게 사용하기 위해 깔아논 것 중 뽑아서 추천해드리는 것이기 때문에 절대적으로 깔아야 되는건 아님!! 맨 아래에 글에 쓰인 확장프로그램명 이름만 따로 정리해 놨습니다. 1

palkong.tistory.com

'IT > VScode' 카테고리의 다른 글

VScode git github 연결하기 (2)	2022.08.23
VScode 기본셋팅(3) - 바로가기 키 설정 (0)	2022.07.24
VScode 기본 셋팅(1) - 확장프로그램 추천 (20)	2022.07.22

집돌이의 하루