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" 이렇게 쓰면 안 된다.....
진짜 왜 하필 예시를 들어도 저걸 들었담ㅠㅠ
'개발 의문 해결' 카테고리의 다른 글
Redux 핵심 개념 이해하기 (1) | 2024.02.05 |
---|---|
CSS 그리드 rowspan / colspan 적용 안 되는 문제 해결법 (0) | 2024.02.04 |
DB 저장과 로컬스토리지 저장, 그리고 파일 저장의 차이 (0) | 2023.09.24 |
getRequestURI()가 jsp 파일명으로 나올 때 (0) | 2023.08.24 |
스프링 레거시 MVC 프로젝트 Could not initialize class com.thoughtworks.xstream.converters.collections.PropertiesConverter 오류 해결법 (0) | 2023.08.01 |