【React Native】eslint導入

1. eslintインストール

npm i eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-watch babel-core babel-eslint babel-preset-airbnb babel-preset-react-native -D

2. package.jsonのscriptsに追加

"lint": "esw ./src/**",
"lint-watch": "esw -w --changed ./src/**",
"start-ios": "react-native run-ios && npm run lint-watch",
"start-android": "react-native run-android && npm run lint-watch"

package.json

{
    "name": "app",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start-ios": "react-native run-ios && npm run lint-watch",
        "start-android": "react-native run-android && npm run lint-watch",
        "lint": "esw app/**",
        "lint-watch": "esw -w --changed app/**",
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "dependencies": {
        "react": "16.0.0-alpha.12",
        "react-native": "0.47.1"
    },
    "devDependencies": {
        "babel-jest": "20.0.3",
        "babel-preset-react-native": "3.0.0",
        "eslint": "^4.5.0",
        "eslint-config-airbnb": "^15.1.0",
        "eslint-plugin-import": "^2.7.0",
        "eslint-plugin-jsx-a11y": "^6.0.2",
        "eslint-plugin-react": "^7.2.1",
        "eslint-watch": "^3.1.2",
        "jest": "20.0.4",
        "react-test-renderer": "16.0.0-alpha.12"
    },
    "jest": {
        "preset": "react-native"
    }
}
view raw

3. ESLint 設定ファイル作成

ファイル名　：.eslintrc
ファイルパス：プロジェクトルート

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "plugins": ["react", "jsx-a11y", "import"],
  "rules": {
    "react/jsx-filename-extension": ["off"],
    "linebreak-style": ["off"],
    "no-undef": ["error"],
    "react/sort-comp": ["off"],
    "react/prefer-stateless-function": ["off"]
  },
  "globals": {
    "it": 0,
    "expect": 0,
    "describe": 0,
    "navigator": 0
  }
}

ディレクトリ構成

完成

こんな感じでコンソールに表示される

参考