쓰윽터디/Front_end
vscode 단축키 모음
Kkan
2022. 12. 4. 10:42
728x90
반응형
내가 업무를 하면서 사용하기 위해
모아놓은 유용한 단축키들
기본 편집 단축키
Ctrl + Shift + K 커서 위치 행 삭제 |
커서 행 코드가 필요 없을 경우 드래그로 선택하지 않고, 해당 행에 커서를 놓고 Ctrl + Shift + K로 행을 삭제합니다. |
Ctrl + Enter 커서 아래 행 빈줄 생성 |
커서를 맨 뒤로 보낸 후 Enter를 쳐서 빈 행을 생성할 수 있지만, 행의 코드 중간 부분에서도 Ctrl + Enter 단축키를 사용할 경우 더욱 쉽게 커서 아래에 빈 행을 생성 후 이동 가능합니다. |
Ctrl + Shift + Enter 커서 위 행 빈줄 생성 |
행의 코드 중간 부분에서도 Ctrl + Shift + Enter단축키를 사용할 경우 더욱 쉽게 커서 위에 빈 행을 생성 후 이동 가능합니다. |
alt + (↑)화살표 행을 위로 이동 |
커서가 있는 현재 행을 윗줄로 옮길때 alt + (↑)화살표를 할 경우 쉽게 행의 코드 윗줄과 순서를 바꿀 수 있습니다. |
alt + (↓)화살표 행을 아래로 이동 |
커서가 있는 현재 행을 아래로 옮길때 alt + (↓)화살표를 할 경우 쉽게 행의 코드 아랫줄과 순서를 바꿀 수 있습니다. |
Ctrl + alt + (↑)화살표 커서를 위에 추가 (다중선택) |
동일하게 문자열을 수정시 Ctrl + alt + (↑)화살표로 윗행을 다중선택하여, 코드를 작성하면 동일하게 한번에 여러개를 수정할 수 있습니다. |
Ctrl + alt + (↓)화살표 커서를 아래에 추가 (다중선택) |
동일하게 문자열을 수정시 Ctrl + alt + (↓)화살표로 아래행 다중선택하여, 코드를 작성하면 동일하게 한번에 여러개를 수정할 수 있습니다. |
Ctrl + / 한줄 주석처리 |
코드에 대한 설명 또는 필요에 의해 코드를 삭제하지 않고 브라우저에서 보여주고 싶지 않을 경우 Ctrl + / 단축키를 사용하면 됩니다. 퍼블리싱 작업시 자주 사용하는 단축키입니다. 해당 주석을 풀고 싶을 경우 Ctrl + / 단축키를 한번 더 누르면 됩니다. |
Alt + Shift + A 블럭 주석 처리 |
커서 위치에서 /* */ 또는 드래그 하여 선택된 부분을 블럭 주석 처리 하고 싶을 경우 Alt + Shift + A 단축키를 사용하면 됩니다. |
검색관련 편집 단축키
Ctrl + P 빠른 파일 열기 |
프로젝트 파일 폴더에서 일일이 클릭해서 파일을 찾는 수고로움을 피하고, 빠르게 파일을 찾고 싶을 경우 Ctrl + P 단축키를 사용하면 됩니다. |
Ctrl + Shift + F 전체 파일에서 찾기 |
폴더에서 파일을 전체 검색하여 원하는 문자열을 찾고 싶을 경우 Ctrl + F 단축키를 사용하면 검색한 문자열이 있는 모든 파일을 찾을 수 있습니다. 그러나 전체 검색이다 보니, 파일이 많을 경우 시간이 오래 걸릴 수 있습니다. |
Ctrl + H 현재페이지 문자열 수정하기 |
현재 퍼블리싱 중인 페이지에서 여러개의 동일하게 사용된 클래스, 태그, 텍스트 등을 찾아서 한번에 수정하고 싶을 경우 Ctrl + H 단축키를 사용하면 검색하여, 한 개 또는 모두를 한번에 수정할 수 있습니다. 한 개씩 확인하면서 바꾸고 싶을경우 Enter 하면 한 개씩 변경 가능하며, Ctrl + Alt + Enter 하면 모두 수정이 가능합니다. |
Ctrl + Shift + H 폴더 모든 페이지 문자열 수정하기 |
프로젝트 폴더 전체 페이지에서 동일하게 사용된 클래스, 태그, 텍스트 등을 찾아서 한번에 수정하고 싶을 경우 Ctrl + H 단축키를 사용하면 검색하여, 한 개 또는 모두를 한번에 수정할 수 있습니다. |
F8 오류 또는 경고 찾기 |
HTML, JS, CSS 파일에서 오타로 인해서 오류를 확인하고자 할 경우 F8 단축키를 사용하면 쉽게 찾아서 수정할 수 있습니다. |
파일 관리 편집 단축키
Ctrl + N 새로운 편집 탭 열기 |
퍼블리싱을 하다보면 새로운 파일(HTML, CSS, JS)을 생성해야 할때가 있습니다. 이럴 경우 Ctrl + N 단축키를 사용하여 파일 탭을 생성합니다. |
Ctrl + Shift + N 새로운 창 열기 |
VS Code 에디터에서 새로운 프로젝트 폴더를 생성한 후 열고 싶을 때 Ctrl + Shift + N 단축키를 사용합니다. 현재 작업중인 프로젝트에서 종류가 다른 프로젝트의 수행을 위해 새로운 창을 열고 싶을 때 사용하는 단축키 입니다. |
Ctrl + W 파일 창 닫기 |
퍼블리싱 작업을 하다보면, 여러개의 창을 열어 놓을 경우가 있습니다. 해당 파일을 더이상 열어 놓을 필요가 없거나, 파일창이 너무 많아 일부분 닫아야 할 경우 Ctrl + W 단축키로 파일을 닫아 줍니다. |
Ctrl + Shift + T 이전에 닫힌 편집파일 다시 열기 |
현재 파일에서 퍼블리싱 작업중, 이전에 닫았던 창을 다시 열어야 할 경우 Ctrl + Shift + T 단축키로 사용하면 됩니다. |
Ctrl + N(숫자) 화면 분할 창 위치 포커싱 |
화면을 여러 개 분할 후, 퍼블리싱 작업시 원하는 위치의 분할 창으로 이동해야 할 경우 Ctrl + N(숫자) 단축키를 사용하여 원하는 파일 분할창으로 쉽게 이동할 수 있습니다. 예를 들어 Ctrl + 2 단축키를 누르면 2번 파일 분할창으로 이동합니다. 마우스로 매번 분할창 클릭을 하지 않아도 됩니다. |
언어 편집 단축키
Alt + Shift + → 선택 확장 |
문단 또는 태그 단위로 확장 선택을 해야 할 경우 Alt + Shift + → 단축키를 사용하면 됩니다. |
Alt + Shift + ← 선택 축소 |
문단 또는 태그 단위로 축소 선택을 해야 할 경우 Alt + Shift + ← 단축키를 사용하면 됩니다. |
alt + 마우스 클릭 필요한 문자열을 골라서 커서 추가(다중선택) |
동일하지 않은 다양한 문자열을 수정시 alt + 마우스 클릭으로 작업자가 원하는 문자열을 선택하여, 한번에 여러개를 수정할 수 있습니다. |
Ctrl + D 특정 문자열 여러개 찾기 |
동일한 문자열 여러개를 한번에 수정해야 할 경우 Ctrl + D 단축키를 사용하여 한번에 수정할 수 있다. 다중 선택 방법은 Ctrl + D 를 누른 횟 수 만큼 동일한 문자열이 선택 된다. 예를 들어 AA라는 문자열 2개를 BB로 수정이 필요할 경우, AA에 커서를 두고 Ctrl + D 단축키를 2번 눌러 AA 문자열 2개를 선택한 후 BB로 문자를 수정하면 된다. |
Ctrl + Shift + L 특정 문자열 모두 선택 |
Ctrl + D는 동일한 문자열을 누르는 횟 수 만큼 선택 갯수가 확장되는 방식이라면 Ctrl + Shift + L 단축키를 사용하면 한번에 동일한 문자열을 선택하여 편집할 수 있습니다. 찾아야 할 문자열을 블럭선택 한 후 Ctrl + Shift + L 단축키를 누른 후 수정하면 됩니다. |
확장프로그램 단축키
Live Server | 라이브서버는 코딩하는 것을 실시간으로 브라우저에서 F5 새로고침 없이 바로 적용해서 확인 가능하도록 해주는 가상 서버 입니다. 사용방법은 확장프로그램을 설치한 후 , Alt + L → O 단축키를 사용하면 브라우저에서 실시간으로 코딩 상황를 확인 가능합니다. |
뭐 이거 말고도 더 많다.
하지만 위의 것들은 기본이라 저거만 다 알아도 너무 편하다.
이것들을 전부 외울 필요는 없다.
다만, 익혀는 놓거나 저장은 해놓도록 합시다.
그러다보면 어느순간 익숙한 손놀림으로 사용하는 나를 볼 수 있을 것이다.
728x90
반응형