VSC 자동완성 설정하기(feat.개발 효율 높이기)

리액트로 개발하다 보면 반복적으로 작성해야 하는 코드들이 있다. 이런 것들이 쌓이다 보면 은근 귀찮고 스트레스가 누적 되기도 한다. 리액트 코드 스니펫 익스텐션이 있긴 하지만 이걸로는 부족했다. 그렇게 방법을 찾다가 정말 유용한 기능을 발견하게 되었다. 바로 VSC에서 지원하는 사용자 코드 조각 구성(configure user snippets)이다. 이거..정말 좋다. 쓰면서 개발 효율이 정말 높아졌다.

사용자 코드 조각 구성(Configure User Snippets) 사용하기

1. 명령 팔레트 실행(맥기준 shift + cmd + p)

왼쪽 하단 관리탭에서 실행해도 됩니다

2. 사용자 코드 조각 구성 실행

사용자 코드 조각 구성을 실행합니다

언어마다, 프로젝트 또는 전역으로 코드 스니펫을 만들 수 있습니다

파일 이름을 입력합니다

위와 같은 화면이 나옵니다

어느 경우에 사용할까?

이제 본격적으로 사용 해보자. 이 기능의 좋은점은 내 마음대로 코드를 자동화 할 수 있다는 점이다. 나같은 경우 리액트의 모듈 CSS를 작성하는 게 정말정말 귀찮았다. 관련 익스텐션도 없어서 힘들었는데 해당 기능을 통해 빠르게 코드를 만들 수 있었다.

 

예를 들어

'styles.' 작성하기 너무 귀찮지 않나요? 그..그렇죠?

키워드 s만 입력해도 자동으로 'styles.'이 작성된다. 그렇다면 css를 import 해올 땐?

import하기도 귀찮잖아요..그렇죠??

키워드 isf만 입력하면 "import styles from './.module.css'"가 자동입력 된다. 정말정말 편리하다. 이렇듯 사용성은 무궁무진하다. 정말 다양하게 자주 사용하는 코드를 스니펫으로 만들어서 사용할 수 있는 것이다.

 

내가 자주 사용하는 코드 조각은 다음과 같다.(복붙해서 사용 해보세요. 👍)

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

  "Async arrow function": {
    "prefix": "aaf",
    "body": ["async () => {\n  $1\n}"],
    "description": "Insert async arrow function"
  },

  "Arrow function": {
    "prefix": "af",
    "body": ["() => {\n  $1\n}"],
    "description": "Insert arrow function"
  },

  "Try Catch": {
    "prefix": "te",
    "body": "try {\n  $1\n} catch (err) {\n  \n}",
    "description": "Insert Try Catch"
  },

  "Throw new error": {
    "prefix": "ne",
    "body": "throw new Error('$1')",
    "description": "Insert throw new Error"
  },

  "Class and implements": {
    "prefix": "ci",
    "body": "class name$1 implements {  \n\n}",
    "description": "Class and implements"
  },

  "Import styles": {
    "prefix": "isf",
    "body": "import styles from './$1.module.css'",
    "description": "Import styles"
  },

  "styles": {
    "prefix": "s",
    "body": "styles.$1",
    "description": "auto styles"
  }
}

• prefix : 자동완성을 위한 키워드를 입력
• body: 자동완성이 되는 코드를 입력
• $1: 자동완성이 되었을 때의 커서 위치
• description: 내용에 대한 설명, 키워드 입력 시 설명도 표시 됨

이렇게 코드 자동완성을 내 입맛에 맞게 설정할 수 있다. 개인적으로 정말 만족했고 신기했던 기능이라 공유하게 되었다. VSC! VSC! 🚀