vsc / shortcuts & extensions

당연히 단축기 쓰면 편하고 익스텐션 여러개 쓰면 좋지 생각은 하다가 

공부한다고 이런 유용한 팁들은 살짝 제쳐두고 있었는데 

공휴일 맞이 유튜브에서 관련 영상을 보다가 이 내용이 추천으로 떴는데....

나 이때까지 왜 어렵게 했나싶다 

물론 이 단축기들도 손에 익어야겠지

 

<단축기>

 

1. command palette
ctrl+shift+p or just f1 
-단축기 검색 

2. quick open
ctrl+p
-원하는 파일로 이동가능

3. kite라는 프로그램 ai기반
자동완성code faster

4. 맨 윗줄로 커서 이동 
ctrl+home / end는 맨 하단 

5. 오른쪽 왼쪽 이동 home end 

6. 마우스로 클릭 안하고 단어 이동하는방법 
ctrl+ 화살표 좌우 

7. select word
단어 누르고 ctrl+shift+화살표하면 
내가 원하는 길이만큼 선택가능 

8. copy line
ctrl+c

9. cut line
ctrl+x

10. move line
alt+화살표

11. 라인 그대로 복사하기
shift+alt+화살표 

12. current selection
shift+alt+i

13. ctrl+shift+l 현재선택항목 모두선택

 

14. ctrl [ ]들여쓰기 

 

 

<확장자>

 

1. material theme 보여지는 화면 테마 
2. material icon theme아이콘 
3. prettier 포맷 
4. bracket pair  colorizer 괄호마다 색이 달라서 보기가 쉬움
5. indent-rainbow 들여쓰기에 색깔이 들어가서 보기 쉽게됨 
6. auto rename tag 앞에 태그를 바꾸면 뒤에 닫힘태그도 자동으로 바뀜
7. css peek 해당 css파일을 쉽게 찾을수있음
8. html css support / html이랑 css에 class명 바꿀때 중복으로 작성 안해도됨 

9. html to css completion suggestions / css에서 내가 html에 클래스 뭐 줬더라 안해도 되는거

 

<vsc기능>

1. markdown preview 깃허브에 올릴때 유용 

2. emmet

* div>(header>ul>li*2>a)+footer>p 하면 하단 태그처럼 나오게 해줌 

 

<div>

        <header>

            <ul>

                <li><a href=""></a></li>

                <li><a href=""></a></li>

            </ul>

        </header>

        <footer>

            <p></p>

        </footer>

    </div>

 

* p{hello} 

<p>hello</p>

* p.class${item $}*5
$가 자동 숫자 할당 역할 

    <p class="class1">item 1</p>

    <p class="class2">item 2</p>

    <p class="class3">item 3</p>

    <p class="class4">item 4</p>

    <p class="class5">item 5</p>

*p>lorem 더미텍스트 바로 형성 / lorem4하면 4단어만 나옴