VSC 개발 환경설정 TIPs

방충림·2023년 3월 7일
3

Visual Studio Code

목록 보기
1/2
post-thumbnail

유용한 TOOL

크롬 브라우저

DownLoad Path : https://www.google.com/chrome/

Visual Studio Code

DownLoad Path : https://code.visualstudio.com/download

cf.

intellij - IDE ( Integrated Development Environment : 텍스트에디터, 컴파일러, 디버거, 링커, 퍼포먼스 분석 등이 한번에 포함된 툴)

Visual Studio Code - Text Editor
: 비록 Text Editor 이지만 막강한 플러그인이나 익스텐션을 통해서 IDE 못지않게 파워풀한 기능을 사용할 수 있음.

Node.js

DownLoad Path :

Download | Node.js

터미널 명령어

node -v : 노드가 잘 설치되었는지 노드 버전 확인
node : 노드 모드로 진입, 브라우저의 console처럼 실시간으로 코드를 작성해서 출력해볼 수 있음.
node xxx.js : 노드가 실행이되면서 xxx.js 안에 있는 코드를 실행해줌.
노드몬 : 노드는 파일을 한번 읽고 실행하고 끝나지만, 노드몬은 계속해서 파일을 모니터하고 있다.
DownLoad Path : cmd ⇒ npm install nodemon -g (”글로벌하게 설치할거다”)
nodemon xxx.js (실행)



추천 EXTENSION

시간 날때 이것도 정리해놓쟈….

https://www.youtube.com/watch?v=XMfyfNZooi4

Prettier

: 코드를 더럽게 작성해도 포멧을 맞춰줌.


Beautify (서비스 종료)

: 코드 정렬


Material Icon Theme

: 파일 앞에 이쁜 아이콘을 붙여줌.


Material Theme

: 이쁜 배경색과, 색상 지정할 수 있도록 해줌.
Set Color Theme 버튼을 눌러 테마 설정 (현재 Material Theme Darker 사용중)


Live Server

: HTML을 작성하면 실시간으로 브라우저에 업데이트 해줌.


Braket Pair Colorizer (현재는 VSC 자체에 내장 되었음)

: 괄호에 색깔을 주어서 코드의 가독성을 높여줌


Indent-rainbow

: 들여쓰기 된 부분을 레인보우 컬러로 하이라이트해주어 가독성을 높여줌.



Auto Rename Tag

: HTML작성시 여는 태그 수정할 때, 닫는 태그도 자동으로 수정해줌.



CSS Peek

: HTML의 class 속성에서 Ctrl키를 누른 상태로 좌클릭을 하면 정의된 CSS파일로 바로 옮겨감.


HTML CSS Support

: HTML에서 CSS의 자동완성을 이용할 수 있음 (CSS에서 미리 클래스를 만들어놨다는 가정하에).


Korean Language pack



Json Pretty Printer



VSC 환경설정

JavaScript > Preferences: Quote Style

: 쌍따옴표 대신 따옴표로 쓸 것을 설정.

Setting ( windows : Ctrl + , / Mac : Cmd + , ) ⇒ quote 검색

Markdown Preview

리드미 파일 작성시 어떻게 보이는지 확인하면서 작성하고 싶을 때 사용.

Ctrl + p ⇒ >Open {review

profile
최선이 반복되면 최고가 된다.

0개의 댓글