개발 의문 해결

VSCode에서 코드 스니펫 안 될 때

티시즌 2024. 2. 2. 22:47

vscode에서 새로운 파일 생성 후 코드 템플릿을 불러오고 싶었다.

방법은 간단하다. File > Preferences에서 Configure User Snippets을 누르면 된다.

나는 다른 workspace에서도 쓰고 싶어서 New Global Snippets file을 선택했다.

이름을 지정하고 나면 코드 스니펫 설정파일이 열린다.
다음과 같이 기본 설명 문서가 포함되어 있다.

{
	// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. 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": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
}

 

나는 jsx파일에 대한 템플릿을 만들고 싶었기 때문에 scope에 "jsx" 라고 적었다.
그런데 추가가 안 됐다. 아무리 prefix를 쳐도 내 코드 스니펫은 나오지 않았다.
'vscode 스니펫 안됨', 'vscode 스니펫 못 불러옴', 'vscode 코드 스니펫 안 뜨는 경우', 'vscode 코드 스니펫 안 될 때' 등등...... 의 키워드로 검색을 해 봤지만 원하는 결과는 찾을 수 없었다.

설정 문제인가 싶어서 그쪽도 찾아봤는데, 관련 설정은 딱히 없었다. 검색해서 나오는 건 확장 프로그램을 깔고 설정하라는 것 정도?
글로벌 코드스니펫이어서 문제인가 싶기도 했는데, 그런 문제도 아니었다.

이 문제는 설정파일 값 설정 문제이다.

이렇게 scope에는 array가 들어가는 것이 맞다.
설정 파일에 문제가 없으면, idle window를 재시작할 필요도 없이 바로 사용가능하다.

{
  "Print to console": {
    "scope": ["jsx", "javascript"],
    "prefix": "jsx",
    "body": [
      "import React from 'react';",
      "",
      "const $1 = () => {",
      "  return (",
      "    <div className='$1'>$1</div>",
      "  );",
      "};",
      "",
      "export default $1;",
    ],
    "description": "jsx default structure",
  },
}

JSON 형식이기 때문에 콤마로 구분되는 데이터는 array 형식인 게 자연스럽다....

다만 예시를 저렇게 해놨으니 나 같은 초보 개발자는 낚일 수밖에 없었다고 본다 ㅠㅠ
심지어 자바스크립트는 이렇게 "javascript,typescript" / "javascript" / ["javascript"] 3가지나 인식하는데
jsx는 "jsx" 이렇게 쓰면 안 된다.....

진짜 왜 하필 예시를 들어도 저걸 들었담ㅠㅠ