見出し画像

【Nuxt.js】ESLintまとめ

aLiz

🎈 WPでも公開中です
https://wp.me/pc9NHC-1fx

#vue #nuxt #プログラミング #エンジニア

前置き

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

⬇️Prettierはインデント整形です。

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

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

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


ESLintについて

##インストール方法

Nuxtプロジェクト作成時の
Linting toolsで
ESLintを選択するだけ

または

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

// terminal
$ npm install eslint --save-dev

##自動修正

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

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

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

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

{
 "scripts": {
   "lint:fix": "eslint --fix --ext .ts,.js,.vue --ignore-path .gitignore ."
 },

こうすると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列目です。

画像1

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

画像2

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

画像3

##エラーの一覧

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します

<template>
 <!-- eslint-disable-next-line vue/no-v-html -->
 <div v-html="article" />
</template>


error Duplicate key 'components'

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

<script>
export default {
 components: {
   ButtonDefault,
 },
 data() {
   return {
     name: '',
   }
 },
 components: {
   ButtonDefault,
 },
}
</script>

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

<script>
export default {
 components: {
   ButtonDefault,
 },
 data() {
   return {
     name: '',
   }
 },
}
</script>

⬇️自動インポートをすれば
　書く必要がないので、
　そちらをオススメします❣️


warning Unexpected console statement no-console

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

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

export const actions = {
 async login({ dispatch }, payload) {
   try {
     await this.$fire.auth
       .signInWithEmailAndPassword(payload.email, payload.password)
       .then(() => {
         dispatch('checkLogin')
       })
       .catch()
   } catch (error) {
     console.log(error) //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を書かなくとも
　連携&使用が可能で超〜〜〜便利です❤️

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

エラー内容はこれ。
error A constructor name should not start with a lowercase letter new-cap

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

export const actions = {
 loginGoogle({ dispatch }) {
   const provider = new this.$fire.auth.GoogleAuthProvider()
   this.$fire.auth
     .signInWithPopup(provider)
     .then(() => {
       dispatch('checkLogin')
     })
     .catch()
 },
}

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

module.exports = {
 rules: {
   "newIsCap": 0,
 },
}

ESLintの問題はこれで解決🙌

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

小文字のままでも
やはりfirebaseが見当たらない👀
this.$fire.auth.GoogleAuthProvider is not a constructor

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

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

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

export const actions = {
 loginGoogle({ dispatch }) {
   const provider = new this.$fireModule.auth.GoogleAuthProvider()
   this.$fire.auth
     .signInWithPopup(provider)
     .then(() => {
       dispatch('checkLogin')
     })
     .catch()
 },
}

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


まとめ

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

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

🎈 WPでも公開中です
https://wp.me/pc9NHC-1fx


この記事が気に入ったらサポートをしてみませんか？