Настройте ESLint для React Native

Если вы, как и я, любите, чтобы ваш код React Native не содержал неиспользуемых стилей, пропущенных типов PropTypes и в целом был чистым и организованным, то читайте дальше и узнайте, как настроить ESLint для React Native.

Установить ESLint глобально $ npm install eslint --global
Установить локально $ npm install --save-dev eslint
Настройте ESLint $ eslint --initОтветьте на вопросы о конфигурации. После выполнения этой команды в корне проекта будет создан следующий файл eslintrc, который будет выглядеть следующим образом.

Установите следующее глобально и локально

$ npm install eslint-plugin-react --global 
$ npm install --save-dev eslint-plugin-react
$ npm install eslint-plugin-react-native --global 
$ npm install --save-dev eslint-plugin-react-native

Добавить react-native в раздел плагинов

// .eslintrc.json
{
  "plugins": [
    "react",
    "react-native"
  ]
}

Настройте ESLint для поддержки JSX

// .eslintrc.json
{
  "parserOptions": {
    "ecmaFeatures": {
       "jsx": true
    } 
  }
}

Внесите в белый список все глобальные переменные, похожие на браузер, добавив в конфигурацию response-native / react-native.

// .eslintrc.json
{
  "env": {
    "browser": true,
    "react-native/react-native": true,
  }
}

Наконец, включите любые предпочтительные правила

// .eslintrc.json
{
  "rules": {
    "react-native/no-unused-styles": 2,
    "react-native/split-platform-components": 2,
    "react-native/no-inline-styles": 2,
    "react-native/no-color-literals": 2,
    "react-native/no-raw-text": 2,
  }
}

Примечание. На данный момент это рабочая конфигурация ESLint, если вы запустите $ eslint MyAwesomeFile.js, линтер должен работать. В моем случае я использую стрелочную функцию и новые функции Ecmascript, поэтому я столкнулся с ошибками, связанными с этим.

Чтобы исправить это, установите babel-eslint $ npm install babel-eslint --save-dev, добавьте babel-eslint в раздел парсера файла конфигурации и plugin: react / recommended для расширения.

Вот как выглядит мой последний файл. eslintrc.json.

{
  "parser": "babel-eslint",
  "parserOptions": {
  "ecmaFeatures": {
    "jsx": true
  }
},
  "env": {
    "browser": true,
    "react-native/react-native": true
  },
  "plugins": ["react", "react-native"],
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "rules": {
    "react-native/no-unused-styles": 2,
    "react-native/split-platform-components": 2,
    "react-native/no-inline-styles": 2,
    "react-native/no-color-literals": 2,
    "react-native/no-raw-text": 2,
    "react-native/sort-styles": [
      "error",
      "asc",
       {
         "ignoreClassNames": false,
         "ignoreStyleProperties": false
       }
     ]
  }
}

Теперь не стесняйтесь снова запускать $ eslint MyAwesomeFile.js из терминала, и все должно работать.

Надеюсь, это поможет вам оставаться более организованным. Если у вас есть какие-либо вопросы, советы, проблемы, не стесняйтесь комментировать или писать в Twitter.

Спасибо, что прочитали, и не забывайте хлопать в ладоши и подписываться на меня!

Настройте ESLint для React Native

Вопросы по теме