-
VSCode Custom Snippet 만들기Tip 2022. 4. 12. 17:22728x90
Windows와 큰 차이가 없겠지만 해당 내용은 Mac VSCode@1.66.1 버전으로 작성되었습니다.
위와 같은 순서를 입력 시 설정한 이름으로 된 json파일이 생성된다.
이제 이곳에 내가 원하는 스니펫을 생성하면 된다.
{ "snippetName": { "prefix": "tsc", // 해당 스니펫을 불러올 명령어를 입력한다. "body": [""], // 스니펫을 통해 불러오고 싶은 내용을 문자열로 ','을 구분으로 입력한다. "description": "my typescript snippet" // 해당 스니펫의 설명을 입력한다. "scope": "typescriptreact, typescript", // (선택사항) 해당 스니펫을 사용할 수 있는 파일형식을 입력한다. } }
크게 위와 같은 방법으로 스니펫을 생성하면 되며, body내부에 값을 입력하기가 불편하다.
그러니 snippet generator (snippet-generator.app)와 같은 사이트를 통해 제작하는 게 편리하다.
{ "tsc": { "scope": "typescriptreact, typescript", "prefix": "tsc", "body": [ "import React from 'react';", "", "const ${1:${TM_FILENAME_BASE/([a-z])/${1:/upcase}/}} = (): React.ReactElement => {", " const title = '${1:${TM_FILENAME_BASE/([a-z])/${1:/upcase}/}}';", " return <div>{title}</div>;", "};", "", "export default ${1:${TM_FILENAME_BASE/([a-z])/${1:/upcase}/}};" ], "description": "typescript my snippet" } }
최종적으로 위와 같은 방법으로 개인적인 나의 스니펫 생성이 끝났다.
위에 ${1:}이나 TM_FILENAME_BASE와 같은 것의 자세한 내용은 Snippets in Visual Studio Code에서 모두 확인할 수 있다.
'Tip' 카테고리의 다른 글
Lazy initialization로 useState 최적화하기 (0) 2022.06.27 M1 Mac에서 zsh + oh-my-zsh + p10k 설정하기 (2) 2022.06.15 'Window & typeof globalThis' 형식에 '*' 속성이 없습니다. ts(2339) 해결하기 (0) 2022.02.08 JS 유용한 Promise활용 (0) 2022.02.03 React 유용한 Tip 3가지 모음 (0) 2022.01.18