Linting and Code Quality

Learn how to use ESLint and Prettier to maintain code quality

Overview

GitHub Desktop uses automated linting tools to maintain code quality and consistency:

• ESLint - JavaScript/TypeScript linter with custom rules
• Prettier - Opinionated code formatter
• markdownlint - Markdown file linter

These tools integrate with most editors to provide real-time feedback. See Tooling for editor setup.

Running Linting Checks

Check All Files

Run all linting checks:

yarn

yarn lint

This runs:

1. Prettier formatting checks
2. ESLint source code checks
3. TypeScript compilation checks

Auto-Fix Issues

Automatically fix linting issues where possible:

yarn

yarn lint:fix

Some issues cannot be automatically fixed and will require manual correction.

Specific Linting Commands

Prettier

Check formatting:

yarn

yarn prettier

Fix formatting:

yarn

yarn prettier --write

Prettier checks these file types:

• TypeScript/JavaScript: .ts, .tsx, .js, .jsx
• Styles: .scss
• Config: .json, .yaml, .yml
• Markup: .html

ESLint

Check source code:

yarn

yarn lint:src

Fix ESLint issues:

yarn

yarn lint:src:fix

ESLint checks:

• app/src/ - Application source code
• app/test/ - Test files
• script/ - Build scripts
• eslint-rules/ - Custom ESLint rules
• changelog.json - Changelog entries

Markdown Linting

Check Markdown files:

yarn

yarn markdownlint

ESLint Configuration

ESLint is configured in .eslintrc.yml with:

Parser and Plugins

• Parser: @typescript-eslint/parser for TypeScript support
• Plugins:
  • @typescript-eslint - TypeScript-specific rules
  • react - React best practices
  • json - JSON file linting
  • jsdoc - JSDoc comment validation
  • github - GitHub-specific conventions

Key Rules

Custom Rules

# Security and best practices
insecure-random: error
react-no-unbound-dispatcher-props: error
react-readonly-props-and-state: error
no-loosely-typed-webcontents-ipc: error

Naming Conventions

// ✅ Interfaces must start with 'I'
interface IUserData { }

// ✅ Classes use PascalCase
class UserManager { }

// ❌ Reserved words as variable names
const string = 'test' // Error
const Number = 42     // Error

Import Restrictions

// ❌ Don't import ipcRenderer directly
import { ipcRenderer } from 'electron'

// ✅ Use strongly-typed wrapper instead
import * as ipcRenderer from 'ipc-renderer'

No Default Exports

// ❌ Default exports are forbidden
export default function MyComponent() { }

// ✅ Use named exports
export function MyComponent() { }

Custom ESLint Rules

GitHub Desktop includes custom ESLint rules in eslint-rules/:

• insecure-random - Prevents use of Math.random() for security-sensitive code
• react-no-unbound-dispatcher-props - Ensures proper dispatcher prop binding
• react-readonly-props-and-state - Enforces readonly props and state
• react-proper-lifecycle-methods - Validates React lifecycle methods
• no-loosely-typed-webcontents-ipc - Enforces typed IPC communication

Test custom rules:

yarn

yarn test:eslint

Editor Integration

Most editors support real-time linting. Install these extensions:

Visual Studio Code

• ESLint
• Prettier

Other Editors

See Tooling for configuration instructions.

Pre-Commit Checks

Linting checks run automatically in CI on every pull request.

Run checks locally before committing:

yarn lint

Continuous Integration

All pull requests must pass linting checks before merging. CI runs:

1. Prettier - Formatting validation
2. ESLint - Code quality checks
3. TypeScript - Type checking
4. Custom rules - Project-specific validations

Pull requests that fail linting checks cannot be merged. Always run yarn lint before pushing.

Common Issues

Prettier Conflicts

If Prettier and ESLint conflict:

# Check ESLint config against Prettier
yarn eslint-check

The eslint-config-prettier plugin disables conflicting ESLint rules.

Cache Issues

ESLint uses caching for performance. Clear the cache if you encounter stale errors:

rm -rf .eslintcache
yarn lint

TypeScript Errors

ESLint requires TypeScript to compile. If you see parsing errors:

# Check TypeScript compilation
yarn check:eslint

Configuration Files

• .eslintrc.yml - ESLint configuration
• .prettierrc - Prettier configuration (if present)
• .markdownlint.js - Markdown linting rules
• eslint-rules/ - Custom ESLint rule implementations

Next Steps

• Configure your Development Tools
• Learn about Testing
• Review Building the application