[ Editor] VS Code Html,JS 개발 환경 구축

- 폴더생성 및 파일 지정

 

 

1. 사진과 같이 첫번째 탭을 누른 뒤 "폴더 추가" 를 클릭하여 파일들을 저장할 폴더 지정해줍시다!

 

2. 저는 D드라이브에 JS 폴더에 지정을 해주겠습니다.

3. 그럼 JS폴더가 지정되어 나오게됩니다.

 

4. test.html과 test.js 파일을 만들겠습니다.

5. test.js에는 test.js 파일에 콘솔에 로그 찍는 코드를 작성했습니다.

6. vscode에는 자동완성기능이있어 html만입력한 후 사진과같이 "html:5" 를 클릭해줍니다.

7. 사진과같이 기본적인 html 을 바로 작성할수있게 자동완성이 됩니다.

그 후 test.js파일과 연결시킵니다.

 

- JS 실행

8. 5번째 탭  Extentions 메뉴에서 Code Runner를 설치해줍니다.

9. 코드를 실행하면 정상적으로 출력됩니다. (만약 해당과정에서 깨지는 현상이 나타난다면 Node.js를 설치하면 해결됨.)

 

-HTML 실행

10. 이것또한 5번째탭인 Extentions 메뉴에서 "open in browser" 를 설치해줍니다.

 

11. 마우스 우클릭후 "Open In Default Browser" 를 클릭

12. 성공적으로 html,js 개발 환경 구축 끝