[비주얼 스튜디오 코드(Visual Studio Code)] Snippets

비주얼 스튜디오 코드 에서 스니펫 사용하는 방법 입니다.

동일한 기능을 하는 다른 에디터의 패키지

서브라임 텍스트 : http://recoveryman.tistory.com/39

아톰 : http://recoveryman.tistory.com/237

브라켓 : http://recoveryman.tistory.com/142

비주얼 스튜디오 코드 는 emmet (zencoding) 같은 패키지는 따로 설치 안하셔도 됩니다.

이미 기본 내장되어 설치되어 있습니다.

emmet 의 단축키는 Tab 키 또는 컨트롤 + 스페이스바 둘 중 원하시는거 선택하셔서 쓰시면 됩니다.

그냥 이런 겁니다.

키워드를 입력하면 내가 저장했던 코드 양식이 자동완성 됩니다.

설치법은 이전에 view in browser 설치 했던 것과 같습니다.

상단의 보기 -> 확장 으로 들어가시거나 단축키 컨트롤 + 쉬프트 + X 를 누릅니다.

좌측 상단에 검색할 수 있는 곳에 html snippets 라고 입력해 줍니다.

검색 결과 중 맨 위에 있는 HTML Snippets 를 설치하시면 됩니다.

사용 방법이 우측 화면에 표시 될텐데 비주얼 스튜디오랑 같이쓰나.... 뭔가 저 방법대로 하면 잘 안됩니다.

스니펫 단축키만 알아갑시다. [ 컨트롤 + 스페이스바 ]

설치를 완료 했으면  다시 로드  를 클릭해 줍니다.

창 다시 로드 하면 비주얼 스튜디오 코드가 재실행 됩니다. 그리고 확장 기능을 사용 할 수 있습니다.

본인이 원하는 코드를 입력 하려면 snippets 코드를 사용할 수 있게 어떤 파일을 편집해 줘야 합니다.

그 파일의 위치를 찾기 위해 상단 메뉴 중 파일 -> 파일열기 를 누릅니다.

 C드라이브 -> 사용자 여기서 가끔 user 폴더로 되어있는 사람도 있습니다. 그 사용자 폴더로 들어갑니다.

거기서 본인의 컴퓨터 이름이 있습니다. 그 폴더로 접근 합니다.

그 본인의 폴더에 들어갔으면 .vscode 라는 폴더가 있습니다. 들어갑니다.

extensions 이란 폴더로 들어갑니다. 본인의 vscode 셋팅에 따라 이 부분은 다르게 나올 수 있습니다.

extensions 은 확장 이란 뜻입니다. 확장 기능만을 모아논 폴더 입니다.

그 extensions 폴더에 들어가면 여태까지 설치한 두개의 확장 기능이 있네요.

저는 두개 설치했기 때문에 두개 나왔습니다. abusaidm.html-snippets-x.x.x 폴더로 들어갑니다.

그러면 snippets 폴더가 있습니다. 저 폴더로 들어갑니다.

그러면 snippets.json 이라는 json 파일이 있습니다. 

이 파일을 선택해서 에디터 에서 열어 줍니다.

대충... 이런 형식의 json 파일 입니다.

이러합니다.

"files.associations": {
    // extension name : html
    "*.ejs": "html",
    "*.js": "html"
}

다음과 같이 테스트로 입력해 봤습니다.

비슷하게 한번 작성하고 테스트 해보겠습니다. 스크린샷에 주석으로 해당 라인이 뭘 의미하는지 작성했습니다.

테스트 파일로 돌아가 키워드를 입력하고 컨트롤 + 스페이스바 를 눌러봤습니다.

제안 항목이 없다고 뜹니다. 프로그램을 재실해봐도 똑같습니다. 그래서 공식 문서를 다시 읽어 봤습니다.

패키지가 언제 수정이 됐는지 CSS와 JS 파일은 언어를 다시 새로 선언해 줘야 한다고 합니다.

번거롭지만 다시 상단 메뉴 중 파일 -> 파일 열기 들어갑니다.

아까 snippets.json 폴더가 그대로 있을 텐데 거기서 한번만 상위로 올라갑니다.

그러면 package.json 파일이 있습니다. 열어 주도록 합시다.

그 파일 에서 language 를 검색해 봅니다.

그러면 html 랭귀지와 경로가 어디로 설정되어 있는지 나옵니다.

저기에 같은 양식으로 css와 js 도 추가시켜 줍니다.

package.json 파일을 수정 후 저장했으면 비주얼 스튜디오 코드를 종료 후 재실행 시켜줍니다.

다시 테스트 파일로 돌아가 키워드를 입력하고 [ 컨트롤 + 스페이스바 ] 를 입력하면 뭔가 잡힙니다.

그걸 엔터로 적용시켜주면 아까 입력했던 양식이 반영 되어 있습니다.