Atom과 Sublime Text를 사용했지만 최근 VScode의 장점을 알아차리고 완전히 포로가 되었습니다.
그래서 저는 TypeScript 학습을 겸하여 VScode의 확장 기능을 만들어 보려고 합니다.

환경

windows10Pro (Mac를 시도하지 않았지만 아마 같은 느낌일 것이다...)

환경 구축

Node.설치 js

TypeScript를 설치하기 위해 Node.js가 있기 때문에 우선 이것을 설치합니다
Node.js 설치 프로그램사이트 제목에서 획득 가능
투고 시 권장 버전 및 최신 버전, 다운로드 및 설치 권장 버전 8.12.0
설치가 성공했는지 확인하려면 명령줄에 다음 내용을 입력하십시오

$ node -v

문제가 없으면 버전 번호가 표시됩니다.

npm의 확인

Node.js를 설치한 후 npm라는 패키지 관리 도구를 덧붙여서 정상적으로 작동할 수 있는지 확인하십시오
↓ 명령행을 입력한 후 버전 표시

$ npm -v

설치 유형 스크립트

테마 유형 스크립트를 설치하려면 다음 명령을 실행하십시오.

npm install -g typescript

설치가 성공했는지 확인하려면 다음 내용을 입력하고 버전을 표시하십시오 (ry

tsc -v

Hello World!(TypeScript Edition)

이제 TypeScript로 프로그래밍할 수 있으므로 표시Hello World! 의식을 진행합니다
다음 파일을 적절한 디렉토리에 저장합니다.
HelloWorld.ts

var message: string = "Hello World!"
console.log(message)

저장 완료 후 명령줄에서 컴파일

tsc HelloWorld.ts

번역에 성공하면 생성될 것이다HelloWorld.js이것은 실제 실행 파일입니다. 이 파일을 실행하려면 명령줄에 다음과 같은 내용을 입력하십시오

node HelloWorld.js

Hello World! 표시하면 의식이 완성된다

VScode 설치

두 번째 주제 VScode 설치(Visual Studio Code)
설치 프로그램은 사이트 제목 에서 배포, 다운로드 후 실행 및 설치 프로그램 설치
설치 설정은 경로, 마우스 오른쪽 버튼 클릭으로 VScode에서 열 수 있으므로 원하는 대로 설정하지 마십시오.

설치 확장

다음은 확장 기능 개발이기 때문에 최소한의 확장 기능을 설치해야 한다
정사각형 또는 직사각형 중첩 아이콘 클릭

저는 다양한 확장 기능을 투입했지만 확장 기능을 개발하려면 TSLint가 필요하기 때문에 이것만 설치합니다.
Marketplace에서 확장 기능을 검색하는 입력란에 TSLint 표시, 설치
SS의 다른 확장 기능과 편리한 확장 기능은 Qiita와 구글 선생님에게 물어보면 어떤 글을 봐야 할지 고민이 많으니 참고할 만한 것을 추천합니다VSCode의 권장 확장 기능 24 선택 (및 Tips 약간)

Hello World!(VScode 확장 기능 개발)

여기까지 왔는데 VScode의 확장 기능을 개발할 수 있을 것 같아서 예를 들면 Hello World!표시식 진행
확장 기능 개발을 위한 전용 파일 준비
친절하게 말하자면, 공식 사이트 (영어) 의식의 절차가 있기 때문에 그것을 따른다
generator-code를 설치합니다. 이generator-code는 새로운 프로젝트를 위한 최선의 실천과 도구를 만들고 VScode의 확장 개발 템플릿을 생성할 수 있습니다.

npm install -g yo generator-code

설치 후 다음 작업을 수행하여 확장 기능의 템플릿을 만듭니다.

yo code

이렇게 하면 다음 명령줄이 보이기 때문에 이번 선택New Extension (TypeScript)
이후에도 많은 질문(확장 기능명과 작성자 등)을 받을 수 있기 때문에 이 근처에서 자유롭게 입력할 수 있다
잠시 기다렸다가 명령행을 실행하는 폴더에 다양한 파일을 만들고 싶었다
VSCode에서 생성된 디렉토리 열기
켜고 F5 누르기
켜면 새 VScode 창이 표시되고 Ctrl+Shift+P 에서 명령 팔레트가 표시되며 여기에서 Hello World 를 입력하면 실행됩니다.
그래서 오른쪽 아래에서 통지Hello World를 보내면 의식이 성공합니다!

마지막

이제 TypeScript를 사용하여 VScode 확장 기능 개발 가능
원하는 확장 기능을 개발하여 보다 편리한 VScode로 만들어 보세요!