【Nuxt.js】ESLintまとめ

Contents

前置き
ESLintについて
- インストール方法
- 自動修正
よくあるエラーの一覧
- エラーの見方
- エラーの一覧
new-capのエラー
まとめ

前置き

公式
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ファイルも修正できるようにしてます)

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

{

"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列目です。

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

ちなみに行が長くて
探すのが面倒な場合は
^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します

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

</template>

error Duplicate key 'components'

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

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

export default {

components: {

ButtonDefault,

data() {

return {

name: '',

}

components: {

ButtonDefault,

}

</script>

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

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

export default {

components: {

ButtonDefault,

data() {

return {

name: '',

}

</script>

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

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
    }
  },
}

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を書かなくとも
　連携&使用が可能で超〜〜〜便利です❤️
【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.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()
  },
}

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,
  },
}

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()
  },
}

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つのパターンとして経験になりました❗️