vscode extension icon 찾기

오유찬·2025년 4월 7일

개발

목록 보기
1/5

vscode extension을 개발하는데 secondary sidebar에 icon을 설정해두고 싶은데 자꾸 사라지고
다음과 같은 에러가 뜬다...

icon 사라지는 이유

activity bar로 설정해서 secondary sidebar로 옮기려고 의도로 만들었기 때문에 primary sidebar을 드래그해서 secondary sidebar로 옮겼더니 icon이 사라진다.다시 복구시켰더니 icon이 돌아왔다...
이거 찾는데 5시간 걸렸다. panel에 있을 때는 명령어로 입력해서 채팅창을 뜨게 해서 문제가 없는 줄 알고 sidebar로 변환시켰더니 위 사진과 같은 에러랑 icon 사라지는 문제 동시에 발생해서 해결하는데 머리 터질 뻔..

그래도 찾았으니까 다행이다. 이제 panel에 있을 때는 chat UI가 바로 떴는데 side bar로 할 때는 안되는 이유를 찾아봐야겠다..

내가 하려고 했는데 불가능했던 짓
activity bar에 icon은 뜨게 하면서 secondary sidebar에 chatting ui 뜨게 하려고 했던 것.
활동 반경이 아예 다르다. 처음부터 불가능한 짓이었어.

chatting UI 안 뜨는 이유

찾기로는 vscode에서 webview를 tree 데이터로 인식했기 때문이라고 한다.
바보같은 자식..
그래서 어떻게 하면 고칠 수 있을까?

chat view가 따로 있네

github copilot만 연결되는 게 아니라 따로 api 받아와서 최적화 시킨 copilot 넣을 수 있다.
일단 임시 응답만 가능하도록 만들고 진행해보자.

onRequest(request, response, token) 안되는 이유

최신 API인데 안정화된 vscode에서는 안 돌아갈 수 있다. vscode Insider에서 이용해보자.

vscode-dts dev로 chatParticipant를 다운받으려고 했는데 아직 github에 업로드되지 않아 실패했다.

From: https://raw.githubusercontent.com/microsoft/vscode/main/src/vscode-dts/vscode.proposed.chatParticipant.d.ts
Read more about proposed API at: https://code.visualstudio.com/api/advanced-topics/using-proposed-api
Failed to get https://raw.githubusercontent.com/microsoft/vscode/main/src/vscode-dts/vscode.proposed.chatParticipant.d.ts

흠 그런데 찾아보면 있다.
src/vscode-dts/vscode.proposed.chatParticipantPrivate.d.ts 이 경로에 있는 걸 확인할 수 있는데 failed 한 경로를 보면 좀 다르다.

이걸 맞춰주면 될 것 같은데 그냥 chatProvider 쓰기로 했다.공식 API가 쓰기에 편하니까 만약 이 글을 읽고 해보고 싶은 사람이 있다면 이 부분을 유의해서 하면 시간을 좀 아낄 수 있으려나

지금 내가 하려는 건 vs code chat에다가 AI팀이 제공해주는 copilot을 백엔드 서버에서 연결하고 이걸 extension에 넣는 건데 사실 채팅창 띄우고 백엔드에 붙이는 걸로만 해도 충분하다. 그러니까 일단 후자로 진행해야겠다. 해보고 싶긴 한데 웹+네트워크 관련 보안 프로젝트를 더 하고 싶으니까.

gpt 이용해서 해보고 있는데 왜 계속 sidebar view를 원한다고 했는데 panel 방식으로 만들어주고 있는걸까. sidebar로 만들어달라고 하니까 안된다.

webview sample를 보고 작성해야겠다.

public static readonly viewType = 'calicoColors.colorsView'; 여기에 있는 calicoColors.colorsView';는 뭘까.

"contributes": {
		"views": {
			"explorer": [
				{
					"type": "webview",
					"id": "calicoColors.colorsView",
					"name": "Calico Colors"
				}
			]
		},

id였네.

vscode-extension-siderbar-html 이게 참조해서 바꾸기 더 좋아서 이걸로 진행하려고 한다. 앞으로는 그냥 gpt 쓰지말고 내가 해야겠다. 길을 뭐 이렇게 많이 돌아가

와 드디어 했다..!!

이제 채팅창으로 전환하고 css 좀 꾸미고 아이콘 위 아래 추가하는 식으로 진행하면 되겠다.

profile
열심히 하면 재밌다

0개의 댓글