Конфигурация ESLint расширена с помощью airbnb и prettier для проекта React с использованием typescript, jest и react-hooks

Я очень смущен тем, как настроить файл конфигурации и какие конфигурации / плагины мне следует использовать.

У меня есть проект React, который использует хуки Typescript, Jest и React.

Я знаю, что мне нужно установить:

  • eslint
  • prettier, eslint-config-prettier, eslint-plugin-prettier
  • eslint-plugin-import

Что касается конфигурации Airbnb, я не уверен, нужно ли мне устанавливать:

  • eslint-config-airbnb, eslint-plugin-react, eslint-plugin-jsx-a11y or
  • eslint-config-airbnb-base

Похоже, что ни один из них не поддерживает Typescript, поэтому кажется, что мне также нужно установить:

  • @typescript-eslint/eslint-plugin, @typescript-eslint/parser

А для Jest мне нужно установить:

  • eslint-plugin-jest

Насчет хуков React я не уверен. Нужно ли мне устанавливать здесь что-нибудь дополнительно или один из других пакетов включает поддержку этого? Я вижу, что у меня есть возможность установить:

  • eslint-plugin-react-hooks

Это требуется?

Теперь, что касается файла конфигурации, меня интересуют две области: extends и plugins.

Я вижу, что некоторые из этих пакетов можно расширить с помощью /recommended. Стоит ли мне использовать что-нибудь из этого? Каким должен быть раздел extends? Я видел примеры, когда он устанавливает это как:

{
  "extends": ["airbnb-base", "plugin:prettier/recommended"]
}

Хотя я видел другие примеры, в которых используются:

{
  "extends": ["airbnb", "prettier"]
}

И еще один пример, в котором используются:

{
  "extends": [
    "airbnb",
    "plugin:prettier/recommended",
    "prettier/react"
  ]
}

А как насчет других плагинов Typescript, Jest и React Hooks? Например, eslint-plugin-jest предлагает добавить "plugin:jest/recommended" к расширениям. Будет ли это противоречить другим? Я вижу, что могу добавить "plugin:@typescript-eslint/recommended" и "prettier/@typescript-eslint". Их тоже нужно включить?

В разделе plugins я просто перечисляю каждый установленный eslint-plugin-.... пакет?

Вот пример, дайте мне знать, как это выглядит:

Установленные пакеты

@typescript-eslint/eslint-plugin
@typescript-eslint/parser
eslint
eslint-config-airbnb
eslint-config-prettier
eslint-plugin-import
eslint-plugin-jest
eslint-plugin-jsx-a11y
eslint-plugin-prettier
eslint-plugin-react
eslint-plugin-react-hooks
prettier

Файл конфигурации:

{
  "extends": [
    "airbnb",
    "plugin:@typescript-eslint/recommended",
    "plugin:jest/recommended",
    "plugin:prettier/recommended",
    "plugin:react/recommended",
    "prettier",
    "prettier/@typescript-eslint"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint", 
    "import",
    "jest", 
    "jsx-a11y", 
    "react", 
    "react-hooks"
  ],
}

eslint eslintrc eslint-config-airbnb prettier
person Jake    schedule 20.06.2019    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Думал, что вернусь, чтобы ответить на этот вопрос. Вот моя последняя работающая конфигурация:

module.exports = {
  "env": {
    "browser": true,
    "es6": true,
    "jest": true,
    "node": true
  },
  "extends": [
    "airbnb",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/typescript",
    "plugin:jest/recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended",
    "prettier",
    "prettier/@typescript-eslint",
    "prettier/react"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2018,
    "jsx": true,
    "sourceType": "module",
    "useJSXTextNode": true
  },
  "plugins": ["@typescript-eslint", "import", "jest", "react", "prettier"],
  "rules": {
    "@typescript-eslint/explicit-function-return-type": [
      "error",
      {
        "allowExpressions": true,
        "allowTypedFunctionExpressions": true
      }
    ],
    "@typescript-eslint/explicit-member-accessibility": "off",    
    "import/no-extraneous-dependencies": 0,
    "react/jsx-filename-extension": ["error", { extensions: [".jsx", ".tsx"] }],
    "react/prop-types": [0]
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}
person Jake    schedule 04.07.2019
comment
Вы можете оставить массив plugins пустым. - person Alexander Kim; 30.04.2020