강디너의 개발 일지

Vscode Extension (플러그인) 만들기_1 본문

Javascript/삽질

Vscode Extension (플러그인) 만들기_1

강디너 2018. 11. 20. 14:36
728x90

Vcode Extension 만들기

(플러그인 만들기)



어떤 발표자료를 보고..  함수이름 만들때 번역기를 자주가는 나를 마주치고 결심했다.

영어못하는 나를 위하여 번역 플러그인을 만들기로...

만들려고 조사좀 해보니 이미 하나가 만들어져있.....ㅠ

(제꺼 아녀요)

https://marketplace.visualstudio.com/items?itemName=sculove.translator#overview


고수님들이 이미 만들어 놓으셔서..

내 수준에 맞게 만들어 보려고 한다.



우선 vscode 에서 지원하는 extension 만드는 예제 따라하기 (이게 제목인가)



vscode 공식 홈페이지

https://code.visualstudio.com/docs/extensions/example-hello-world


사진에는 누락되었으나 


npm install -g yo generator-code   를 쳐줍니다.


설치 후 yo code 입력시 아래 화면이 뜹니다.



타입스크립트로 만들어서 앤터 !



열심히 설치가 됩니다.



hello-world로 들어가서 작업하라는데

안됩니다.

안되요



디버그 눌러도 없다고 뜨고

만들어서 해봐도 안된다 뜨고..

(이 오류때문에 안되는줄 알고 포기했었던..)



하지만 하는 방법을 찾았습니다 !

요게 vscode 에서 디버그 ? 경로잡고 해주는 파일 같은데 (아닐수도)


workspaceFolder 가 cd로 들어가져도 안바뀌나봐요..


아예 새창을 띄우시고 hello-world 폴더를 띄우셔서


디버그 하시면 됩니다.




디버그에 성공하시면 새창이 뜹니다 !

실패한게 아니에요 !



여기서

Mac 은 Cmd +shift + p

윈도우는 ctrl + shift + p ?? (제가 지금 맥이라..)

단축키를 누르시면 뜹니다. 거기에 hello world를 치시면 ~




아래에 hello world 라고 출력되었습니다 ~




다음에는 조금 응용해서 발전하는걸 보여드리겠습니다.. !



'Javascript > 삽질' 카테고리의 다른 글

GraphQL 이란  (0) 2018.12.02
디자인 패턴 : Flux  (0) 2018.11.26
디자인 패턴 : MVC  (0) 2018.11.23
Vscode Extension (플러그인) 만들기_3  (0) 2018.11.23
Vscode Extension (플러그인) 만들기_2  (0) 2018.11.23
커피한잔...
Comments