[비주얼 스튜디오 코드(Visual Studio Code)] Snippets - 회복맨 블로그

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

에디터/비주얼 스튜디오 코드(Visual Studio Code) 2017.09.11 14:37

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

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

서브라임 텍스트 : 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 파일 입니다.

이러합니다.

1
2
3
4
5
"files.associations": {
    // extension name : html
    "*.ejs""html",
    "*.js""html"
}
cs





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

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





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

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





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

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





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

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





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

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

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





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

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

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

댓글 6

  • 신입 (2017.09.16 12:16)

    감사합니다 정말 큰 도움 됬어요 ㅜㅜ

    • 회복맨 (2017.09.17 15:42 신고)

      방문해 주셔서 감사합니다. :)
      도움이 되어서 저로써도 기쁘네요!

  • Uzoo17 (2018.07.07 22:38)

    snippets.json 해당파일을 여니까
    주석이 되어있네요~

    어떻게 해야하나요?

    • 회복맨 (2018.07.08 04:52 신고)

      그러신 경우엔
      '컨트롤 + A' (전체선택 후)
      '컨트롤 + /' 또는 '컨트롤 + 쉬프트 + /' (전체 주석 해제)
      하셔서 위와 같은 동일한 방법으로 진행해 주시면 됩니다.

      방문해 주셔서 감사합니다 :)

  • 하ㅣ.. (2019.05.20 21:55)

    <html 이렇게 딱 치면 학교에서는 밑에 html:5 등등 이런것들이 뜨면서 html:5 선택하면 <!DOCTYPE> 인가 아무튼 이걸로 시작해서 딱 틀이 나오는데 저는 왜 안나올까요.....진짜 이거때문에 짜증나서 미치겠어요ㅜㅜhtml snippets 이것도 깔았는데 안되고 확장프로그램 깔았을때 다시로드 이것도 안되고요..정말 막막해서 글 올립니다.

    • 회복맨 (2019.05.23 23:47 신고)

      이 블로그 운영자 입니다.
      <html
      은 저도 틀이 안나오네요.
      ! 입력 후 탭키(Tab)
      또는
      html:5 입력 후 탭키(Tab)
      를 해보시기 바랍니다.

      '반드시 HTML 파일을 생성 후' 시도해 보시기 바랍니다. 저런 단축키는 거기에 맞는 파일에서 사용할 수 있기 때문입니다.
      일반 txt 파일에서는 당연히 안됩니다.

      우선 질문자님의 PC 상황과 조건이 어떤지 저는 잘 모르기에 제가 주관적으로 경험한 부분을 말씀드렸습니다.

      방문해 주셔서 감사합니다~