Visual Studio Code에서 Javascript 실행하는 개발 환경 구축

Javascript 코드도 Visual Studio Code에서 간편하게 실행해 볼 수 있습니다.

그동안 개발자도구에서 힘겹게, 조심스럽게 코드 작성해서 테스트를 진행하셨던 분들에게 유용할 것입니다.

 

 

 

 

---

 

1. 타겟 유저

- 간단한 Javascript 코드를 작성해서 실행/테스트해보고 싶은데, chrome 개발자도구에서 불편하게 하는 사람

- 다음과 같은 결과물을 원하는 사람

 

 

2. 환경 구축

2.1. Visual Studio Code 설치

- 개인 PC의 OS에 맞게 다운로드하여 설치한다.

- https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

 

2.2. Node.js 설치

- 개인 PC의 OS에 맞게 다운로드하여 설치한다.

- 옵션 변경 없이 설치 진행한다.

- https://nodejs.org/en/download/

Download | Node.js

 

 

2.3. Code Runner 설치

- Visual Studio Code 실행 후, 아래와 같이 Code Runner 설치

 

 

2.4. Javascript 코드 실행

- 파일 만들어서 아무 코드나 입력 후, F1키를 누른다. 사용할 명령을 타이핑해서 실행한다.

- 많이 사용하는 명령은 다음과 같은 3가지다.

- 한시 방향에 ▷ 버튼도 코드 실행버튼이다.

 

 

3. 잘 안될 때 체크 사항

- 코드를 실행이 안 돼요

    → Nodejs 설치를 스킵하진 않았는지 체크

    → 코드 작성 후, 저장했는지 체크 (저장 안 하면 코드 인식 못함..)

- 코드 변경했는데, 이전 코드 결과물이 나와요

    → 코드 작성 후, 저장했는지 체크 (저장 안 하면 바뀐 코드 인식 못함..)