Разработчики вели бесчисленные споры о том, когда использовать одинарные или двойные кавычки, нужно ли заканчивать каждый оператор точкой с запятой и как насчет стиля блока? Чтобы избежать столкновения эго, 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" ] } }