https://code.visualstudio.com/Download
다운로드 홈페이지 들어가서 자신의 컴퓨터에 맞게 다운로드 해주면된다
Visual Studio Code는 마이크로소프트(Microsoft)에서 만든것이며 Text Editor 이다.
Text Editor 로는 아톰, 서브라임,비주얼 스튜디오 코드가 있다
익스텐션(연장하다)을 설치하기위해 단축키 Ctrl + Shift +X 를 눌르거나 왼쪽 상단에 4개의 사각형을 눌러줘도 된다
Material Theme
Visual studio code의 색상을 바꿔준다. 색 테마 설정을 눌르고 자신이 원하는 색을 설정하면 된다
Material Icon Theme
html, js, css 등 아이콘테마 변경이 가능하다. 머티리얼 외에도 많은 테마가 있으니 취향에 맞게 선택하면된다
Prettier - Code formatter
작성하는 코드에 색상을 넣어 구분하기 쉽게 해준다
단축키 ctrl + , 누르면 Code세팅창으로 이동하게 된다.
1. Visual Studio Code 가 번역이 영어이면 'prettier' 검색해서 Tab Width를 4에서 2로 바꾸는걸 추천한다
- TabWidth = Tab키를 누를시 스페이스바 2번 누르는 효과가 나온다.
2. save 검색 후 Format On Save 를 클릭해준다.
- Format On Save = 단축키가 상당히 불현하고 외우기 어렵다보니, 저장과 동시에 Formatting을 해주는 기능을 이용하는 것이 훨씬 간편하고 좋다
3. prettier quote 검색 후 Quote Style 2개다 auto -> single로 변경해주자
- 대부분 single Quote을 이용하기 때문에 auto에서 single로 바꿔준다
BracketPairColorizer
{ } 괄호에 색감을 주어서 코드의 가독성을 높여주는 기능이다 괄호마다 색 지정이 달라져서 빠트린 괄호가 있는지 확인 이 가능하다
indent-rainbow
indent - rainbow 는 들여쓰기 된 부분만큼 배경이 하이라이트 되어 코드를 읽을 때 도움을 준다
Auto Rename Tag
HTML 편집할 때 큰 도움이 되는 기능으로 앞 태크를 바꾸면 자동적으로 마무리 태크 역시 자동으로 변경이된다
CSS Peek
어떤 Css가 적용되어있는지 빠르게 확인할 수 있는 기능이다 class나 id가 적용된 HTML 문서 내 원래 태크 부분을
Ctrl + 왼쪽(마우스)클릭하면 해당 스타일로 이동하게된다
HTML CSS Support
클래스 별로 스타일을 적용한 후에, html문서로 돌아와 클래스 값을 변경하고 싶을 때 자동완성으로 추천된다
Live Server
html이나 css 수정 시 웹페이지가서 f5를 눌러 수정하기를 해야하는데 live server는 html 수정 후 저장하면 자동으로 수정이 되게 해준다
사용방법 html 작성 한 곳에서 Ctrl + Shift+ P 를 눌러 명령 팔레트를 띄우고 Live Server : Open with Live Server를 클릭
그러면 웹페이지가 나오고 html 수정후 Ctrl + S 눌러 저장만 해주면 자동으로 수정이 되는걸 볼수가 있다
Markdown Preview Enhanced
이건 git md파일에 올리때 사용한다
readme.md에 작성후 ctrl+shift+p 를 누르고 Markdown Open Preview를 작성 해주면된다
그러면 우리가 작성한 md파일을보여주고 작성시 git에 올라갈때 어떻게 올라가는지 보여준다
Git Graph
git에 올린것들을 그래프로 보여준다
open in browser
.html 파일에서 ALT +B 단축키를 사용하영 웹페이지를 실행 할 수 있다
Code runner
javaScript 콘솔 출력하고싶을때 Ctrl + Alt + n 을 하면 실행이 가능하게 해준다
'개발환경' 카테고리의 다른 글
| VM(VirtualBox) Cent Os 7 설치 (0) | 2022.11.26 |
|---|---|
| Visual Studio Code 필수 단축키 정리 (0) | 2021.09.24 |
| Intellij 콘솔창 색깔 설정 (0) | 2021.07.13 |
| Tomcat(톰캣) 설치 (0) | 2021.05.29 |
| Windows java 설치 (0) | 2021.05.29 |