ESLintの設定についてのメモ書き

初期インストールのコマンド(nest.jsの時のもの)

npm i --save-dev eslint prettier eslint-config-prettier

作成時は「.eslintrc.js」のファイルが生成される。
各種項目について

extends：基本構成

  extends: [
    'plugin:react/recommended', //reactの推奨ルール 
    'airbnb', // コードスタイル
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:import/typescript',
  ],

parser：使用するパーサー

typescriptを使用できるようにするには、typescriptのパーサーを設定する必要がある
typescriptの設定で必要なものは下記

parser: '@typescript-eslint/parser',

parserOptions：パーサーの設定
Reactで使用する場合、jsxを読めるように設定が必要

plugins：使用するプラグイン

ルールを追加する項目
npmを通して外部に公開されているルールのpluginsをインストールする

  plugins: ['react', '@typescript-eslint', 'import'],

rules：個々のルールを設定
今回設定したものについて
react/jsx-filename-extension：jsxの記述を.tsxの拡張子でもいいように修正
import/extensions：.tsxの拡張子がimport時にないといけないのでつけなくてよい設定に修正
arrow-body-style：アロー関数を使用するときの書き方に関する設定。1行でもreturnある書き方を許容する
react/function-component-definition：関数コンポーネントに対してアロー関数を使用できるように設定

  rules: {
    'import/extensions': [
      'error',
      'always',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],
    'react/jsx-filename-extension': ['error', { extensions: ['.jsx', '.tsx'] }],
    'arrow-body-style': ['error', 'always'],
    'react/function-component-definition': [
      2,
      { namedComponents: 'arrow-function' },
    ],
  },