Разработчики вели бесчисленные споры о том, когда использовать одинарные или двойные кавычки, нужно ли заканчивать каждый оператор точкой с запятой и как насчет стиля блока? Чтобы избежать столкновения эго, ESLint - отличный инструмент для решения этой тривиальной задачи.

Итак, вот моя попытка задокументировать, что я сделал для включения ESLint в Meteor Development с React.

В соответствии с рекомендациями Meteor мы переходим к Airbnb ESLint Config, это предопределенные правила из их руководства по стилю.

Для начала нам нужно установить необходимые пакеты, чтобы это работало:

meteor npm install --save-dev babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-meteor eslint-plugin-react eslint-plugin-jsx-a11y eslint-import-resolver-meteor eslint

Я собираюсь обсудить, что будет делать каждый пакет:

babel-eslint - он будет использоваться в качестве нашего парсера.
eslint-config-airbnb - этот пакет в основном будет определять наше руководство по стилю.
eslint-plugin-import - который позволяет нашему ESLint добавлять плагины.
eslint-plugin-meteor - плагин, который мы будем использовать для специальных проверок Meteor.
eslint-plugin-react - этот плагин требуется в соответствии с руководством по стилю AirBnb.
eslint-plugin-jsx-a11y - этого также требует AirBnb. пакет, мы не будем касаться этого в этом сеансе.
eslint-import-resolver-meteor - для особых правил импорта.
eslint - последний, но не список, пакет, который инкапсулирует все вышеперечисленное.

Теперь вы можете настроить конфигурацию ESLint внутри файла `package.json` или использовать отдельный` .eslintrc.json`. Мне нравится использовать последний, потому что он многоразовый и может использоваться в других проектах.

Вот минимальный образец для вашего .eslintrc.json

Теперь давайте попробуем создать простой компонент React и протестируем нашу конфигурацию ESLint.

Теперь в вашем терминале запустите команду ESLint:

./node_modules/.bin/eslint --quiet MyComponent.js

Вы должны увидеть такую ​​ошибку:

  3:1  error  Component should be written as a pure function  react/prefer-stateless-function
  6:7  error  JSX not allowed in files with extension '.js'   react/jsx-filename-extension
✖ 2 problems (2 errors, 0 warnings)

Теперь, если вы похожи на меня и не хотите использовать .jsx расширения, вы можете добавить эту опцию в свою конфигурацию ESLint:

"rules": {
  "react/jsx-filename-extension": [1, { "extensions": [".js"] }]
}

Повторите команду ESLint еще раз, теперь должна остаться только одна ошибка, и это потому, что наш Компонент не имеет состояния. У нас есть возможность добавить состояние или использовать синтаксис Pure Function, например:

Вуаля! Мы успешно настроили наш ESLint для Meteor. По мере роста вашего приложения вы будете замечать проблемы, и вам, возможно, придется дополнительно настраивать линтер, поэтому я собираюсь добавить сюда некоторые из распространенных случаев, с которыми я обычно сталкиваюсь при разработке для Meteor с React.

{
    "env": {
        "browser": true,
        "es6": true
    },
    "parser": "babel-eslint",
    "extends": [
      "airbnb",
      "plugin:meteor/recommended"
    ],
    "parserOptions": {
        "allowImportExportEverywhere": true
    },
    "plugins": [
        "meteor"
    ],
    "settings": {
      "import/resolver": "meteor"
    },
    "rules": {
        "indent": [
            "error",
            2
        ],
        "quotes": [
            "error",
            "single",
            // To allow Template Literals inside Component props.
            // ex. <Component width={`50%`}/>
            //
            { "allowTemplateLiterals": true }
        ],
        "react/jsx-filename-extension": ["error", { "extensions": [".js"] }],
        // To allow absolute path imports in Meteor
        "import/no-absolute-path": [
          "off"
        ],
        // To resolve https://github.com/clayne11/eslint-import-resolver-meteor/issues/17
        "import/extensions": [
          "off",
          "never"
        ],
        // Work around until  https://github.com/benmosher/eslint-plugin-import/issues/479 is resolved
        "import/no-extraneous-dependencies": [
          "off"
        ],
        // To allow `_id` access when retrieving Mongo documents
        "no-underscore-dangle": [
          "off"
        ]
    }
}