Vueと共通

【Nuxt.js】ESLintまとめ

前置き

公式
ESLintはコードの問題を見つけて
修正できるものです🌟
ルールのカスタムもできます💡

⬇️Prettierはインデント整形です。
【Nuxt.js】Nuxt番外編:自動でインデント整形!plugin Prettier

ESLintの使い方や、
直面した色々なエラー💥
そして解決策✨をまとめました❗️

エラーに関しては
Prettierの分も一緒に記載しています。

慣れていないと
最初はエラーの見方も
よく分からないので…😢
こちらを確認しながら
やってみてくださいね✨👀


ESLintについて

インストール方法

【Nuxt.js】Nuxtの環境構築をしよう
Nuxtプロジェクト作成時の
Linting toolsで
ESLintを選択するだけ

または

Installation and Usage
あとからインストールする場合は
ターミナルコマンドを入力

$ npm install eslint --save-dev


自動修正

Command Line Interface
OptionsのFixing problemsにある
--fixで修正ができます🧹
このコマンド一覧は
$ eslint -hでも確認が可能です。

❌毎回これを打ち込むのは面倒なので…

$ eslint --fix --ext .ts,.js,.vue --ignore-path .gitignore .

⭕️package.jsonにあらかじめ
 コマンドを登録しておきます💫
 (tsファイルも修正できるようにしてます)

こうするとlint:fixで修正が可能に!

terminal

$ npm run lint:fix


よくあるエラーの一覧

エラーの見方

ESLintに限ったことではないですが
書いておきます✍️

49:12 warning Unexpected console statement no-console

この場合は49行目の12列で
予期しないconsoleがあります、
という内容です。

行はエディタで番号が降ってあり
見やすいですが、
列は書いていません。
VSCなら1番下の青いバーで確認できます👀
画像の場合DateのDは37行目の18列目です。

表示されない❗️という場合は
青いバーを右クリックで
「エディターの選択」に
チェックを入れてください✅

ちなみに行が長くて
探すのが面倒な場合は
^control + G
ダイヤログを開いて行番号を入力すれば飛べます✈️


エラーの一覧

warning ‘v-html’ directive can lead to XSS attack vue/no-v-html

XSSの危険性に問題がない場合は、LintをdisableすればOKです!

【Vue/Nuxt】v-htmlでXSS attackの警告が出たときの対処方法

 v-htmlの上でdisableします


error  Duplicate key 'components'     

コンポーネントが重複しているパターンです。

どちらか片方を消せばOK⭕️

⬇️自動インポートをすれば
 書く必要がないので、
 そちらをオススメします❣️
【Nuxt.js】コンポーネントを自動インポートしよう


warning Unexpected console statement no-console

予期しないコンソールがあります

Disabling Rules with Inline Comments
無効にさせたい行に
// eslint-disable-line


Prettierの場合

error  Insert  

改行すると解決

error  Delete  

余計な改行、
改行を消すと解決

error  Insert · 

スペースを入れると解決

error  Replace ·(· with (

は同じくスペースの意味
with以降に直します。
例えばdata () {}
data() {}にするなど

error  Replace ⏎······'@/assets/scss/_colors.scss',⏎······'@/assets/scss/_variables.scss'⏎····] with '@/assets/scss/_colors.scss',·'@/assets/scss/_variables.scss'], 

こちらもwith以降に直します。
改行ではなく1行にしスペースで開けます。


new-capのエラー

nuxt/firebaseを使用していた時に
起きたエラーです。
googleログインなどで
プロバイダを使用する時のみ発生したエラー。

⬇️nuxt/firebaseについてはこちら
 pluginを書かなくとも
 連携&使用が可能で超〜〜〜便利です❤️
【Nuxt.js】firebase導入編:nuxt/firebaseを導入しよう

普通のthis.$fire.auth
いつも通り使用できていました。
this.$fire.auth.signInWithEmailAndPassword(email, password)

エラー内容はこれ。

error A constructor name should not start with a lowercase letter new-cap

$fire.authauth先頭のa
new-cap(大文字)にしてください
ということでした。

ところが大文字にしても
firebaseが見当たらないため
ESLintのnewIsCapをオフに。
falseでも0でもOKです。
require constructor names to begin with a capital letter (new-cap)

ESLintの問題はこれで解決🙌

firebaseの方もやっていきます。

小文字のままでも
やはりfirebaseが見当たらない👀

this.$fire.auth.GoogleAuthProvider is not a constructor

よくよく見てみると
これは$fireではなく
$fireModule
にする必要がありました!

大文字にしてください、
というのはauthではなく
fireModuleMを指していたわけです。

つまり最初からnewIsCap
オフにする必要はなかったのです!笑
ただ大文字というのがヒントになり
ここまでたどり着けました🏔🔍

これで問題なくポップアップが開き
ログインが可能になりました〜✨


まとめ

エラーの対処は最初は大変ですが、
見方を1度理解すれば
スムーズになると思います✨

nuxt/firebaseでは時間がかかりましたが、
1つのパターンとして経験になりました❗️

-Vueと共通
-,

© 2021 aLiz Nuxt