Posted at

react-nativeにESLint(airbnb style)を適用した際のビフォーアフター

More than 3 years have passed since last update.

react-nativeプロジェクト作成直後のコードにairbnbスタイルを適用してみます。


新規プロジェクト作成

react-native init AwesomeProject

なお環境はMacOSX El Capitan、react-nativeのバージョンは0.32.0です。

この状態のindex.ios.jsは以下のようになります。

import React, { Component } from 'react';

import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';

class AwesomeProject extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);


ESLint airbnbスタイル導入

https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb

を参考に。

(

export PKG=eslint-config-airbnb;
npm info "$PKG" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG"
)

.eslintrcをプロジェクトルートに作成し、airbnbextendsします。

{

"extends": "airbnb"
}

お好みのエディタでLinter機能をONにします。

画像はAtomのlinter-eslintプラグインを利用したものです。


エラーの解消

jsx-filename-extensionルールに関してだけは.jsも許可したいので、以下のように.eslintrcを修正します。

{

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

全てのエラーを全て解消すると以下のようになりました。

import React from 'react'; // ④

import {
AppRegistry,
StyleSheet,
Text,
View, // ①
} from 'react-native';

// ②
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

// ③
const AwesomeProject = () => (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);


変更点


①comma-double

最後のカンマも省略せずに追加しています。


②no-use-before-define

変数は利用する位置よりも前に移動します。


③react/prefer-stateless-function

stateやconstructorやreactのライフサイクルメソッドを利用していない場合は、Stateless Functionsで記述します。


④no-unused-vars

③の適用で不要になった{ Component }を削除します。


まとめ

Stateless Functionsを適用すると Presentational Component と Container Component がはっきりするので良いかもしれません。(airbnbスタイルに限った話ではないですが)