PHP 개발자를 위한 VSCode 확장과 팁, 단축키

2018년 8월 26일

개발 툴

최고의 PHP 개발툴¹은 누가 뭐래도 PhpStorm이다. 다만 1달 1~2만 원 꼴 되는 사용료가 진입장벽이 된다. 최근 핫한 VSCode는 PhpStorm만큼은 아니지만 꽤 괜찮은 대안이 될 수 있는 것 같다.

그래서 라라캐스트의 Visual Studio Code for PHP Developers를 보고 공부했다. 무료다. 아래는 보면서 정리한 내용이다.

단축키는 맥 기준이다. 윈도우/리눅스에서는 Cmd는 Ctrl로, Opt는 Alt로 하면 얼추 맞을 거다.

Git

Git는 내장돼 있고, 변경사항이 있는 경우 줄번호 옆에 파란 표시가 되는데, 이걸 클릭하면 뭐가 변경된 것인지 알려 준다.
Ctrl+Shift+G: 사이드바에 Git 패널을 연다. 변경된 파일을 클릭하면 변경사항을 보여 주고, 파일을 add하거나 revert할 수 있는 등 여러 작업을 할 수 있다.
커맨드 입력창에 Git를 입력하면 여러 명령이 뜬다.

커맨드라인 실행 파일 설치

커맨드 입력창에서 ‘Shell Command: Install ‘code’ command in PATH’ 실행. 이후 code라는 명령어로 실행 가능.

디버깅

xdebug와 연동해서 중단점(Break Point)를 찍고 그 시점의 변수값 등을 보는 방법인데, 여기서 모두 설명할 수는 없다. 아래 사항들을 참고하고 따로 공부한다. (해당 동영상을 봐도 된다. 4분밖에 안 된다.)

Debugging: Configure VS Code + XDebug + PHPUnit을 참고해서 설치하고 설정한다.

사용하는 VSCode 플러그인은 PHP Debug(by Felix Becker)다.

디버그 패널을 여는 단축키는 Cmd+Shift+D다. 환경변수에 export XDEBUG_CONFIG="idekey=VSCODE"를 넣어 줘야 하고(윈도우는 어떻게 넣는지 설명 안 돼 있으니 찾아 보길), 터미널에서 phpunit을 실행하면 중단점을 설정한 곳에서 멈춘다. 중단점은 줄번호 왼쪽을 클릭해서 만든다.

단축키

강의에서 나온 단축키들도 많지만, 아래는 내가 생각하기에 기본적으로 알아야 하는 단축키도 넣었다.

Cmd+Shift+P: 커맨드 입력창 열기
Cmd+P: 파일 찾기. Cmd+P를 누른 후 P를 연타치면 선택 영역이 이동하고, Cmd 버튼을 떼면 해당 파일이 열린다. 화살표 키에 손을 가져가지 않고 좀더 쉽게 파일을 여는 방법이다.
Cmd+Shift+O: 현재 파일에서 함수명, 변수명, 클래스명 등 기호(Symbol) 찾기.
Cmd+T: 전체 프로젝트에서 기호(Symbol) 찾기.
Cmd+Shift+K: 줄 삭제
Opt+Shift+↑ 또는 ↓: 현재 줄을 위, 아래로 복사
Opt+↑ 또는 ↓: 현재 줄을 위, 아래로 이동
Cmd+D: 현재 단어를 찾아서 추가로 선택(다중 커서 기능)
Cmd+Opt+↑ 또는 ↓: 다중 커서를 위, 아래로 하나씩 생성
Cmd+Shift+L: 현재 단어 전체를 다중 커서로 선택.
Cmd+1: 편집기에 포커스. (정확히는 첫 번째 편집기 그룹에 포커스)
Cmd+K, Cmd+S: 키보드 단축키 설정
Ctrl+Cmd+Shift+← 또는 →: 선택 범위를 논리적으로 줄이거나 늘린다.
F2: 기호 이름 변경
Cmd+Shift+E: 좌측 사이드바에 탐색기를 열고 포커스
Cmd+Shift+X: 좌측 사이드바에 확장 프로그램 설치 탐색기를 열고 포커스
Ctrl+`: 내장 터미널을 연다.
F12: 정의로 이동
Opt+F12: 정의를 살짝 들여다 보기(peek).
Shift+F12: 모든 참조 찾기(해당 함수나 변수가 정의되거나 사용된 모든 곳을 찾아 띄워 준다.)
Shift+F10: 컨텍스트 메뉴(강의에선 Opt+Enter로 변경하라고 권함.)

js용 확장

Vetur(by Pine Wu): Vue 문법 강조 등.
Import Cost(by Wix): js import 키워드로 임포트하는 것의 용량이 얼마나 되는지 표시해 준다. *.vue 파일에서도 표시를 해 주려면 아래 설정이 필요하다. 타입스크립트 확장자에 vue를 추가.
```
"importCost.typescriptExtensions": [
    "\.vue?$"
]
```
ESLint: 문법 검사. 역시 vue를 위해 설정에 vue와 vue-html을 추가해야 한다. 그런데 npm으로 설치도 해야 하고 복잡하다. 따로 공부를 하셔야 함. 그래도 js 문법 검사를 하려면 필수적 플러그인.
```
"eslint.validate": [
  "javascript",
  "javascriptreact",
  "vue",
  "vue-html"
]
```