vscode snippet 만들기

console.log로 로그를 찍는다거나 컴포넌트를 만들때 함수형 컴포넌트를 만들 때의 구조를 만들때라던지 기본적으로 만들어야하는 뼈대를 작성하는 부분을 이제는 완전히 익혀져서 snippet을 사용하여 사용하고 있었다.

---

👉🏻 결론적으로 리액트를 사용자 중, 함수 표현식 등 설정 없이 스니펫을 사용하기 원한다면 아래 extension(ES7+ React/Redux/React-Native snippets)을 다운받아 사용하시길 권장한다.

ES7+ React/Redux/React-Native snippets

rafce라는 스니펫은 함수 표현식을 빠르게 생성해주어 코드생산성이 빠르게 증가한다.

👉🏻 만약 다른 스니펫을 설정하고 싶거나, 스니펫 단축키를 바꾸고 싶다면 더 아래에 설정방법을 작성해놨다.

---

Snippet 사용자화

맥북기준 단축키 command+p 누르고 global-snippet-js.code-snippets 파일 클릭하기

이제 파일에서 스니펫을 설정하면 된다. console.log를 cl이라는 스니펫으로 설정하는 것을 봐보자.

"console.log": {
    "prefix": "cl",
    "body": ["console.log('$1');", "$2"],
    "description": "Log output to console"
},

 

prefix : 단축키

body : 실제 코드

description : 스니펫 설명

 

텍스트 커서

$1, $2와 같은 것들은 텍스트 커서 위치 이다. 

${순서}로 작동한다. 따라서 cl을 입력하고 엔터를 눌렀을 때 ()사이에 커서가 위치하게 된다. 

스니펫 변수

나는 아래와 같이 styled-components가 들어간 함수형컴포넌트 코드의 뼈대를 만들고 싶었다.

import { styled } from "styled-components";

function Title() {
	return <div></div>
}

export default Title;

 

그러기 위해선 파일명을 가지고 와야하는데 이는 스니펫 변수로 가져올 수 있다. 

스니펫 변수들은 아래에서 확인할 수 있고, 파일명은 ${TM_FILENAME_BASE} 을 사용하면 된다. 

https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables

Snippets in Visual Studio Code

그래서 만든 스니펫 코드는 아래와 같다.

"Component with stytled-components": {
    "prefix": "rfs",
    "body": [
        "import { styled } from \"styled-components\";",
        "",
        "function ${TM_FILENAME_BASE}() {",
        "  return <div>${1}</div>",
        "}",
        "",
        "export default ${TM_FILENAME_BASE};"
    ],
    "description": "Component with stytled-components"
},

 

rfs를 누르면 예쁘게 파일명에 따른 코드가 뜰것이다! 🥴