ESLint

Learn how to use Flow with ESLint

ESLint is a static analysis tool which can help you quickly find and fix bugs and stylistic errors in your code. The rules ESLint provide complement the checks provided by Flow’s type system.

You can quick-start setup ESLint, install hermes-eslint with either Yarn or npm.

yarn add --dev eslint hermes-eslint eslint-plugin-ft-flow
# or
npm install --save-dev eslint hermes-eslint eslint-plugin-ft-flow

Then create a .eslintrc.js file in your project root with the following:

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
  root: true,
  parser: 'hermes-eslint',
  plugins: [
    'ft-flow'
  ],
  extends: [
    'eslint:recommended',
    'plugin:ft-flow/recommended',
  ],
};

For more information about configuring ESLint, check out the ESLint docs.

You can then lint your codebase with:

yarn run eslint . --ext .js,.jsx
# or
npm run eslint . --ext .js,.jsx

Usage With Prettier

If you use prettier, there is also a helpful config to help ensure ESLint doesn’t report on formatting issues that prettier will fix: eslint-config-prettier.

Using this config by adding it to the end of your extends:

  module.exports = {
    root: true,
    parser: 'hermes-eslint',
    plugins: [
      'ft-flow'
    ],
    extends: [
      'eslint:recommended',
      'plugin:ft-flow/recommended',
+     'prettier',
    ],
  };

Additional Plugins

ESLint plugins provide additional rules and other functionality on top of ESLint. Below are just a few examples that might be useful:

Every plugin that is out there includes documentation on the various configurations and rules they offer. A typical plugin might be used like:

  module.exports = {
    root: true,
    parser: 'hermes-eslint',
    plugins: [
      'ft-flow'
+     'jest',
    ],
    extends: [
      'eslint:recommended',
      'plugin:ft-flow/recommended',
+     'plugin:jest/recommended',
    ],
  };

Search “eslint-plugin” on npm for more.


Was this guide helpful? Let us know by sending a message to @flowtype.