VS Code Extension snippets 만들기

이지연·2022년 5월 21일

extension snippets vscode

VS Code Extension

VS Code를 사용하는 개발자라면 누구나 이용하는 extension은 직접 개발하여 사용할 수 있다.

꽤 다양한 기능을 만들어 개인적으로 사용하거나 maket을 이용하여 퍼블리싱하게 되면 누구나 다운받아 사용가능하다.

VS Code 색상 또는 아이콘을 변경하는 테마 extension (Theming)
컴포넌트, 뷰를 커스텀 하는 extension (Extending the Workbench)
HTML/CSS/JS 빌드하여 Webview를 보여주는 extension (Webview Guide)
새로운 언어 사용을 돕는 extension (Language Extensions Overview)
실행, 디버깅을 돕는 extension (Debugger Extension Guide)

위와 같이 다양한 extension을 개발하여 사용 가능하지만, 여기서는 간단하게 예약어를 정의하여 코드 자동완성을 돕는 snippets을 만들어 볼 것이다.

프로젝트 초기화

우선은 yeomen을 이용하여 extension generator를 생성해야 한다.

npm install -g yo generator-code

generator-code를 설치한 후 code를 실행하고 몇가지 설정을 해주면 기본 프로젝트가 생성된다.

yo code

# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below ###

# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Initialize a git repository? Yes
# ? Bundle the source code with webpack? No
# ? Which package manager to use? npm

# ? Do you want to open the new folder with Visual Studio Code? Open with `code`

최종적으로 code를 실행하면 프로젝트를 vscode로 확인 할 수 있다.
프로젝트에서 F5를 누르면 프로젝트가 컴파일 되고 실행된다.
대부분의 extension은 TypeScript로 만들어져 있다.(그게 퍼포먼스에 좋다고 함) 그렇지만 JavaScript로도 만들 수 있다.

extension 파일 구조

.
├── .vscode
│   ├── launch.json     // Config for launching and debugging the extension
│   └── tasks.json      // Config for build task that compiles TypeScript
├── .gitignore          // Ignore build output and node_modules
├── README.md           // Readable description of your extension's functionality
├── src
│   └── extension.ts    // Extension source code
├── package.json        // Extension manifest
├── tsconfig.json       // TypeScript configuration

Snippets

VSCode snippets의 문법은 TextMate snippet 문법을 따라간다. snippets 파일은 JSON으로 되어 있으며 사용자 지정 snippets을 무제한으로 정의할 수 있다.
snippets만 사용하는 경우에는 별도의 src가 필요하지 않고 snippets이 정의된 json 파일과 package.json만 정의되어 있으면 사용 가능하다

for loop를 snippets으로 만든 간단한 샘플

// in file 'Code/User/snippets/javascript.json'
{
  "For Loop": {
    "prefix": ["for", "for-const"],
    "body": ["for (const ${2:element} of ${1:array}) {", "\\t$0", "}"],
    "description": "A for loop."
  }
}

"For Loop" : snippet 이름으로 IntelliSense에 표시
prefix: "for" 또는 "for-const"를 입력하면 snippet을 실행
body: 삽입되는 본문 내용
description: IntelliSense에 표시되는 snippet에 대한 설명

body에는 ${1:array}, ${2:element}, $0와 같은 몇가지 placeholder를 사용할 수 있다.

위와 같이 json 구조로 snippets 데이터를 만들어 파일을 만들고, package.json 을 아래와 같이 수정하면 된다.

"contributes": {
  "snippets": [
    {
      "language": "javascript",
      "path": "./snippets/data.json"
    },
    {
      "language": "typescript",
      "path": "./snippets/data.json"
    },
    {
      "language": "html",
      "path": "./snippets/data.json"
    }
  ]
}

위와 같이 만들어진 프로젝트를 /.vscode/extensions/ 폴더에 넣으면 바로 로컬에서 사용이 가능하다.

참고

이지연

dev log

이전 포스트

Spring boot - starter

다음 포스트

VS Code Extension snippets 만들기