qiita.comフロントエンドエンジニアのsatoshioです。先日弊社が提供しているバスツアー検索サービスでESLintおよびPrettierのバージョンアップ対応を行ったので、今回は対応の流れやそこで遭遇したエラーとその解決方法についてまとめます。対応開始時点でのESLintの最新バージョンはv8.4.1、Prettierの最新バージョンはv2.5.1のようです。}}PrettierはともかくESLintは最新とかなり離れてしまっています...。Releasesv6.8.0-v8.4.1間の更新内容を確認していきます。当たり前ですがそこそこ量がありますね...。changesもそれなりにあります。v15のサポートが終了していますが、バスツアー検索サービスのNode.jsは既にLTSまで上げてあるのでここは問題なさそうです。changesについても影響がないことを確認しました。PrettierReleasesv2.3.0-v2.5.1間の更新内容を確認していきます。ほとんどは既存機能のFixとImproveのようです。@jlongster)あたりの修正(厳密にはRevertですが)は良さそうですね。CSSのように大量のクラスが付与される場合のフォーマットは難しそうです。jsxBracketSameLineが非推奨になり新たにbracketSameLineが追加されましたが、確認したところ今回は関係なさそうです。対応ESLintリリースノートも確認したので、とりあえずバージョンを上げてみます。'getFormatter')エラーが発生するようになりました。バージョンアップにはつきものですね。リリースノートを確認しているとはいえメジャーバージョンを2つもあげているのにすんなり動いたらそれはそれで怖いのでかえって安心します。eslint-loader周りエラー内容を読む限りどうやらeslint-loader絡みのようなのでとりあえずeslint-loader公式を確認しにいったところ、なんとeslint-loaderは2020年9月にDEPRECATEDされていました。「変わりにeslint-webpack-pluginを使用してね」とのことなので、そのように変更します。調べたところ@nuxtjs/eslint-module(eslint-webpack-pluginを内包している)を使用するのが良さそうだったので、今回はそちらを使用するようにしました。リリースノートからも、v3.0.0でeslint-loaderからeslint-webpack-pluginを使用するように変更されていることがわかります。--save-devnuxt.config.jsを修正します。合わせてbuildに記載されているeslint-loader用のホットリロードの設定も削除します。今回は@nuxtjs/eslint-moduleをinstallしましたが、@nuxtjs/eslint-moduleではなくeslint-webpack-pluginをinstallし、かつinstall済みのwebpackのバージョンがv5である場合、上記のエラーに遭遇する場合があります。このエラーの原因は「eslint-webpack-pluginのバージョンとinstallされているwebpackのバージョンが一致していない」ことが考えられます。branch.と記載されている通り、webpackがv5の場合はeslint-webpack-pluginはv3、webpackがv4の場合はeslint-webpack-pluginはv2を使用する必要があります。言いつつ、Nuxt.js内で使用されているwebpackのバージョンはv4(nuxt@2.15.8ではwebpack@4.46.0でした)なので、eslint-webpack-pluginもv2でinstallしないとエラーが発生する、といった感じです。一応eslint-webpack-pluginをv2でinstallすれば解決できるのですが、新規Nuxt.jsプロジェクトをセットアップする際「ESLintを導入する」を選択した時にinstallされるのは@nuxtjs/eslint-moduleなので、そちらの設定の方が無難なのかなと思います。babel-eslint周りさて、これでエラーは解消されたはずなので再び実行してみます。modules別のエラーにたどり着きました。エラー内容を読む限りどうやらbabel-eslint絡みのようなのでとりあえずbabel-eslint公式を確認しにいったところ、なんとbabel-eslintは2020年3月にDEPRECATEDされていました。「変わりに@babel/eslint-parserを使用してね」とのことなので、そのように変更します。v8に対応したことなんかも書いてありますね。--save-dev.eslintrc.jsも修正します。...}再び実行したところ、エラーが発生することなくNuxt.jsプロジェクトが立ち上がりました。試しに適当に全角スペースを挿入して保存してみます。no-irregular-whitespace動作していそうですね。PrettierPrettierに関してはマイナーバージョンアップなのでESLintと比較すると少しだけ気が楽です。バージョンを上げます。Prettierの推奨設定が変わっていたので対応しておきます。こちらのサイトがわかりやすかったです。eslintのようにチェックするようにするという変更になります。バスツアー検索サービスでもeslint-plugin-prettierを使用していたので、忘れないうちにuninstallしておきます。合わせて確認しておきます。...}あとは対応前後でデザインや動作に差異が発生していないかを別途確認し、対応完了です。まとめ今は便利な時代なので少し探せば同じ問題に遭遇した誰かしらが残した解決方法にたどり着ける時も多いのですが、仕様や推奨/非推奨の変更で少し前の対応方法が最適解にならない、それだけならまだしも適用すらできないことも多々あり、今回はその点で少々苦労したのでドキュメントを残すことにしました。似た問題を抱えた方の何かしらの役に立てば幸いです。バージョンアップ対応はこまめに行うようにしましょう。採用情報フロントエンドチームでは、より良いサービスを提供していくために新しい仲間を募集しています。カジュアルに会話できる機会もご用意できますので、もし興味がある方は気軽にご連絡ください。