スムーズな開発のお手伝いをしてくれるESLint

# ESLiintってなに？

コーディングは間違っていたらエラーが起きるが、コードの表現方法はいろいろある。
ESLintはコーディングの表現に統一性を持たせる機能を持っている。

# 実際に使ってみる
## ReactNativeのプロジェクトを作成する

```
expo init
```

## インストール方法
必要なのは開発時だけなので　--save-devをつけてインストールする。

```
npm install --save-dev eslint
```

## ESLintを起動する

```
npx eslint --init
```
いろいろ聞かれる。
一番強めに拘束される一番下を選択する。
![スクリーンショット 2021-11-24 20.12.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2284107/cceb8927-0cb4-d125-9c93-db20e3c7ddcb.png)

JavaScriptを選択する。
![スクリーンショット 2021-11-24 20.14.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2284107/6208c19e-4dd8-c0cc-3545-43bb8c6f674c.png)

Reactを選択する。
![スクリーンショット 2021-11-24 20.15.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2284107/bfef329c-3333-ffff-cc3c-a7234c08fc46.png)

TypeScriptは一旦使わないを選択。
![スクリーンショット 2021-11-24 20.16.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2284107/1bb76045-3b9f-813f-dffe-4b21b196b404.png)

nodeを選択.
![スクリーンショット 2021-11-24 20.17.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2284107/7ebf25fa-a80b-5d64-7eec-1c4628f42f8d.png)

Use a popular style guideを選択。
![スクリーンショット 2021-11-24 20.18.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2284107/7dde021e-69ce-f18b-19d7-1df26d591fbf.png)

どのルールに従うか聞かれているので、Airbnbを選択。
![スクリーンショット 2021-11-24 20.19.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2284107/f084695e-e516-77b9-be43-c023758c35d3.png)

Jsonを選択。
![スクリーンショット 2021-11-24 20.22.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2284107/927834c4-de64-1508-a1c5-e3b7afc8c734.png)

すると、自動的に必要なライブラリを検索してくれるので、yesを選択。
![スクリーンショット 2021-11-24 20.24.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2284107/95b340d6-8e67-2224-8021-2fcf478cac0c.png)

## VScodeの準備
VScodeにESLintのプラグインを入れる。
![スクリーンショット 2021-11-24 20.26.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2284107/6c7bff63-d68a-526c-2738-d23d564181d0.png)

## 使用感を確かめる
作成したプロジェクトのApp.jsを見てみると、下記のように赤い波線で注意されている。
![スクリーンショット 2021-11-24 20.32.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2284107/8b19cd9e-8fac-b1c5-a176-83a6ea8a29a7.png)

電球アイコンのところにマウスホバーすると、下記のようにコメントが出てくる。
例えば、Disable react_jsx-filename-extension for this lineは App.js → App.jsx に変換してね。って怒られている。
![スクリーンショット 2021-11-24 20.32.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2284107/5dd0a32e-65c8-f747-ea2a-55673602d9a6.png)

他にも下記のようにかくと、

```
import React from "react";
```
シングルコーテーションにしてねって怒られる。

```
import React from 'react';
```

# ESLintをカスタマイズ
ESLintをインストールすると、.eslintrc.jsonというファイルができる。
rulesの中を色々カスタマイズできる。

```json
{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 13,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "no-use-before-define": 0
    }
}
```

```
"no-use-before-define": 0
```
を加えた。
これは定義する前に参照すると警告してくるが、それを無視するというルール。
App.jsxを見てみると、

```jsx
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
```
コードの下の方のconstで定義したstylesが上の方の

```
<View style={styles.container}>
```
で使用されている。
しかし、JavaScriptでは定義前でも問題なく動くので、
ESLintの「定義前に呼び出してるよー」警告を無視するというルールを.eslintrc.jsonに加えた。

# まとめ
ESLintはコーデイングにルールを設けてくれるから、個人でもチーム開発でも強力な助っ人になると感じた。