🎨 Fix code format

.eslintrc.js

@@ -2,20 +2,20 @@ module.exports = {
   root: true,
   env: {
     browser: true,
-    node: true
+    node: true,
   },
   parserOptions: {
-    parser: "babel-eslint"
+    parser: "babel-eslint",
   },
   extends: [
     "@nuxtjs",
     "prettier",
     "prettier/vue",
     "plugin:prettier/recommended",
-    "plugin:nuxt/recommended"
+    "plugin:nuxt/recommended",
   ],
   plugins: ["prettier"],
   rules: {
-    "vue/max-attributes-per-line": "off"
-  }
+    "vue/max-attributes-per-line": "off",
+  },
 };

api/news.js

@@ -6,16 +6,16 @@ const app = Express();
 const newsApi = axios.create({
   headers: {
     common: {
-      Authorization: "Bearer " + process.env.API_KEY
-    }
-  }
+      Authorization: "Bearer " + process.env.API_KEY,
+    },
+  },
 });
 
 // 共通ヘッダー
 app.use((req, res, next) => {
   res.set({
     "Cache-Control": "public, max-age=300, s-maxage=7200",
-    "Content-Type": "application/json; charset=utf-8"
+    "Content-Type": "application/json; charset=utf-8",
   });
   next();
 });
@@ -30,7 +30,7 @@ app.get("/api/news", async (req, res, next) => {
     "entertainment",
     "sports",
     "science",
-    "health"
+    "health",
   ];
   const response = [];
   try {

components/common/TheDrawer.vue

@@ -64,13 +64,13 @@
           <template v-slot:activator="{ on }">
             <v-switch
               v-model="darkMode"
-              v-on="on"
               color="warning"
               class="mx-auto"
               hide-details
               inset
               dense
               validate-on-blur
+              v-on="on"
             />
           </template>
           <span class="caption">テーマ切り替え</span>
@@ -103,87 +103,87 @@ const ShareDialog = () => import("~/components/share/ShareDialog.vue");
 
 export default {
   components: {
-    ShareDialog
+    ShareDialog,
   },
   data: () => ({
     drawerItems: [
       {
         title: "トップニュース",
         icon: "mdi-newspaper-variant-multiple-outline",
-        link: { name: "index" }
+        link: { name: "index" },
       },
       {
         title: "ヘッドライン",
         icon: "mdi-fire",
         link: {
           name: "headline-category",
-          params: { category: "general" }
-        }
-      }
+          params: { category: "general" },
+        },
+      },
     ],
     headlineCategory: [
       {
         title: "テクノロジー",
         icon: "mdi-laptop-mac",
         link: {
           name: "headline-category",
-          params: { category: "technology" }
-        }
+          params: { category: "technology" },
+        },
       },
       {
         title: "ビジネス",
         icon: "mdi-domain",
         link: {
           name: "headline-category",
-          params: { category: "business" }
-        }
+          params: { category: "business" },
+        },
       },
       {
         title: "エンターテイメント",
         icon: "mdi-filmstrip",
         link: {
           name: "headline-category",
-          params: { category: "entertainment" }
-        }
+          params: { category: "entertainment" },
+        },
       },
       {
         title: "スポーツ",
         icon: "mdi-soccer",
         link: {
           name: "headline-category",
-          params: { category: "sports" }
-        }
+          params: { category: "sports" },
+        },
       },
       {
         title: "サイエンス",
         icon: "mdi-atom",
         link: {
           name: "headline-category",
-          params: { category: "science" }
-        }
+          params: { category: "science" },
+        },
       },
       {
         title: "ヘルス",
         icon: "mdi-heart-circle-outline",
         link: {
           name: "headline-category",
-          params: { category: "health" }
-        }
-      }
+          params: { category: "health" },
+        },
+      },
     ],
     bottomItems: [
       {
         title: "Twitter",
         link: "https://twitter.com/intent/follow?screen_name=k_urtica",
-        icon: "mdi-twitter"
+        icon: "mdi-twitter",
       },
       {
         title: "GitHub Repo",
         link: "https://github.com/kiysi/nuxt-news-app",
-        icon: "mdi-github-circle"
-      }
+        icon: "mdi-github-circle",
+      },
     ],
-    darkMode: false
+    darkMode: false,
   }),
   computed: {
     drawer: {
@@ -192,13 +192,13 @@ export default {
       },
       set(val) {
         this.$store.commit("setDrawer", val);
-      }
-    }
+      },
+    },
   },
   watch: {
     darkMode() {
       this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
-    }
-  }
+    },
+  },
 };
 </script>

components/common/TheHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <v-app-bar class="header-bar" flat dense app clipped-left>
-    <v-app-bar-nav-icon @click.stop="drawer" dark aria-label="drawer" />
+    <v-app-bar-nav-icon dark aria-label="drawer" @click.stop="drawer" />
     <v-toolbar-title>
       <nuxt-link :to="{ name: 'index' }">
         <h1>NUXT×NEWS APP</h1>
@@ -14,8 +14,8 @@ export default {
   methods: {
     drawer() {
       this.$store.commit("setDrawer", !this.$store.state.drawer);
-    }
-  }
+    },
+  },
 };
 </script>
 

components/common/TheScrollTopButton.vue

@@ -3,13 +3,13 @@
     <v-btn
       v-show="isShow"
       v-scroll="onScroll"
-      @click="$vuetify.goTo(0, options)"
       fixed
       bottom
       fab
       right
       color="indigo lighten-1"
       title="トップにスクロールします"
+      @click="$vuetify.goTo(0, options)"
     >
       <v-icon color="white">mdi-chevron-up</v-icon>
     </v-btn>
@@ -20,9 +20,9 @@
 export default {
   data: () => ({
     options: {
-      duration: 600
+      duration: 600,
     },
-    isShow: false
+    isShow: false,
   }),
   methods: {
     onScroll() {
@@ -31,7 +31,7 @@ export default {
       } else {
         this.isShow = false;
       }
-    }
-  }
+    },
+  },
 };
 </script>

components/main/NewsCard.vue

@@ -38,17 +38,17 @@ import ShareButtons from "~/components/share/ShareButtons.vue";
 
 export default {
   components: {
-    ShareButtons
+    ShareButtons,
   },
   props: {
     news: {
       type: Object,
       default: null,
-      required: true
-    }
+      required: true,
+    },
   },
   computed: {
-    ...mapState(["headlineNewsList"])
+    ...mapState(["headlineNewsList"]),
   },
   methods: {
     getFormtedDate(date) {
@@ -60,8 +60,8 @@ export default {
       } else {
         return require("@/assets/img/no-image.png");
       }
-    }
-  }
+    },
+  },
 };
 </script>
 

components/parts/SnackBar.vue

@@ -1,7 +1,7 @@
 <template>
   <v-snackbar v-model="snackBar" :timeout="3000" color="success">
     {{ message }}
-    <v-btn @click="snackBar = false" text>閉じる</v-btn>
+    <v-btn text @click="snackBar = false">閉じる</v-btn>
   </v-snackbar>
 </template>
 
@@ -11,8 +11,8 @@ export default {
     message: {
       type: String,
       default: "",
-      required: true
-    }
+      required: true,
+    },
   },
   computed: {
     snackBar: {
@@ -21,8 +21,8 @@ export default {
       },
       set(val) {
         this.$store.commit("setSnackBar", val);
-      }
-    }
-  }
+      },
+    },
+  },
 };
 </script>