VSCode 는 Microsoft의 에디터인 Visual Studio Code를 뜻한다. 이하 VSCode.
VSCode
VSCode 에서 Vue를 개발하니 평소에 이클립스에서 javascript 작업을 하던 것과 비교하면 어마 무시하게 편해진 것이 느껴지면서 개발환경이 무척이나 쾌적해졌음을 느낀다.
VSCode에서 개발 업무 효율을 좀 더 증가할 수 있는 방법 중에 하나가 snippet이라 생각한다.
snippet이란?
VSCode에서 코드 작성 시 assistant가 나오면서 snippet을 선택하면 해당 snippet에 설정되어 있는 템플릿이 펼쳐지는 기능이다.
한 마디로 코드 템플릿이다.
그러니까 코드 템플릿을 파일 확장자에 따라 정의할 수 있고 이를 소스에 포함시켜서 참여하는 개발자 모두가 동일하게 snippet이라는 코드 템플릿을 사용하게 할 수 있다.
예로 들면 vue를 개발한다고 했을 때 싱글 파일 컴포넌트를 snippet으로 만들어 두고 해당 템플릿을 사용하면 아래와 같이 우리 회사만의 또는 우리 팀만의 snippet을 만들어서 사용할 수 있다. 일반적으로 스니펫을 정의할 때 root 디렉토리의 .vscode 디렉토리를 만들고 그 아래에 아래와 같은 형식으로 파일을 만들어준다.
{파일확장자}.code-snippets
아래는 그 예시다.
vue.code-snippets
{
"haena-vue-base-component-sample": {
"scope": "vue", // snippets을 사용할 언어
"prefix": "hs-vue-component-sample", // 자동완성 이름
"body": [
"<template>",
" <!-- 최상위 엘리먼트는 1개만 있어야한다. 최상위 엘리먼트는 div 태그가 아니어도 된다. -->",
" <div></div>",
"</template>",
"",
"<script lang=\"ts\">",
"import Vue from 'vue'; // Vue를 상속받아야 typecsript의 타입 유추 기능이 동작함. Vue를 상속 받지 않으면 Typescript가 Vue 컴포넌트에 대한 옵션을 알 수 없기 때문임. 참고: https://kr.vuejs.org/v2/guide/typescript.html",
"import AjaxMixins from '@/mixins/common/ajax_mixins';",
"",
"export default Vue.extend({",
" name: '컴포넌트이름',",
" mixins: [AjaxMixins],",
"",
" // 컴포넌트 변수 정의",
" data(): {",
" // 데이터(지역변수) 타입 정의",
" // local_var: any;",
" } {",
" return {",
" // 변수 선언 및 초기화 예시",
" // local_var: {},",
" };",
" },",
"",
" // 계산된 변수 설정. 캐싱기능이 있기 때문에 의존성이 있는 변수가 변경되었을 때만 동작한다. (의존성 있는 변수가 같은 값으로 변하는 경우에 캐시된 값을 사용함.)",
" computed: {",
" // 예시. computed는 파라미터를 받을 수 없음.",
" // functionName: function (): any {",
" // return '반환값';",
" // },",
" },",
"",
" watch: {",
" // 변수가 변하는 이벤트를 잡으려면 이 영역에 변수 이름과 동일한 함수를 선언하면 된다.",
" // local_var() {",
" // something ..",
" // }",
" },",
"",
" // 엘리먼트 또는 스크립트 내에서 사용할 지역 함수 정의",
" methods: {",
" // 예시",
" // functionName: function (sampleParam: any): any {",
" // console.log(sampleParam);",
" // this.local_var = sampleParam;",
" // },",
" },",
"",
" // SEO가 되어야 하는 데이터는 fetch 영역에서 조회해야한다.",
" async fetch(): Promise<void> {",
" // await this.functionName();",
" },",
"",
" // vue life cycle hook",
" beforeCreate() {},",
" created() {},",
" beforeMount() {},",
" mounted() {},",
" beforeUpdate() {},",
" updated() {},",
" beforeDestroy() {},",
" destroyed() {},",
"});",
"</script>",
"",
"<style lang=\"scss\" scoped>",
"// scss 파일 import'",
"// @import '@/assets/scss/파일이름.scss'",
"",
"// 하위 컴포넌트도 적용하기 위해서는 아래와 같이 선언해야한다. (최상위 엘리먼트가 div.container라는 전제하에. 이 경우 개발자모드에서 css 추적 시 항상 div.container로 위치가 잡힌다. -> css 추적이 어려워짐. 해결방안 생각해봐야함)",
"// div.container:deep() {",
"// @import '@/assets/scss/파일이름.scss'",
"// }",
"</style>",
""
],
"description": "vue component tempalte" // 자동완성에 출력할 snippets 설명
},
}
이렇게 만들어서 소스 안에 .vscode 를 함께 커밋해주면 해당 소스를 함께 작업하는 개발자들이 모두 내가 정의한 snippets을 함께 사용할 수 있다.
vue를 예시로 들었지만 vue 전체 템플릿이 아닌 methods 부분 템플릿, computed 부분 템플릿 등 좀 더 상세하게 custom snippet을 만들어서 쌓이면 그것만으로도 훌륭한 프레임워크가 될 수도 있겠다는 생각이 들었다.
지금은 vue와 typescript만 사용중이지만 나중에 spring boot 등 backend 도 vscode로 올렸을 때 custom snippet을 만들어서 개발하면 효율이 훨씬 향상될 것으로 생각된다.
참고자료
https://musma.github.io/2019/08/12/vscode-code-snippets.html