파일 만들기가 귀찮다.

이번에 프로젝트를 진행하면서 컴포넌트 하나를 index, tsx, style 파일 세개로 나누기로 했다.
index 파일 하나를 굳이 하나 더 만드는 이유는 import 할 떄 더 깔끔하게 보이게 하기 위해서다.
만약 index파일을 만들지 않는다면 import할 때 이렇게 보일것이다.

import Button from './Button/Button';

보기에도 좋지 않고 맘에 들지 않아서 index파일을 만들고 import후 바로 export 해준다.
그럼 아래처럼 깔끔해진다.

import Button from './Button';

근데 깔끔한건 좋은데 파일을 세개나 작성해야하니 조금 귀찮아졌다.
그래서 vscode snippet을 작성해서 사용중이었는데 이것도 귀찮다.
그래서 직접 extension을 작성 해보기로 했다.

설정

처음엔 아무것도 모르니 공식홈페이지의 튜토리얼로 보이는 부분을 따라했다.
설치는 매우 간단하다.

▸ npm install -g yo generator-code

▸ yo code

프로그램 이름이 yo라니 요~ 코드~
요 코드를 실행하면 설정 화면이 나온다.
이름은 뭘로 할건지, 어떤걸 개발한건지 등을 물어보는데 답해주면 된다.
그러면 hello world 코드가 딱 있는데 F1을 누르고 hellow world를 실행하면
오른쪽 아래에 메세지로 hello world가 나타난다.

원하는기능 넣기

처음에는 코드가 어떤식으로 작동하는지 몰라서 좀 많이 헤맸다.
제일 중요한 부분인 경로 불러오기, 오른쪾 클릭시 메뉴 나타내기 부분이 좀 오래 걸렸다.ㅋㅋㅋ
구글에도 찾아보고 했지만 결국 공식 레퍼렌스를 보고 해결했다.
역시 모르는건 일단 공식문서부터 봐야된다.

약간 자바스크립트 이벤트 핸들러 연결처럼 package.json 파일을 설정을 해줘야한다.

  "activationEvents": [
    "onCommand:reactcomponentgenerator.toggle"
  ],
  "main": "./dist/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "reactcomponentgenerator.toggle",
        "title": "컴포넌트 생성"
      }
    ],
    "menus": {
      "explorer/context": [
        {
          "command": "reactcomponentgenerator.toggle",
          "when": "explorerResourceIsFolder",
          "group": "1_diff"
        }
      ]
    }
  },

이런식으로 설정을 해주면 메뉴를 오른쪽 클릭하면 컴포넌트 생성이란 글씨가 나타나게 되며
그 글씨를 누르면 reactcomponentgenerator.toggle 커맨드가 실행된다.
커맨드 내용은 아래의 함수 안에서 처리하면 된다.

export function activate(context: ExtensionContext) {
  context.subscriptions.push(
    commands.registerCommand(
      'reactcomponentgenerator.toggle', 
      async () => {}
  ));
}

완성

많이 생략된것같디만 기분탓이다.
그렇게 해서 이렇게 폴더, 파일을 자동완성 하는 확장을 만들어봤다.

만약 사용을 원한다면 이걸 다운받으면 된다.