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 스타일 도입

htps : // 기주 b. 코 m / 아이 rb b / 그럼 sc 리 pt / t ree / ms r / pa cgage s / e sen t-conf g g rb b
참고.

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

.eslintrc 를 프로젝트 루트에 만들고 airbnb 를 extends 합니다.

{
  "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 스타일에 한한 이야기는 아니지만)