점핑배틀외주 프로젝트5-실수를 개선하기 위한 익스텐션을 만들어보자

도입 배경

이제 대부분의 작은 오류들은 vscode와 깃허브 코파일럿이 잡아주고 추천해주는데, 문제는 작은 오타들의 발견은 어려운 경우가 많다.
이번에도 당연 로직이 문제일 거라고 생각하고 gpt에게 코드를 물어봤는데도 계속 에러가 터져 한참을 헤매다가 html이 .htfl로 오타가 난 걸 발견 못해 시간을 낭비하여 차라리 익스텐션화 시켜서 앞으로의 프로젝트에서도 써보면 어떨까 하는 생각을 가지게 되었다.

미리 준비할 것

나야 이전 개발에서 nodejs를 설치해두었기 때문에 이 부분에서 고생을 하지 않을 줄 알았는데 착각이었다.
오랫동안 안써줬더니 너무 많은 버전업이 되어서 npm으로는 깔 수가 없던 상황이라 노드js의 공식 홈페이지에 들어가 콘솔창에서 다운로드를 진행해주었다.
아래 팁 외의 셋팅들은 구글링해서 vscode익스텐션 만들기로 나오는 상위 3개 블로그를 참고해서 준비해주었다.
아 그리고 나처럼 vscode업데이트를 게을리 했다면 HELP에 들어가서 꼭 업데이트도 해주어야한다.

TIP

나의 경우 가끔만 nodejs를 쓸 것 같아서 여러개의 버전이 필요없기에 그냥 프로젝트 내애다가 콘솔창으로 냅다 설치를 했지만 익스텐션을 실제 배포하거나 nodejs를 주 언어로 쓰는 사람이라면 도커를 통해 관리하는 것을 추천하고 싶다.
왜냐하면 일단 node의 이전 버전이 필요한 일이 생길 수도 있고, 프로젝트 별로 다른 버전을 썼다면 그에 대해 쉽게 알기 위해서다.
그래도 나처럼 로컬에 까는건 또 권하지 않는 게 도커에 올려놓으면 이후 다른 프로젝트에도 재활용을 하기 쉽기 때문

.json설정이 꼬인 경우

나는 이 부분에서 조금 고생했다.
초반에 vscode버전과 nodejs버전 이슈 때문인지 .json이 여러개 생겨버린 데다가 뭔가 안맞아서 애를 먹었다.
팁을 알려주자면 name에는 string으로 내 프로젝트명이 될 애를 적고 commands의 값들은 각각 “command”: “extassist.vscode에서 사용할 식별자”,title에는 내가 팔레트에 표시시킬 진짜 명령어를 적으면 된다.

기능

일단은 점핑배틀 외주에서 쓰기로 했지만 이후 다른 flask프로젝트에서도 쓸 수 있게 하기 위해 내 코드 스타일에 맞추어, html을 체크박스에서 선택시 html에 대한 파일명 검사를 진행하고 jpg,png등의 경우 /asstes/img폴더를 확인하도록 해주었다.

• 파일의 확장자별로 다른 폴더 검사(효율성을 높이기 위해)
• 단순한 확장자명 오타 검수(ex-id.html을 id.htfl로 오타낸 경우)
• 사용하지 않는 .html파일 및 존재하지 않는 파일명 사용시 알려줌(ex. 504.html이 없는데 사용시 알려줌)
  • 비슷한 파일명을 추천해줌 정도가 있다.
    물론 이정도는 사람이 직접 검수해도 되지만, 전체 코드 몇천줄 이상 한 파일당 코드가 1000줄이 넘어가면 검수의 한계가 있기에 생각보다는 유용하게 사용중이다.

    만드는 과정