ESLint の最新の構成を追い続けるのが本質とズレてる気がしてずっと VS Code のデフォルト設定の自動修正とリント機能だけ使ってきたが、import の自動追加、削除と Hooks のルールだけ追加したら快適になったので設定方法のメモ。

モジュールのインストール

npm install -D eslint prettier eslint-config-universe eslint-plugin-react-hooks eslint-plugin-unused-imports

.eslintrc.js の設置

/* eslint-env node */

module.exports = {
  root: true,
  extends: ["universe/native"],
  plugins: ["unused-imports", "react-hooks"],
  rules: {
    "unused-imports/no-unused-imports": "warn",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
  },
};

.prettierrc の設置

{}

空のデフォルト設定のままだが、このファイルがないと ESLint と Prettier で競合するため追加

.eslintignore の設置

/.expo
node_modules
expo-env.d.ts

ESLint の高速化と expo-env.d.ts で自動で英字が挿入されて毎回 lint に引っかかるので除外

.vscode/settings.json の設置

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": [
    "source.addMissingImports",
    "source.fixAll.eslint"
  ]
}

ここまでで以下が検出されて自動修正、指摘されるようになる。

• import が足りない時に自動追加
• import が使われていない時に自動削除
• Hooks のルール違反

※ import の自動追加は便利だが、同じ変数名とかで予期せぬモジュールを import することがあるので注意

metro.config.js があれば先頭に追加

/* eslint-env node */

npm run lint でエラーが出るのを防ぐため。

package.json に lint を追加

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

以下でプロジェクト全体を自動修正

npm run lint:fix

手動で修正が必要なものは以下を実行しつつ対応

npm run lint