[Vue] Typescript 스니펫 만들기

snippet (스니펫) : vscode 에서 제공하는 자동완성 코드 기능.  커스텀 제작 가능

 

1. 상단메뉴 > File(파일) > Preferences(기본 설정) > User Snippets(사용자 코드 조각)

2. typescript 로 작성하면 기 설정된 경로에 typescript.json 파일이 열림. 해당 파일에 코드 작성 후 저장.

3. 사용할 때에는 스크립트 블럭(또는 파일) 안에서 prefix 로 등록한 키워드를 입력하면 자동완성!

 

기본으로 사용하는 import 설정 등을 미리 작성해두고 사용하면 편하다. 아래는 책* 보고 작성한 파일코드.

 

{
	"togetherVueTs": {
		"prefix": "togetherVueTs",		// 사용할 prefix
		"body": [
			"import { Vue, Component, Prop, Watch } from 'vue-property-decorator';\r",
            "import WithRender from './${1:${TM_FILENAME_BASE}}.html';\r",		// html과 스크립트를 분리해서 사용 할 경우 스크립트 파일과 동일 위치에 존재하는 스크립트 파일명.html 파일을 template 형태로 import
			"\r",
            "@WithRender\r",		// html 파일을 import 한 경우 템플릿을 Vue에 포함
			"@Component\r",
			"export default class ${1:} extends Vue {}\r",
			""
		],
		"description": "Together Vue typescript"
	},
	"consolgelog": {
		"prefix": "cl",
		"body": [
			"console.log(${1:})",
		],
		"description": "console.log"
	}
}

 

나는 html 이랑 script 분리가 영 불편하고 번거로워서 vue 파일로 통합해서 사용하기 때문에 WithRender 항목은 작성하지 않았음. consolgelog 는 뭔지 모르겠다. 보고 나중에 추가수정 하던지 할 예정.

 

* 참고서적 : 타입스크립트, AWS 서버리스로 들어올리다. (저자 : 신규하)