[VSC] 개발 시간을 단축시켜주는 VSCode 세팅 Tips - 단축키(Win), 익스텐션(플러그인)
VSCode에서 유용하게 쓸 수 있는 단축키와 플러그인 검색하다가 개발 환경을 새로 구축해야할때라던지 내가 직접 정리해두면 더 찾아두기 편할 것 같아서 기록함.
✨ 단순 정리용 게시물이다.
내가 사용하지 않는 익스텐션에 대해서는 자세한 사용법이나 후기 등의 세부 내용이 빈약할 수도 있음 주의.
1. VSC 단축키
맥OS는 다음과 같이 대입해서 하면 됨.
- CTRL === COMMAND
- ALT === OPTION
code(file) - Preferences - keyboard - shortcuts 에 가면 단축키들의 모든 정보를 확인할 수 있다.
1) 기본 편집 단축키
CTRL + / : 주석 처리
기본 중의 기본 단축키.
주석 처리를 원하는 줄에 커서를 가져다 놓거나 여러 줄을 드래그한 후 해당 단축키를 누르면 된다. 해제를 원할 때는 다시 한 번 누르면 적용된다.
CTRL + HOME/END : 파일의 맨 위, 아래 이동
파일의 맨 위와 아래로 이동한다.
맥의 경우 커맨드 + UP/DOWN
CTRL + ENTER : 바로 줄바꿈
커서가 끝에 안가있어도 바로 줄바꿈 가능
CTRL + SHIFT + ENTER : 위로 새 줄바꿈
커서가 있는 줄부터 아래로 한 칸 내린다.
CTRL + B : 디렉토리 숨김
디렉토리 리스트를 숨긴다.
👍 코드에 집중해서 프로그래밍할 때
CTRL + \ : 창 스플릿
열린 파일을 창을 스플릿해서 열어준다
👍 지금 열린 파일에서 멀리 떨어진 라인의 코드 볼 때
👍 맨 위의 import를 살짝 수정하고 싶을 때
👍 CTRL + F로 하나씩 찾으면서 다른거랑 비교하고 싶을 때
ALT + LEFT/RIGHT : 커서 히스토리 이동
커서가 이전에 위치한 곳으로 되돌아가는 기능
👍 여러 함수 왔다갔다하면서 편집할 때
2) 다중 선택 및 편집 단축키
여러줄의 코드나 단어를 한 번에 편집할 때 유용한 단축키들이다.
CTRL + D - 반복되는 단어 선택
해당 단어와 동일한 단어들을 누른 횟수만큼 선택해준다.
CTRL + SHIFT + L : 반복되는 단어 자동 선택
반복된 모든 단어를 선택해준다. 자주 반복되어 사용되는 코드를 한번에 수정할 때 유용하다.
👍 CTRL + F 로 단어 찾고 단어 위에서 해당 단축키를 눌러서 찾은 단어들 모두 선택해주는 방법으로 사용
👍 useState 변수명 바꿀 때
CTRL + ALT + UP/DOWN : 키보드로 드래그하기
드래그를 마우스 없이 할 수 있다.
ALT + CLICK : 다중 선택
클릭한 곳마다 커서가 생긴다.
ESC 로 선택을 중지할 수 있고 그냥 다른 곳 클릭해도 중지된다.
ALT + SHIFT + DRAG : 다중 선택 (드래그)
드래그하는 마우스의 움직임을 따라 커서가 추가된다.
말로 설명은 좀 어렵고 실제로 해봐야 무슨 말인지 알 듯. 이 단축키는 언제 어떻게 써야할지 모르겠네...
👍코드라인이 각각 길이가 다를 경우 유용
하다고 얘기는 하던데 잘 모르겠다.
ALT + SHIFT + I : 드래그 후 다중 선택
드래그한 후 해당 단축키를 누르면 드래그한 코드의 가장 마지막 부분에 커서가 생긴다.
👍 여러 요소들을 나열해놓고 , 를 추가할 때
💥 input 태그 속성에 저렇게 , 달면 안됨!!! 그냥 단축키 설명에 대한 사용 예임. json 편집이나 배열이나 객체들 나열할 때 사용하기 좋을 듯
ALT + UP/DOWN : 코드 이동
커서가 위치한 줄의 코드나 드래그로 선택된 다수의 코드를 위아래로 이동시킬 수 있다.
ALT + SHIFT + UP/DOWN : 코드 복붙을 한 번에
커서가 위치한 줄의 코드나 드래그로 선택된 다수의 코드를 위아래로 복사 + 붙여넣기 할 수 있다.
👍 같은 걸 계속 복붙해야할때
👍 아이템을 여러개 생성할 때 (<ul>, <li> 등)
2. VSC 익스텐션
🎨 테마 관련 익스텐션
Material Theme : VSC 테마 설정
비쥬얼 스튜디오 코드의 테마를 바꿔준다.
- Material Theme / Material Theme Darker
GitHub Theme : VSC 테마 설정
비쥬얼 스튜디오 코드의 테마를 바꿔준다.
- GitHub Dark 테마
Material Icon Theme : VSC 아이콘 테마 설정
아주 마음에 드는 익스텐션. 확실히 각 확장자 명 마다의 파일 아이콘이 뚜렷하게 구분된다.
비슷한 이름의
Material Theme Icons가 있는데 나는 위의 익스텐션이 더 좋다. 얘는 좀 희미함...
Prettier : 코드의 포맷 정리
적용이 안 된다면 위 사진처럼 전역적으로 사용하도록 설정되었는지 확인해주고 그래도 안 된다면 setting.json 에 들어가서 extends 안에 다음과 같이 작성해준다.
🧑💻 코드 작성을 도와주는 익스텐션
코드 작성 효율을 높혀주는 익스텐션들이다.
IntelliCode : 자동완성 추천코드
아직 사용을 안 해봤음. con 이라고 쳤을 때 console을 자동완성 해주는 것이 아니라 코드의 흐름을 보고 코드 추천을 해주는 거랬나?
colorize : CSS 색상 미리보기
색상 코드를 여러개 쓰고나면 이 색상 코드가 뭔지 저건 뭔지 헷갈리는데 이 익스텐션을 사용하면 한 눈에 확인이 가능해서 좋을 듯!
적용이 안되는 경우:
setting.json에 들어가서"colorize.languages": [ "typescript", "typescriptreact", "javascript", "javascriptreact", "css", "scss" ]
위의 코드를 작성해주어야 함
indent-rainbow : 들여쓰기 구분
들여쓰기를 색으로 구분해줌
파이썬 코드는 들여쓰기가 중요한데 괄호도 안 쓰기 때문에(가독성 꽝👎👎) 유용하다.
Image preview : 이미지 미리보기
이미지파일이 들어간 코드 위에 마우스를 올리면 미리보기 해준다.
👍 올바른 경로를 사용했는지
👍 적절한 사진이 맞는지
👍 이미지 이름이 비슷할 때
브레이킹 포인트가 찍히는 곳에 이미지를 띄워주는 기능도 있는데 브레이킹 포인트를 자주 사용하는 사람은 설정에서 해당 기능을 해제해두는 것이 좋다.
Auto Rename Tag : 태그 자동 수정
페어링 된 태그의 이름이 자동으로 바뀐다.
위의 여는 태그의 이름을 바꾸면 아래도 같이 바꿔줘야 했는데 이 익스텐션을 사용하면 그럴 필요가 없다.
Live Server : 코드 수정 실시간 웹 반영
웹 프로그래밍을 할 때 코드 수정 후 웹 새로고침을 할 필요 없이 실시간으로 수정된 항목이 반영된다.
그런데 리액트 개발할 때는 해당 익스텐션 없이도 코드 저장하면 실시간으로 반영이 되던데? 리액트만 그런건지 다른 것도 그런지는 모르겠다.
ES7+ React/Redux/React-Native snippets : 코드 조각 모음
여러가지 코드 조각이 저장되어있음! 리액트 개발자라면 써야하는 플러그인이라네여. 아직 써보지는 않았다.
💻 에러 및 미리보기 관련 익스텐션
ESLint : 에러 표시
코드의 에러를 컴파일 단계 이전에 확인할 수 있다.
Linter For JS
프로젝트 파일 콘솔에
npm -g add eslint
yarn global add eslint
eslint --init
파일 생성 커맨드
Error Lens : 코드 위에 에러 문구 표시
Outlet은 import 되었지만 그 외 나머지 컴포넌트들은 import 되어있지 않기 때문에 해당 에러가 생긴다.
ESLint를 사용하면 빨간 밑줄로 에러를 확인할 수 있는데, 해당 익스텐션까지 사용하면 굳이 커서를 가져다댈 필요가 없다.
이 플러그인을 찾고 싶어서 익스텐션을 검색했고 이 게시물을 작성하게 되었음. (^^) 요 익스텐션을 찾고나서 나의 검색도 끝이 남.그런데 이 플러그인을 추천하는 콘텐츠가 별로 없더라 왜지?
혼자만 알려고?니꼬도 쓰던데 니꼬! 왜 이건 안 알려주신거죠
참고 사이트:
