皆さんは普段Web系の開発をする時はどんなフレームワークやライブラリを使われているでしょうか？
僕のプロジェクトではNuxt.jsを使うことが多いのですが、最近久しぶりに開発をしようとした時に『 事件 』は起こりました。
『 ESLintの構文エラーが多すぎる！！ 』
エディタを開いた瞬間に画面一面に真っ赤な警告画面が！!
以前の環境では、ここまでESLintの構文エラーが出ることはなかったように記憶しています。
このままでは開発どころではない…ということで、今回は僕のメモがてら構文エラーを回避するための設定方法をご紹介します！
そもそもESLintってなに？
すでにご存知の方は次に進んで頂いてOKです！ここでは「初めて聞いた！」そんな方に向けて、ESLintをサクッと説明します！
javaScriptのプログラムを書く際、特に複数人が同じプロジェクトに携わる場合には、コードの書き方を統一することが非常に重要になります。
これは、バグやエラーが起きた際、原因を特定しやすくしたり、他の人が書いたコードを読む際の負担を減らしたり、あるいはミスそのものを未然に防ぐことが目的です。
「 ソースコードをリアルタイムに観察してJavaScriptの文法に合わない書き方を一貫して警告してくれる機能があったら、チーム全体のミスが減るはず！ 」
このニーズに応える形で、開発現場で広く使われるようになったのが今回お話しするESLintです。
なんでESLintに変更を加えるの？
一番の理由はESLintがNuxt.jsの書き方と僕自身のコーディングスタイルに合わなかったからです。
「そんな理由で設定変えて大丈夫なの？！」
そう思う方もいるかもしれません。ですが、僕がこの決断を下したのは当時使っていたNuxt.jsのIconテンプレートにありました。プロジェクトを作成した直後なのに「エラーが止まらない！！」これが原因でした。
初期状態からすでにエラーだらけ。しかも、修正しても保存時の自動フォーマットで修正した箇所が自動で元に戻されてしまう…。という無限ループに陥ってしまいました。
特に、ダブルクウォートとシングルクォート、インデントの幅の大きさなど、コーディングの中で何度も使用するものがエラーを吐きまくり嫌気が刺したので…。
「…よし、もう設定変えてやる！」
あまりの嫌気から思い立った訳です！常にエラーの赤文字を見るのはあまりにも精神衛生上よろしくありません。「フォーマット設定の方を変えればいいんじゃ？」と思われる方もいらっしゃると思いますが、今回の手段はあくまでも僕自身の独断と偏見による解決策です。
少々前置きが長くなりましたが、そんな訳で僕自身の快適な開発ライフと精神衛生を保つ為、さっそく行動してみることにしました！
設定を変えてみよう！
普段、僕がとにかく使ってる設定が下記のものになります！
"@stylistic/indent": "off", //インデントエラーの防止
"vue/html-indent": "off", //vueのテンプレートタグの中身などで起きるインデントエラーの防止
"@stylistic/quotes": "off", //シングルクォート強制の防止
"@stylistic/comma-dangle": "off", //要素最後のカンマのエラーの防止
"@stylistic/semi": "off", //カッコ最後のセミコロンのエラー防止これを実際に適応するために、eslint.config.mjsファイルの中身に上記を書き加えます。
初期状態では以下のようになっていますが、これを書き換えます！
import withNuxt from "./.nuxt/eslint.config.mjs";
export default withNuxt();// After
import withNuxt from "./.nuxt/eslint.config.mjs";
export default withNuxt({ //この行から追記
rules: {
"@stylistic/indent": "off",
"vue/html-indent": "off",
"@stylistic/quotes": "off",
"@stylistic/comma-dangle": "off",
"@stylistic/semi": "off",
},
});書き加えた後はファイルを保存して、エラーが出ていたファイルを見てみて下さい！エラーが消えていると思います！
さいごに
今回はESLintの設定を変更するという形で、エラーの対処を行いました。最初エラー達を見た時は唖然としたのを覚えています。（ なにせ、これまではあんなにはなかったので… ）
これまで色々と語ってきましたが、本来ESLintは、特に複数人で開発する環境において非常に有用なツールです。
今回の解決策は、いわば「ルールを自分好みにねじ伏せる」ような形ですので、すべてのプロジェクトにおいて推奨される方法とは言えません。ですが、『 エラーに頭を抱えている… 』という、僕と同じ悩みを持っている方の助けになれば幸いです！
最後までお読み頂き、ありがとうございました！
次は何をいじくり回しましょうか？お楽しみに！
コメント