VS Code에서 Qt UI 파일(.ui)을 편집할 때 Qt Designer를 사용하고 싶은 경우가 있다. 이 글에서는 단축키 하나로 Qt Designer를 실행하는 방법을 정리한다.
환경
- Windows 10/11
- Visual Studio Code
- Qt 6.8.6 (msvc2022_64)
- Qt 공식 확장 설치됨 (theqtcompany.qt-ui)
문제 상황
Qt 공식 확장(theqtcompany.qt-ui)을 설치하면 .ui 파일을 VS Code 내장 UI 에디터로 열 수 있다. 그러나 복잡한 UI 작업에는 Qt Designer가 더 적합한 경우가 많다.
Qt 공식 확장의 한계
확장에서 제공하는 qt-ui.openWidgetDesigner 명령을 사용하면 Qt Designer를 실행할 수 있지만, 다음과 같은 문제가 있다.
- 우클릭 컨텍스트 메뉴에 해당 명령이 노출되지 않음
- 명령 실행 시 Qt 버전 선택 화면이 표시되는데, 원하는 버전이 목록에 나타나지 않는 경우가 있음
- qt-core.additionalQtPaths, qt-ui.customWidgetsDesignerExePath 설정을 추가해도 버전이 인식되지 않는 경우가 있음
외부 앱 실행 확장의 한계
“Open in External App” 확장(YuTengjing.open-in-external-app)을 사용하여 .ui 파일을 Qt Designer로 열도록 설정할 수 있다.
"openInExternalApp.openMapper": [
{
"extensionName": ".ui",
"apps": "C:/Qt/6.8.6/msvc2022_64/bin/designer.exe"
}
]
그러나 이 확장은 설정을 무시하고 Windows 기본 프로그램(Qt Creator)으로 파일을 여는 경우가 있다.
VS Code의 제한 사항
VS Code는 더블클릭 시 외부 프로그램을 실행하는 기능을 기본적으로 지원하지 않는다. workbench.editorAssociations 설정은 VS Code 내장 에디터 간의 연결만 지원하며, 외부 프로그램 실행에는 사용할 수 없다.
해결 방법
Qt 확장의 명령을 사용하는 대신, VS Code Task를 정의하고 키보드 단축키에 연결하는 방식으로 해결할 수 있다. 이 방식이 가장 확실하게 동작한다.
1. Task 정의
.vscode/tasks.json 파일에 다음 Task를 추가한다.
{
"version": "2.0.0",
"tasks": [
{
"label": "Open in Qt Designer",
"type": "process",
"command": "C:/Qt/6.8.6/msvc2022_64/bin/designer.exe",
"args": ["${file}"],
"problemMatcher": [],
"presentation": {
"reveal": "silent"
}
}
]
}
설정 설명
항목 설명
| label | Task 이름. 단축키 연결 시 이 이름을 사용한다. |
| type | process로 설정하여 외부 프로그램을 직접 실행한다. |
| command | Qt Designer 실행 파일의 전체 경로. 환경에 맞게 수정한다. |
| args | ${file}은 현재 열려 있는 파일의 경로로 치환된다. |
| presentation.reveal | silent로 설정하면 터미널 패널이 자동으로 열리지 않는다. |
2. 키보드 단축키 설정
Ctrl+Shift+P → Preferences: Open Keyboard Shortcuts (JSON)을 선택하여 keybindings.json 파일을 열고 다음 내용을 추가한다.
[
{
"key": "ctrl+shift+d",
"command": "workbench.action.tasks.runTask",
"args": "Open in Qt Designer",
"when": "resourceExtname == .ui"
}
]
설정 설명
항목 설명
| key | 사용할 단축키. 다른 단축키와 충돌하지 않도록 선택한다. |
| command | Task를 실행하는 VS Code 내장 명령이다. |
| args | 실행할 Task의 label 값과 일치해야 한다. |
| when | .ui 확장자를 가진 파일에서만 단축키가 동작하도록 제한한다. |
사용 방법
- VS Code에서 .ui 파일을 연다 (또는 탐색기에서 선택한다)
- Ctrl+Shift+D를 누른다
- Qt Designer가 해당 파일과 함께 실행된다
시도했으나 실패한 방법
방법 문제점
| qt-ui.openWidgetDesigner 명령 | Qt 버전이 인식되지 않음 |
| qt-core.additionalQtPaths 설정 | 설정해도 버전 목록에 나타나지 않음 |
| qt-ui.customWidgetsDesignerExePath 설정 | 버전 선택 화면을 우회하지 못함 |
| “Open in External App” 확장 | 설정을 무시하고 Qt Creator로 열림 |
| workbench.editorAssociations 설정 | 외부 프로그램 실행 미지원 |
참고 사항
- Qt Designer 경로는 시스템에 설치된 Qt 버전에 따라 다를 수 있다. C:/Qt 디렉터리에서 designer.exe 위치를 확인하여 command 값을 수정한다.
- 여러 Qt 버전이 설치된 경우 프로젝트에서 사용하는 버전의 Designer를 지정하는 것이 좋다.
- 이 방식은 Qt 확장의 버전 선택 로직을 우회하므로, 확장의 Qt 인식 문제와 무관하게 동작한다.