[ONEBITE-REACT] JS 기본 - VSCode 준비하기

VSCode 에디터 준비하기

VSCode 에디터를 설치한다.

코딩을 돕는 플러그인을 설치한다.

prettier

ctrl + s로 저장만 해도 코드를 자동 정렬해주는 플러그인

설치가 완료되면 윈도우는 커멘트 쉼표를 눌러 설정 검색창을 열고 format on save를 검색하여 아래 이미지처럼 체크한다.

Error Lens

코드에 오류가 있을 시 해당 입력창에서 바로 오류를 보여주는 플러그인

Live Server

ctrl + s만 누르면 현재 작업 중인 파일을 웹 브라우저에서 별도로 새로고침을 하지 않아도 띄워주는 플러그인.

VSCode에서 ctrl + shift + P를 누른 후 live server라고 검색하여 Open with Live Server를 눌러 실행시켜 준다.

이 과정은 .js파일이 아니라 index.html 페이지에서 실행해야 한다.

종료하는 법은 VSCode 하단에서 Port 옆 아이콘을 누르면 된다.

Tab Out

필수는 아니지만 "" 따옴표나 () 괄호 등을 입력할 때 하나만 입력해도 자동으로 닫히게 되는데 이 때 이 내부에서 빠져 나오기 위해서는 화살표나 end키 등으로 빠져 나와야 하는데 오른손의 동선이 멀어진다.

이것을 Tab키로 빠져나올 수 있게 해주는 익스텐션이다. 다만 이 경우가 아닐 때 탭을 써야하는 경우 의도치 않은 상황이 발생할 수 있다.

설치 후 ctrl + shift + p를 눌러 toggle tab out을 검색하여 눌러 active 상태로 바꿔주면 된다.

Markdown All in One

이 역시 필수는 아니지만 깃허브에 readme.md 파일을 작성하거나 TIL 작성을 위해서나 또는 티스토리에 markdown으로 포스팅하기 위해서는 해당 웹 에디터에서 사용하는 방법도 있겠지만 제약이 많고 불편하여 Typora 등의 별도의 에디터를 사용하는 경우가 많은데, VSCode 자체를 마크다운 편집기로 만들어주는 익스텐션이다.


또한 마크다운에서 자주 사용하는 문법을 편리하게 자동완성으로 입력할 수도 있고, 위에서 소개한 Tab Out 익스텐션과 함께 사용하면 따옴표나 괄호 자동닫힘에서 빠져 나오기도 편리하여 마크다운 작성에 시너지가 붙는다.
VSCode 내에서는 마크다운 소스코드로 보이고, 측면 사이드바 여는 아이콘을 눌러서 미리보기창을 띄울 수도 있다. (단축키 ctrl + k 누른 후 떼고 v)

그 외 팁

웹 브라우저 콘솔창의 위치가 불편하다면 점 세 개를 클릭해서 위치를 변경할 수 있다.

VSCode 시작하기

자바스크립트를 실행하기 위해선 INDEX.html과 Script.js 파일이 필요하다.

index 파일은 기본 골격을 html:5로 맞추고, 필요에 따라 head 내부나 body의 닫는 태그 직전에

<script src="script.js"></script>

위의 태그를 넣어 js 파일을 링크시켜준다.

console.log("Hello, World!")를 작성해보고 웹 브라우저에서 잘 연결이 되었는지 콘솔에서 확인해본다.