eslint(react+typescript+airbnb)の設定

概要

react+typescriptの環境でeslintをairbnbのルールで導入したのでメモする

前提

• npmが使えること
• TypeScriptが導入されており、設定ファイルが存在すること

パッケージの導入

shell

$ npm i -D eslint eslint-config-airbnb eslint-config-airbnb-typescript 

設定

1. 以下のコマンド実行

shell

　$ npx eslint --init

2. eslintの初期設定

必要に応じて設定
自分は以下のように選択した

設問

? How would you like to use ESLint? To check syntax and find problems
# eslintでどこまでを制御するかを選ぶ
# シンタックスのチェックだけを行なうか、問題のあるコードも解析するか、そしてコードスタイルを適用するのか問われてます。

? What type of modules does your project use? JavaScript modules(import/export)
# モジュールのimport/exportスタイルを問われています。 ES2015のimport/exportを使うならJavaScript modules、CommonJSのrequireを使うならCommonJSを選択

? Which framework does your project use? React
# フロントエンドのフレームワーク

? Does your project use TypeScript? Yes
# TypeScriptを利用するか？

? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)Browser
# 実行環境はブラウザかnodeか？
# フロントエンドならブラウザ

? What format do you want your config file to be in? javascript
# eslint設定ファイルの拡張子

Successfully created .eslintrc.json file in /path/to/your/project

3. 必要パッケージの自動インストール

2.の設定に応じて必要なパッケージがインストールされます

2.3.が成功するとeslintrc.jsが作成される

4. .eslintrc.jsの編集

extendsプロパティにairbnbの設定を入れる。
順番は、airbnb, airbnb-typescriptの順番にしないとうまく行きません。
parseOptions.projectプロパティにTypeScriptの設定ファイルを指定する

.eslintrc.js

  extends: [
  + "airbnb",
  + "airbnb-typescript",
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "eslint-config-prettier",
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 13,
    sourceType: "module",
+   project: "./tsconfig.json",
  },

5. コマンドの追記

.src/直下のts,tsx拡張子のみlintをかけるようにした

package.json

  "scripts": {
    "lint": "eslint ./src/**/*.{tsx,ts}",
  },

これで$ npm run lintでlintをかけることができる

参考