ESLintを導入してる場合、__no-unused-vars__ルールの設定によっては、宣言してるけれど、利用してない不要な変数に対して、警告表示してくれる。

しかし、以下のようなケースでも警告してくるのは、ちょっと鬱陶しい場合があります。

![no-unused-vars](//images.ctfassets.net/gtzwy9itrek0/1VlSbhjZGOd2kzf9aigdkG/95da7c967755651229b651ced3830798/____________________________2020-09-21_9.21.22.png)

その場合、２通りの対処方法があります。
一つは、__// eslint-disable-line__をチェック無効にしたい行の末尾に追記することです。

## 特定の行のみ

```
import React, { FC } from 'react'; // eslint-disable-line
import './App.css';
```

特定のルールのみ無効にしたい場合は、__eslint-disable-lineの後ろに__特定のルールを記述することで、特定のルールのみ無効にすることも可能です。

```
// eslint-disable-line no-unused-vars
```

## 複数行に対して
複数行の場合は、以下事例に示す通りです。
__/* eslint-disable */__で囲まれた行がESLintチェックの対象外となります。

```
/* eslint-disable */
import React, { FC } from 'react'; // eslint-disable-line
import './App.css';
・
・
・
/* eslint-enable */
```

他の対処方法として、__eslintrc.js__のrulesに以下の記述を追加することで無効に出来ますが、チェックして欲しい行に対しても、無効化されるので、上記方法を検討した方が良いと思います。

```
  rules: {
    'no-use-before-define': 'off',
    '@typescript-eslint/no-use-before-define': ['error', {variables: false}],
```


特定の行でESLintのチェックを無効にしたい場合の対処方法

## ESLintとは
静的解析ツール。標準でバンドルされてるものも含めて、全てのルールが本体から切り離されたプラグインとして平等に扱われ、個別に適用の可否やエラーレベルの調整が可能。

__Create React App__　で生成したものには、デフォルトでインストールされている。プロジェクト作成後、別途最新のバージョンをインストールすることも可能だが、サポートしていない可能性もあるので、注意。

<https://eslint.org/>

## ESLintのエコシステム
本体を除くと３種類に分類される。

### パーサ
コードを特定の言語使用に沿って解析してくれるライブラリ。
ESLintの場合、標準でJSのパーサが組み込まれてるが、TypeScriptには対応していないので、別途導入する必要がある。

[https://github.com/typescript-eslint/typescript-eslint](https://github.com/typescript-eslint/typescript-eslint "TypeScript ESLint")

### プラグイン
ESLintの組み込みルール以外に独自ルールを追加するもの。推奨の共有設定に内包された形で提供されるケースが多い。
*プラグインのルールはインストールして読み込んだだけでは、ルールは適用されない点、要注意。ルールを適用するには、後述する `eslintrc.js` の extendsにプラグイン推奨の共有設定を追記する必要がある。

### 共有設定
複数のルールの適用をまとめて設定するもの。ESLintに同梱される __eslintrecommended__ や、Airbnbが提供してる __eslint-config-airbnb__ が有名。

## eslintrc(設定ファイル)のプロパティについて

### env
プログラムの実行環境をESLintに伝える。

### extends
共有設定を適用する。これは、ESLintに標準で含まれているもの、別途インストールしたものやインストール済のプラグインのパッケージに含まれてるものを指定する。ルール設定が重複してる場合は、後ろに記述されたものが優先される。

### parser
パーサを指定。

### parserOptions
パーサの各種実行オプションを設定。

### plugins
インストール済のプラグインを組み込む。

### rules
適用する個別ルールと、エラーレベル、例外等の設定値を記述。

## ESLint設定事例
__良く見かけるパッケージ(これらを入れとけば、React開発は事足りるかも)__

```
yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin \ eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import \ eslint-plugin-jsx-a11y eslint-config-airbnb
```
__eslintrc.jsのカスタマイズルール事例__
参照：[ESLintの適用ルールカスタマイズ事例](https://github.com/oukayuka/Riakuto-StartingReact-ja3.0/blob/master/06-lint/01-eslint/.eslintrc.js "ESLintの適用ルールカスタマイズ事例")

```
module.exports = {
  env: {
    browser: true,
    es2020: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
    'airbnb/hooks',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:import/typescript',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2020,
    project: './tsconfig.eslint.json',
    sourceType: 'module',
    tsconfigRootDir: __dirname,
  },
  plugins: [
    '@typescript-eslint',
    'import',
    'jsx-a11y',
    'react',
    'react-hooks',
  ],
  root: true,
  rules: {
    'lines-between-class-members': [
      'error',
      'always',
      {
        exceptAfterSingleLine: true,
      },
    ],
    // should be rewritten as `['error', { allowAsStatement: true }]` in ESLint 7 or later
    // SEE: https://github.com/typescript-eslint/typescript-eslint/issues/1184
    'no-void': 'off',
    'padding-line-between-statements': [
      'error',
      {
        blankLine: 'always',
        prev: '*',
        next: 'return',
      },
    ],
    '@typescript-eslint/no-unused-vars': [
      'error',
      {
        'vars': 'all',
        'args': 'after-used',
        'argsIgnorePattern': '_',
        'ignoreRestSiblings': false,
        'varsIgnorePattern': '_',
      },
    ],
    'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],
    'react/jsx-filename-extension': [
      'error',
      {
        extensions: ['.jsx', '.tsx'],
      },
    ],
    'react/jsx-props-no-spreading': [
      'error',
      {
        html: 'enforce',
        custom: 'enforce',
        explicitSpread: 'ignore',
      },
    ],
  },
  overrides: [
    {
      'files': ['*.tsx'],
      'rules': {
        'react/prop-types': 'off',
      },
    },
  ],
  settings: {
    'import/resolver': {
      node: {
        paths: ['src'],
      },
    },
  },
};
```

`.eslintignore` ファイルを作成して、ESLintの対象外となるファイル定義を忘れずに行いましょう。(これが無いと、不要な場面でlintチェックが入ってエラーが出たり、処理が重くなります)

```
build/
public/
**/coverage/
**/node_modules/
**/*.min.js
*.config.js
```

VSCodeでコーディング中に、ESLintが走るようにするには、ESLintの拡張機能を追加して、以下設定を行います。

Code > Preference > Settingから、「Open Settings(JSON)」を押下して、setting.jsonを編集する。

```
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.formatOnSave": false,
    "eslint.enable": true,
    "eslint.packageManager": "yarn",
```

ESLint概要

Reactを使う際、他の言語では普通に書ける表現が、表現できない場面があります。

Reactを使う際のルールとして、あくまで書けるのは__『式』のみ__です(=値を返す表現のみ)
JSXに埋め込めるのは式だけということ、これは、if文やfor文が書けないことを意味しています。

しかし、アプリケーションを開発する中で、条件によってレンダリングするものを出し分けたいケースは当然出てきます。その場合、boolean値が何もレンダリングされないReactの性質を利用します。

因みに、null、undefined、boolean値のtrue/falseは、{}の中では何も出力されません。
上記のルールがあることにより、以下は全て同じ出力となることに留意してください。

```javascript:以下は何も出力しません
<div />
<div></div>
<div>{true}</div>
<div>{false}</div>
<div>{null}</div>
```

if文を代用する記法として以下の書き方があります。

```if文の代用としてショートサーキットや参考演算子が使われる
const App = () => {
  const age = Math.floor(Math.random()* 20);
  const threshold = 10;

  return(
    <>
      // if文を代用する記法
      {age > threshold && <p>`age` is larger than {threshold}</p>}
      // if-else文を代用する記法
      <p>`age` is {age % 2 === 0 ? 'even' : 'odd'}</p>
    </>
  )
}
```

上記の __age > threshold__　や __age % 2 === 0__ は、true/falseを返すから、出力には影響を与えません。この仕組みを利用して、Reactでは分岐処理を書きます。

特定の行でESLintのチェックを無効にしたい場合の対処方法

ESLint概要

Reactで任意の条件によってレンダリングするものを分けたいケース