tooling.md

Tooling Support for GitHub Desktop

Atom

Recommended packages:

• atom-typescript - syntax highlighting and intellisense for TypeScript
• build-npm-apm - invoke all npm scripts straight from the editor by pressing F7 (requires build)
• linter and linter-tslint - shows linter errors and warning in the editor

You can install them all at once with:

apm i atom-typescript build-npm build busy-signal linter-tslint linter linter-ui-default intentions

If atom prompts you to install any additional dependencies for these packages, be sure to say yes.

Visual Studio Code

The Desktop repository includes a list of recommended extensions:

1. Select the Extension view, select Show Workspace Recommended Extensions from the dropdown menu
2. Install all the extensions

Debugging

When running the app in development mode, the Chrome Dev Tools are also launched, to assist with debugging and poking at the live application.

$ yarn
$ yarn build:dev
$ yarn start

At a basic level, the logs from the running app are displayed in the Console tab, but other features include:

• React Dev Tools - enables you to inspect components and view rendering activity in real time
• Devtron - not enabled by default, but you can add this from the console: require('devtron').install()

If you are looking to diagnose React performance issues in Desktop, this post by Ben Schwarz is a great introduction to the workflow enabled by React 16 around measuring and investigating using the Performance tab.