Documentation Index
Fetch the complete documentation index at: https://mintlify.com/livrasand/desktop/llms.txt
Use this file to discover all available pages before exploring further.
Supported Editors
GitHub Desktop works well with modern code editors. This guide covers setup for popular options.Visual Studio Code
Recommended Extensions
The repository includes a recommended extensions list. To install:Open Extensions View
Press
Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (macOS) to open the Extensions view.Show Workspace Recommendations
Click the … menu in the Extensions view and select Show Workspace Recommended Extensions.
Essential Extensions
- ESLint - Real-time linting errors and warnings
- Prettier - Automatic code formatting
- TypeScript and JavaScript Language Features - Built-in TypeScript support
Configuration
Add to your VS Code settings (.vscode/settings.json):
These settings enable automatic formatting and linting on save.
Debugging Configuration
Create.vscode/launch.json for debugging:
Atom
Recommended Packages
Install these Atom packages:Atom may prompt you to install additional dependencies. Accept these installations.
Key Packages
- atom-typescript - TypeScript syntax highlighting and IntelliSense
- build-npm-apm - Run npm scripts with
F7 - linter - Display linting errors in the editor
Running Scripts
PressF7 to see available npm scripts. Select a script to run it.
Other Editors
Most modern editors support TypeScript and the tools used by GitHub Desktop:TypeScript Support
- Use the TypeScript version from the project:
node_modules/typescript/lib - Enable editor integration for type checking and IntelliSense
ESLint Integration
- Install the ESLint plugin for your editor
- Configure it to use the project’s
.eslintrc.yml - Enable auto-fix on save if available
Prettier Integration
- Install the Prettier plugin for your editor
- Configure it to format on save
- Ensure it respects the project’s configuration
Debugging
Chrome DevTools
When running in development mode, Chrome DevTools automatically open:- Console - Application logs and errors
- Elements - Inspect DOM and styles
- Network - Monitor network requests
- Performance - Profile rendering and execution
- React DevTools - Inspect React components (installed automatically)
React Developer Tools
React DevTools install automatically on first run in development mode. Use them to:- Inspect component hierarchy
- View component props and state
- Track component updates and renders
- Profile React performance
Performance Profiling
To diagnose React performance issues:- Open DevTools with
Toggle Developer Toolsfrom the View menu - Switch to the Performance tab
- Click Record and interact with the app
- Stop recording and analyze the timeline
Toggle Developer Tools
Open DevTools manually:- macOS:
Cmd+Option+I - Windows/Linux:
Ctrl+Shift+I - Menu: View → Toggle Developer Tools
Log Files
Access application logs:From the Application
- Open GitHub Desktop
- Go to Help → Show Logs in Finder/Explorer
Manual Access
Shell Integration
Set your preferred shell in Preferences/Options:- Open Preferences (macOS) or Options (Windows)
- Go to Integrations tab
- Select your shell from the dropdown:
- macOS: Terminal, iTerm2, or custom
- Windows: Command Prompt, PowerShell, Git Bash, or custom
- Linux: Various terminal emulators
External Editor Integration
Configure your preferred code editor:- Open Preferences/Options
- Go to Integrations tab
- Select your editor from the dropdown
- Visual Studio Code
- Atom
- Sublime Text
- Visual Studio
- VSCodium
- And many others…
If your editor isn’t installed, you’ll see a link to download it.
Theme Configuration
Appearance Settings
- Open Preferences/Options
- Go to Appearance tab
- Choose:
- Light - Light theme
- Dark - Dark theme
- System (macOS) - Follow system preference
Advanced Configuration
Environment Variables
Theprintenvz package helps manage environment variables. See the package in vendor/printenvz.
TypeScript Configuration
Multiple TypeScript configurations exist:tsconfig.json- Main application configscript/tsconfig.json- Build scripts configapp/src/highlighter/tsconfig.json- Syntax highlighter configeslint-rules/tsconfig.json- Custom ESLint rules config
Webpack Dev Middleware
In development mode, webpack uses hot middleware for fast recompilation:- Changes rebuild automatically
- Reload the app with
Ctrl/Cmd+Alt+R - Check the DevTools console for build errors
Build Optimization
Bundle Analysis
Analyze webpack bundle size:- Build in production mode:
yarn build:prod - Check the webpack bundle analyzer output
- Optimize large dependencies
webpack-bundle-analyzer plugin generates an interactive visualization.
Memory Configuration
For large projects, increase Node.js memory:This is automatically configured in the production build script.
Keyboard Shortcuts
See all keyboard shortcuts:- Menu: Help → Show Keyboard Shortcuts
- Web: Keyboard Shortcuts Documentation
Ctrl/Cmd+Alt+R- Reload the applicationCtrl/Cmd+Shift+I- Toggle DevToolsCtrl/Cmd+,- Open Preferences/Options