VSC(Visual Studion Code)
VSC(Visual Studion Code): 마이크로소프트가 만든 텍스트 에디터
노마트 코더Nomad Coders
<코딩 인생 꿀템 VSC 단축키 5분 정리해드림>
TOP7. ctrl+d: multi selection. 자주 반복되어 사용되는 코드. 반복되는 한 코드를 드래그한 후, 단축키 누르면, 모든 반복된 코드를 자동으로 선택.
TOP6. alt+click: insert cursor. 누르는 곳마다 커서를 생기게 해줌. 편집 끝나면 esc
TOP5. alt+↑/↓: 선택된 코드를 위로, 아래로 움직여 준다.
TOP4. alt + shift + ↑/↓: 복사를 해서 위, 아래로 움직인다.
TOP3. ctrl+/: 주석처리
TOP2. alt + shift + i: current selection. 마우스로 드래그된 영역에 커서가 줄별로 좌르륵 생긴다.
TOP1. alt + shift + drag mouse: column (box) selection 마우스가 가는 곳마다 커서가 생긴다.
ctrl+ home / end: 코드 맨 위/아래로 한번에 올라가기
ctrl + b: toggle sidebar. 사이드바 숨기기
code(file)-preferences-keyboard shortcuts(ctrl+k+s)
<나중에 알면 후회한다. 코딩 인생템 'Prettier'>
구글검색: prettier vscode - instatll - settings - prettier 검색(editor format on save검색- editor:format on save 체크) - Edit in settings.json 클릭 - Editior.formatOnSace: TRUE인것 확인(저장할 때마다 포맷을 이쁘게 자동으로 해줌)
<코딩 인생이 편해진다? VSC 익스텐션 5개 추천>
1. REST Client: REST API를 테스트할 떄 유용.
2. Waka time: 나의 작업내용에 대한 대시보드를 제공.
3. polacode: 코드 깔끔하게 정리해서 다른 사람에게 공유, 이미지 파일로 저장
4. visual studio live share: 다른 사람의 컴퓨터에 연결가능, 협업
5. markdown all in one: 마크다운 파일을 미리보기 할 수 있다.
테마: material theme - settings - color theme
드림코딩by엘리
<비쥬얼 스튜디오 코드 필수 단축키 정리>
ctrl+shift+p, f1: command palette. 비주얼 스튜디오 코드에서 실행 가능한 모든 명령어를 마우스없이 키보드하나로
ctrl+p: quick open. 파일검색+enter - 해당 파일로 이동
ctrl+,: user settings.
ctrl+': Toggle Terminal
home/end: beginning/end of line. 문장에서 앞부분,끝부분으로 이동
ctrl+shift+home/end: 드래그가 선택부분에서 문장 가장 앞부분,끝부분까지 된다.
ctrl+←/→: move word. 단어별로 이동
ctrl+shift+←/→: select word.
ctrl+c: copy line. 라인 전체복사
ctrl+x: cut line. 라인 잘라내기
ctrl+enter: insert line below 다음 줄로 가기
ctrl+u: undo last cursor. 이전 커서로 이동
Ctrl + Shift + K: 한줄삭제
kite: 강력한 AI를 기반으로 한 코드 자동완성 기능을 제공(vscode에서도 적용가능)
<비쥬얼 스튜디오 코드 설치 및 웹개발을 위한 필수 익스텐션 10개 추천>
IDE(Integrated Development Environment, text editor뿐만 아니라, compiler,debugger) : IJ(intelli j)사용
Text Editor: visual studion code, atom, submlime text
1. Material Theme: dark high contrast
2. Material Icon Theme: 파일목록의 icon이 생동감있게 변화
3. Prettier - Code formatter: setting - format on save체크 - prettier검색(세부적 설정) - Tab Width: 2 - prettier quote검색 - javascript>preferences>quote style auto로 설정된걸 single로 변경 - typeScript>preferences>quote style auto로 설정된걸 single로 변경
4. Bracket Pair Colorizer: 괄호마다 색깔 다르게
5. Indent Rainbow: 들여쓰기 된 부분을 레인보우컬러로 하이라이트 표시. 코드 읽을 때 도와줌
6. Auto Rename Tag: 앞의 여는 태그를 바꾸면 뒤 닫힌 태그를 자동으로 바꿔줌
7. CSS Peek: ctrl누른 상태로 클릭하면 정의된 css문서로 연결해줌
8. HTML CSS Support: css에서 정의된 클래스를 html에서 자동완성할 수 있게 해줌.
9. Live Server: command palette에 live server검색하면 open with live server - 단축키 외우기. 저장만하면 바로 새로고침 필요없이 결과가 브라우저에 나타남.
10. Markdown Preview(설치 필요x): 깃허브에 readme.md파일은 md는 markdown이다. command palette에서 mark down preview
11. HTML to CSS autocompletion: HTML에서 정의된 class이름을 css에서 자동으로 완성할 수 있게 해줌
html,css동작 확인 가능 사이트: jsbin.com, jsfiddle.net, codesandbox.io
<웹사이트 빨리 만드는 지름길 Emmet, HTML 빠르게 마크업하기>
! + tab - html자동완성
div + tab
div.classname + tab
div#idname + tab
.classname + tab - class가진 div태그
#idname + tab - id가진 div태그
div>ul>li + tab - 부모자식관계
div>ol+ul - 형제관계
ul>li*5
div>ul>li^ol - ^는 li의 부모인 ul옆에 형제노드로 ol을 만들어줌
그룹화하기 div>(header>ul>li*2>a)+footer>p + tab
텍스트입력 p{hello} + tab
자동번호 넣기 p.class${item $}*5 + tab
더미용 텍스트 생성 p>lorem + tab, p>lorem4(4개의 단어)
<프론트엔드 공부시 유용한 노트 작성법 및 비쥬얼 스튜디오 코드 코멘트 색상 변경 방법>
강의 펜툴: screenBrush(맥북만 가능, 개발할 때 사용x, 유튜브 시작하면서 사용) => 원노트 추천
비쥬얼 스튜디오 코드 - settings - .json검색 - edit in settings.json(검색: visual studio setting) -
"editor.tokenColorCustomizations": { "comments": "#ffc2c2" }, 추가