VS Code를 사용하는 개발자라면 누구나 이용하는 extension은 직접 개발하여 사용할 수 있다.
꽤 다양한 기능을 만들어 개인적으로 사용하거나 maket을 이용하여 퍼블리싱하게 되면 누구나 다운받아 사용가능하다.
위와 같이 다양한 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로도 만들 수 있다.
.
├── .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
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."
}
}
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/ 폴더에 넣으면 바로 로컬에서 사용이 가능하다.