본문 바로가기
기타

VSCode 코드 자동완성 커스터마이징(Snippet)

by twinkite 2021. 6. 18.
반응형

알고리즘 공부를 다시 시작하면서 여러 문제를 풀다보니 새 문제를 풀때마다 같은 내용을 타이핑 해주는게 귀찮게 느껴졌다. 스니펫을 이용해서 귀찮음을 덜어보자. 

C++

#include <bits/stdc++.h>
using namespace std;

int main(){
    cin.tie(NULL);
    ios_base::sync_with_stdio(false);

    return 0;
}

1. VSCode에서 Ctrl + Shift + P

2. Configure User Snippets 검색

3. cpp.json 검색

4. cpp.json 파일의 내용 수정

{
	"cppps": {
		"prefix": "cppps",	// trigger word
		"body": [
			"#include <bits/stdc++.h>",
			"using namespace std;",
			"",
			"int main(){",
			"\tcin.tie(NULL);",
			"\tios_base::sync_with_stdio(false);",
			"",
			"",
			"",
			"\treturn 0;",
			"}"

		],
		"description": "cpp template for problem solving"
	}
}

5. prefix를 입력하면 

body에 입력한 코드가 바로 자동완성된다. 이렇게 코드 11줄 칠 시간을 아꼈다. 

HTML

html도 동일하게 코드스니펫을 사용할 수 있다. htmlko에 snippet을 등록해놨지만 reset.css를 매번 추가하기 귀찮다.

위와 같이 configure user snippet을 검색해 준 뒤 html.json을 선택한다.

{
	"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\">",
				"    <link rel=\"stylesheet\" href=\"..\/reset.css\">",
				"    <title>$1</title>",
				"</head>",
				"<body>",
				"    $2",
				"</body>",
				"</html>"
		],
		"description": "한국어 페이지용 html 템플릿"
	}	
}

 다음과 같이 변경해주면 html 문서 작성 시 htmlko만 입력하고 tab이나 엔터를 누르면 해당 내용이 자동완성 된다. 

반응형