メインコンテンツへスキップ

ESLint

ESLintは、コード内のバグやスタイルのエラーを迅速に見つけて修正するのに役立つ静的解析ツールです。ESLintが提供するルールは、Flowの型システムによって提供されるチェックを補完します。

ESLintのセットアップをすぐに開始するには、Yarnまたはnpmのいずれかでhermes-eslintをインストールします。

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

次に、プロジェクトのルートに次の内容で.eslintrc.jsファイルを作成します。

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

上記の設定では、extendsプラグインの順序が重要です。plugin:ft-flow/recommendedはeslint:recommendedの一部のルールを無効にするため、正しく動作させるには後に定義する必要があります。

ESLintの設定の詳細については、ESLintのドキュメントを参照してください。

その後、以下のコマンドでコードベースをlintできます。

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

Prettierとの併用​

prettierを使用している場合は、prettierが修正するフォーマットの問題をESLintが報告しないようにするための便利な設定であるeslint-config-prettierもあります。

この設定を使用するには、extendsの末尾に追加します。

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

追加のプラグイン​

ESLintプラグインは、ESLintの上に追加のルールやその他の機能を提供します。以下は、役立つ可能性のあるいくつかの例です。

そこにあるすべてのプラグインには、提供するさまざまな設定とルールに関するドキュメントが含まれています。一般的なプラグインの使用例は次のとおりです。

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

詳細については、npmで「eslint-plugin」を検索してください。