When developing Flipper plugins we recommend the following IDEs:
TypeScript (for Flipper Desktop (plugins)): Visual Studio Code
- Install the "ESLint" (dbaeumer.vscode-eslint) extension from marketplace to enable linting
- Install the "Prettier" (esbenp.prettier-vscode) extension to enable automatic code-formatting
- If for some reason it is not working, the builtin TypeScript extension might be disabled. To enable it, to go to extensions, search for “@builtin typescript” and enable it.
Android Studio (for Android plugins)
XCode (for iOS plugins)
Running Flipper from source (recommended)
When developing Flipper plugins we strongly recommend to run from Flipper itself from source as well, as this yields several benefits:
- Automatic transpilation and bundling of loaded plugins: ES6, TypeScript, JSX.
- Automatic refresh after code changes.
- React and Redux Dev Tools.
- Debugging using Chrome Dev Tools or Visual Studio Code.
- Additional debug information like React warnings and performance metrics.
Prerequisites for Flipper development build:
- node ≥ 14
- yarn ≥ 1.5
To run Flipper Desktop from source:
Tip: start with
yarn start --fast-refresh for experimental fast refresh.
You can use several options to customise development build instance. They can be provided as command-line args or environment variables.
You can check all of them by executing
yarn start --help:
You can also create file
desktop subfolder and specify any environment variables to load them automatically on
yarn start so you don't need to pass command-line args every time, e.g.:
Guidelines for writing TypeScript
- Important: Use
.tsxfile extension for all TypeScript files (instead of
typefor React props and state over interfaces
- Don’t prefix interfaces with
- Enums, Types and Interfaces use PascalCase (uppercase first letter)
- Install 3rd party type definitions as dev dependency (e.g.
yarn add @types/lodash --dev)
Submitting a diff / PR
Make sure your new functionality is covered with tests, and run
yarn test or
yarn test --watch in the
desktop/ directory to verify that they pass.
See the testing page for more details on writing and running test.
To make sure you don't get any lint/formatting errors, run
yarn lint before submitting your diff. Some errors (especially formatting errors can be auto-fixed by running