VS Code 코드 스니펫 관리 도구

일부 코드를 100번 입력했다는 것을 알게 되면 코드 스니펫으로 저장해야 합니다. 예를 들어 hapi 경로에 대한 스니펫을 만들었습니다. hapi:route를 입력하면 intellisense가 트리거되고 라우터 상용구 코드가 생성됩니다.

https://dev-to-uploads.s3.amazonaws.com/i/u1zwukev53co6g3pnlma.gif

코드 조각이 JSON 파일에 있었기 때문에 VS Code 코드 조각을 작성하고 유지 관리하기가 어렵습니다. 그래서 이 JSON 파일을 생성하는 도구를 작성했고 폴더에 스니펫만 작성하면 됩니다.

도구

스니펫을 의미하는 snp라는 도구입니다. curl로 설치할 수 있습니다.

$ curl -sf https://gobinaries.com/djyde/snp | sh

Go로 작성되어 Windows를 포함한 많은 플랫폼에서 실행할 수 있습니다.

스니펫 만들기

이제 폴더를 만들어 모든 코드 스니펫을 정리할 수 있습니다.

$ mkdir snippets
$ cd snippets

그런 다음 확장자가 .snp인 파일을 만들 수 있습니다. 파일 이름이 트리거 텍스트가 됩니다.

예를 들어 hapi 경로 스니펫을 작성하고 싶습니다. 이제hapi:route.snp 파일을 생성합니다.

$ touch hapi:route.snp

// hapi:route.snp
---
scope: typescript,javascript
description: hapi route
---

server.route({
  path: '$1',
  method: '${2|GET,POST,PUT,DELETE|}',
  async handler(req, h) {
    $0
  }
})

보시다시피 .snp 파일은 머리말과 코드 스니펫이 포함된 파일일 뿐입니다.

If you are not familiar about the VS Code code snippet syntax, please see https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax

snp -u를 실행하고 이제 VS Code로 이동하여 hapi:route를 입력하면 마법이 표시됩니다.

결론

복사 및 붙여넣기만 지원하는 일부 코드 조각 관리자 앱을 사용하는 대신 이제 snp를 사용하여 VS Code NATIVE 코드 조각을 관리할 수 있습니다.

https://github.com/djyde/snp에서 자세히 보기

내 개인 스니펫: https://github.com/djyde/snippets