Snippet 이란
스니펫(Snippet)은 재사용 가능한 소스 코드, 기계어, 텍스트의 작은 부분을 일컫는 프로그래밍 용어이다. 사용자가 루틴 편집 조작 중 반복 타이핑을 회피할 수 있게 도와준다. (위키백과)
이번 글에서는 VS code에서 snippet을 사용해서 간단한 키워드 만으로 사용자가 지정한 템플릿을 불러오는 방법을 소개하겠습니다.
1. snippet 코드 만들기
- snippet 코드를 만들어주는 페이지입니다.
snippet generator
Snippet generator for Visual Studio Code, Sublime Text and Atom. Enjoy :-)
snippet-generator.app
- 아래 이미지는 사용 예시입니다.
- (좌측 상단 왼쪽 칸) Description ... : 템플릿 이름
- (좌측 상단 오른쪽 칸) Tab trigger... : 정의한 템플릿을 vs code에서 불러올 때 사용할 키워드
- (좌측 하단) your snippet ... : 사용할 템플릿
각 칸에 필요한 것들을 작성하고 우측 상단에서 VSCode를 선택하면 우측 하단에 자동으로 snippet 코드가 생성됩니다.
예시에서 사용한 ${TM_FILENAME_BASE} 는 해당 js 파일 이름으로 정의됩니다.
2. snippet 적용하기
MacOS의 경우,
- VScode를 열고 Code > Preferences > User Snippets 를 클릭합니다.
2.javascriptreact를 입력하면 뜨는 javascriptreact.json 파일을 클릭합니다.
3. javascriptreact.json 파일이 생성됩니다.
3. VSCode 설정 변경
VScode 창 하단 좌측에 열어 둔 파일의 프로그래밍 언어가 표시됩니다.
이를 Javascript React 로 바꿔주어야 합니다.
1. Javascript React가 아니라면 해당 부분을 클릭 후,
아래 이미지에서 Configure File Association for '.js'... 를 클릭해줍니다.
2. 그리고 javaScript React를 선택해줍니다.
4. VSCode에서 Snippet 사용하기
- .js 파일을 만들어 사용자가 정의한 키워드를 입력하고 tab을 누르면
- 아래와 같이 정의한 템플릿이 자동 생성됩니다.
References
- 리액트를 다루는 기술 (김민준)
'프로그래밍 언어 > Javascript' 카테고리의 다른 글
| [Javascript/Codility] Lesson2) Array : CyclicRotation (0) | 2021.04.20 |
|---|---|
| [Javascript/Codility] Lesson 1) Iterations : BinaryGap (0) | 2021.04.20 |
| [프로그래머스 코딩테스트 연습] 스택/큐 4. 기능개발 (Javascript 자바스크립트) (0) | 2021.03.02 |
| vanila javascript 환경에서 redux 사용하기 (0) | 2021.02.18 |
| map() 함수 사용하기 (0) | 2021.02.16 |
