Clarity Deck choioki

developer-tools electron git ide-launcher productivity project-launcher project-manager

Use this command to install Clarity Deck:

winget install --id=choioki.ClarityDeck -e

Clarity Deck is a desktop application that helps developers manage and launch their projects efficiently. Features include project organization with drag-and-drop, one-click IDE launching (VS Code, Visual Studio, Android Studio), Git status monitoring, custom script execution, folder scanning for auto-detection of projects, and multi-language support (English/Korean).

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

@vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
@vitejs/plugin-react-swc uses SWC for Fast Refresh

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

데스크톱 앱 배포(Installer 생성)

Windows/맥/리눅스 설치 파일을 만들려면 electron-builder를 사용합니다.

의존성 설치

npm: npm i -D electron-builder

빌드 스크립트

Windows(NSIS): npm run release:win
macOS(DMG): npm run release:mac
Linux(AppImage): npm run release:linux
전체 타겟: npm run release

출력 위치

산출물은 release/ 폴더에 생성됩니다. 예) Clarity Deck-0.0.0-win-x64.exe

아이콘(옵션)

프로젝트 루트에 build/ 디렉토리를 만들고, 플랫폼별 아이콘을 두면 설치 파일에 적용됩니다.
- Windows: build/icon.ico
- macOS: build/icon.icns
- Linux: build/icons/*

코드 서명(옵션)

Windows/macOS는 서명하지 않아도 로컬 테스트는 가능하지만, 배포 시 신뢰 경고가 뜰 수 있습니다. 조직 인증서가 있다면 서명 설정을 추가하세요.

Clarity Deck 데스크톱(Electron) 사용 안내

개발 모드 실행: npm run electron:dev
- Vite 개발 서버가 올라가면 Electron이 연결됩니다.
빌드된 앱 미리보기: npm run electron:preview

IDE 열기 기능(크로스플랫폼)

이 프로젝트에는 프로젝트 폴더를 원하는 IDE로 여는 기능이 포함되어 있습니다. Windows/macOS/Linux에서 각각 적절한 런처를 자동으로 시도합니다.

제공 스크립트
- VS Code: npm run open:vscode
- Visual Studio: npm run open:vs
- Android Studio: npm run open:android
직접 실행: node scripts/open-ide.mjs [path] [--dry-run] [--wait]
- --dry-run: 실제 실행 대신 시도할 명령을 출력
- --wait: IDE 프로세스 종료까지 대기(가능한 플랫폼에서)

Windows 동작 방식 요약

VS Code: code → code.cmd → code.exe → 기본 설치 경로(%LOCALAPPDATA%\Programs\Microsoft VS Code\bin\code.cmd, Code.exe) 순으로 시도
Visual Studio: vswhere.exe로 devenv.exe 경로 탐색 후 실행, 실패 시 2022 기본 경로(Community/Professional/Enterprise) 시도
Android Studio: studio64.exe/studio.exe 또는 C:\\Program Files\\Android\\Android Studio\\bin\\studio64.exe

PATH에 런처가 없을 경우에도 기본 설치 경로로 열기를 시도합니다. 설치 커스텀인 경우 PATH 추가 또는 설정 변경을 권장합니다.

macOS / Linux 요약

macOS: open -a "앱 이름"으로 호출(VS Code/IntelliJ/WebStorm/Android Studio 등)
Linux: 일반적으로 바이너리 이름(code, android-studio, studio.sh)을 사용

문제 해결 및 로깅

개발 모드(npm run electron:dev)에서 IDE 오픈 버튼을 누르면 다음 위치에 로그가 남습니다.
- 메인 프로세스(터미널):
  - [ClarityDeck][IDE] open request: { ide, projectPath, platform }
  - [ClarityDeck][IDE] spawn try: <명령> <인자>
  - [ClarityDeck][IDE] spawn success: <명령> 또는 spawn error
- 렌더러 DevTools 콘솔:
  - [ClarityDeck][IDE] tried: [{ cmd, args, ok, error }] (IPC 응답에 포함된 시도 목록)

로그를 공유해 주시면 어떤 런처에서 실패했는지 바로 진단할 수 있습니다.

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])