ESLintとFlowができること

react nativeをやっていて、ESLintとFlowについて

ESLint

静的解析ツール。
括弧や、スペース、空行などスタイルの統一も可能。
ルールを個別で指定可能

airbnbの設定など公開されている

エディターとの連携次第で自動フォーマット可能


例えばこんな感じ

先頭に空行はダメ

後ろで定義している変数を使うのもダメ

Flow

静的型付けツール。

実行前にチェックが可能

Componentやメソッドの引数の型を定義する

type UserType = {

  name: string;

  age: number;

}

type Props = {

  user: UserType,

  text: string,

};

class Foo extends Component {

  componentDidMount() {

  }

  render() {

    const { user, text } = this.props;

    return (

     

        {user.name}

        {user.age}

        { user.age < 20 ? '未成年' : '成人' }

        {text}

     

    );

  }

}

ageがnumberではなく、文字列で指定した場合