VScode에서 사용하기 편한 콘솔로그 단축어 설정

{
	// Place your snippets for typescriptreact 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"
	// }
	"Console log": { 
		"prefix": "cl", 
		"body": [ 
			"console.log('$1');", 
		], 
		"description": "log output to console" 
	}, 
	"Console log variable": { 
		"prefix": "clv", 
		"body": [ 
			"console.log('$1 : ', $1);", 
		], 
		"description": "log output to console with variable" 
	}, 
	"pretty print": { 
		"prefix": "pp", 
		"body": [ 
			"console.log('$1: ', JSON.stringify($1, null, 2));", 
		], 
		"description": "Pretty print JSON" 
	}
}

 

vscode에서 ctrl + shift + p > Configure Snippets > typescriptreact.json 에서 위에 단축어 설정 추가하면 됨

clv는 앞에 문자열에 변수 넣으면 뒤에도 자동으로 입력되고,

pp는 위에 기능 똑같이 되면서 자동 줄바꿈해준다.

 

 

// 예시
  const text = "단축키 설정 굳";
  const object = {
    a: 1,
    b: 2,
    c: 3,
  };


// clv 단축어 사용
console.log("text : ", text);
  
// pp 단축어 사용
console.log("object: ", JSON.stringify(object, null, 2));


//LOG
// text :  단축키 설정 굳
// object:  {
//  "a": 1,
//  "b": 2,
//  "c": 3
//}