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 文件。

然後，您可以使用以下指令程式碼檢查程式碼庫

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

與 Prettier 搭配使用

如果您使用 prettier，還有一個有用的設定可以協助確保 ESLint 針對 prettier 將修正的格式化問題不報告：eslint-config-prettier。

將此設定新增至 extends 的結尾即可使用

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

其他外掛

ESLint 外掛程式提供額外的規則和其他功能，以擴充 ESLint 的功能。以下是幾個可能會有用的範例

Flow 團隊提供的有用的語言規則：eslint-plugin-fb-flow
React 最佳實務：eslint-plugin-react 和 eslint-plugin-react-hooks
Jest 測試：eslint-plugin-jest
匯入/匯出慣例：eslint-plugin-import
NodeJS 最佳實務：eslint-plugin-node
ESLint 註解限制：eslint-plugin-eslint-comments

每個外掛程式都包含其提供的各種設定檔和規則的說明文件。典型的外掛程式可能像這樣使用

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

在 npm 上搜尋 "eslint-plugin" 以取得更多資訊。

與 Prettier 搭配使用​

其他外掛​

與 Prettier 搭配使用

其他外掛