Vue.js / NuxtJSのエラーメッセージの原因と解決方法

vue/order-in-components

The “components” property should be above the “data” property on line 34

コンポーネントプロパティはdataプロパティにあるべきです。

dataプロパティにあるけどエラーが出た場合は、取得の仕方が間違っています。

script内でdataプロパティを利用するときはthis.dataプロパティで取得してください。

vue/attributes-order

Attribute “v-bind:value” should go before “type” 

type属性より前に、v-bind:value属性を置いてください。

prettier/prettier

https://prettier.io/docs/en/options.html

たまに変な変更があります。その際にはeslintと一緒に実施している場合は以下のようにルール追加をしてください。私は以下の改行ルールが気にくわないので変更しました。
変更を加えたあとは、npm runをし直しましょう。
また、.prettierrcファイルがある場合はそちらが優先、ない場合は.eslintrc.jsファイルで定義できます。

.eslintrc.jsファイル

rules: {
  'prettier/prettier': [
    'error',
    {
      htmlWhitespaceSensitivity: 'ignore'
    }
  ]
}

たまに、どうしてもエラーを無視したいけど、無視するオプションが無いケースがあったりします。

最終手段としては、errorではなく、warnに変更する手もあります。。。

.eslintrc.jsファイル

rules: {
  'prettier/prettier': 'warn'
}

Insert `·`

半角スペースを入れてください。

Replace ホゲホゲ

変更してください。

Nuxt Fatal Error

The `hostname` option is mandatory in your config on `spa` or `generate` build mode

`hostname`オプションは、` spa`または `generate`ビルドモードの設定で必須です

nuxt.config.jsに以下を追加するだけで良い

sitemap: {
   hostname: 'https://tools.desnote.com',
},

eslint

Parsing error: Unexpected token <

他にも、以下のエラー。以前までは出ませんでしたが、バージョンがどこかで上がってしまったのでエラーが出るようになりました・

Parsing error: The keyword 'export' is reserved

Parsing error: The keyword 'import' is reserved

以下を参考に解消。

https://github.com/vuejs/eslint-plugin-vue/issues/746

.eslintrc.jsファイルを作成し、plugin:vue/baseを設定します。

はじめ、"plugin:vue/recommended" や "eslint:recommended" をextendに入れていましたが、エラーの内容が想定とは異なるため、基準を以下にしました。

module.exports = {
  "extends": "plugin:vue/base"
}

その他

Unexpected *** statement

未定義の変数があるので、定義してください

Do not use v-for index as key on <transition-group> children, this is the same as not using keys.