VSCode 자동완성 세팅(code snippets)

snippets 파일 생성

1. Cmd + Shift + P키를 누르고, 검색창에 Configure User Snippets을 입력합니다.

>Snippets: Configure User snippets

 

2. Enter 키를 누르면, 스니펫 설정 관련 메뉴가 나타납니다. 처음 설정하는 경우, New Global Snippets file... 항목을 선택합니다.

>New Global Snippets file...

 

3. 파일 이름을 입력하고 Enter 키를 누릅니다. 파일 이름은 [fileName].code-snippets로 설정해주는 것이 일반적입니다.

 

snippets 설정

파일이 열리면, 스니펫을 작성합니다. 스니펫은 JSON 형식으로 작성하며, prefix와 body 속성이 필요합니다.

 

▼ 예시 코드

 

{
  "Console log": {
    "prefix": "cl",
    "body": "console.log($1);"
  },
  "Console log with string template": {
    "prefix": "clt",
    "body": "console.log(`$1 ${$2}`);"
  },
  "Function": {
    "prefix": "fc",
    "body": ["function $1(){", "  $2", "}"]
  },
  "Arrow Function": {
    "prefix": "afc",
    "body": ["const $1 = () => {", "  $2", "};"]
  },
  "Arrow Function Callback": {
    "prefix": "cb",
    "body": ["const $1 = useCallback(() => {", "  $2", "}, []);"]
  },
  "useState": {
    "prefix": "us",
    "body": ["const [$1, set${1/(.*)/${1:/capitalize}/}] = useState($2);"]
  },
  "useEffect": {
    "prefix": "ue",
    "body": ["useEffect(() => {", "  $1", "}, []);"]
  },
  "useEffect return": {
    "prefix": "uer",
    "body": ["useEffect(() => {", "  $1", ,"", "return () => {", "$2", "}", "}, []);"]
  }
}

us의 경우 변수명을 입력하고 tab을 누르면 set 다음 바로 나오는 첫번째 글자가 대문자로 바뀐다.

 

https://www.youtube.com/watch?v=umeqCopb96w 유튜브 강의
https://snippet-generator.app/ 이 사이트에 접속해서 편리하게 세팅해서 복사해와도 됨
https://code.visualstudio.com/docs/editor/userdefinedsnippets 관련 문서