【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
  }
}

ディレクトリ構成

完成

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

参考