chore: standardize linter (#62)

Author: irfan-maulana-tkp

.github/workflows/test-build.yml

@@ -35,5 +35,8 @@ jobs:
       - name: Install dependencies
         run: yarn
 
+      - name: Run Linter
+        run: yarn lint
+
       - name: Run build project
         run: yarn build

.prettierrc

@@ -1,4 +1,7 @@
 {
+  "bracketSpacing": true,
+  "printWidth": 120,
+  "singleQuote": true,
   "semi": false,
-  "singleQuote": true
-}
+  "trailingComma": "es5"
+}

package.json

@@ -5,7 +5,8 @@
     "build": "gridsome build",
     "dev": "gridsome develop",
     "explore": "gridsome explore",
-    "lint:fix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
+    "lint": "eslint src/**/*.{vue,js}",
+    "lint:fix": "eslint src/**/*.{vue,js} --fix"
   },
   "dependencies": {
     "@gridsome/plugin-google-analytics": "0.1.2",

src/components/Author.vue

@@ -27,9 +27,9 @@ export default {
   props: {
     showTitle: {
       type: Boolean,
-      default: true
-    }
-  }
+      default: true,
+    },
+  },
 }
 </script>
 

src/components/PostAuthor.vue

@@ -4,12 +4,7 @@
       {{ post.author.title }}
     </span>
     <g-link class="post-author__link" :to="post.author.path">
-      <g-image
-        v-if="post.author.avatar"
-        alt="Author"
-        class="post-author__avatar"
-        :src="post.author.avatar"
-      />
+      <g-image v-if="post.author.avatar" alt="Author" class="post-author__avatar" :src="post.author.avatar" />
     </g-link>
   </div>
 </template>
@@ -19,9 +14,9 @@ export default {
   props: {
     post: {
       type: Object,
-      default: () => {}
-    }
-  }
+      default: () => {},
+    },
+  },
 }
 </script>
 

src/components/PostCard.vue

@@ -1,15 +1,7 @@
 <template>
-  <div
-    class="post-card content-box"
-    :class="{ 'post-card--has-poster': post.poster }"
-  >
+  <div class="post-card content-box" :class="{ 'post-card--has-poster': post.poster }">
     <div class="post-card__header">
-      <g-image
-        v-if="post.cover_image"
-        alt="Cover image"
-        class="post-card__image"
-        :src="post.cover_image"
-      />
+      <g-image v-if="post.cover_image" alt="Cover image" class="post-card__image" :src="post.cover_image" />
     </div>
     <div class="post-card__content">
       <h2 class="post-card__title" v-html="post.title" />
@@ -30,14 +22,14 @@ import PostTags from '~/components/PostTags'
 export default {
   components: {
     PostMeta,
-    PostTags
+    PostTags,
   },
   props: {
     post: {
       type: Object,
-      default: () => {}
-    }
-  }
+      default: () => {},
+    },
+  },
 }
 </script>
 

src/components/PostMeta.vue

@@ -15,14 +15,14 @@ import PostAuthor from '~/components/PostAuthor'
 
 export default {
   components: {
-    PostAuthor
+    PostAuthor,
   },
   props: {
     post: {
       type: Object,
-      default: () => {}
-    }
-  }
+      default: () => {},
+    },
+  },
 }
 </script>
 

src/components/PostTags.vue

@@ -1,11 +1,6 @@
 <template>
   <div class="post-tags">
-    <g-link
-      v-for="tag in post.tags"
-      :key="tag.id"
-      class="post-tags__link"
-      :to="tag.path"
-    >
+    <g-link v-for="tag in post.tags" :key="tag.id" class="post-tags__link" :to="tag.path">
       <span>#</span>
       {{ tag.title }}
     </g-link>
@@ -17,9 +12,9 @@ export default {
   props: {
     post: {
       type: Object,
-      default: () => {}
-    }
-  }
+      default: () => {},
+    },
+  },
 }
 </script>
 

src/components/SocialLinks.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="social__links">
-    <a
-      href="https://www.facebook.com/groups/1675298779418239/"
-      title="Facebook"
-    >
+    <a href="https://www.facebook.com/groups/1675298779418239/" title="Facebook">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="24"
@@ -16,9 +13,7 @@
         stroke-linejoin="round"
         class="feather feather-facebook"
       >
-        <path
-          d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"
-        ></path>
+        <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
       </svg>
     </a>
     <a href="https://t.me/vuejsindonesia" title="Telegram">
@@ -71,9 +66,7 @@
       >
         <circle cx="12" cy="12" r="10"></circle>
         <line x1="2" y1="12" x2="22" y2="12"></line>
-        <path
-          d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
-        ></path>
+        <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
       </svg>
     </a>
     <a href="https://docs.vuejs.id/" title="Docs">
@@ -96,7 +89,7 @@
 </template>
 <script>
 export default {
-  name: 'SocialLinks'
+  name: 'SocialLinks',
 }
 </script>
 <style lang="scss">

src/components/ToggleTheme.vue

@@ -1,10 +1,5 @@
 <template>
-  <button
-    role="button"
-    aria-label="Toggle dark/light"
-    class="toggle-theme"
-    @click.prevent="toggleTheme"
-  >
+  <button role="button" aria-label="Toggle dark/light" class="toggle-theme" @click.prevent="toggleTheme">
     <svg
       v-if="darkTheme"
       xmlns="http://www.w3.org/2000/svg"
@@ -50,7 +45,7 @@
 export default {
   data() {
     return {
-      darkTheme: false
+      darkTheme: false,
     }
   },
   mounted() {
@@ -62,8 +57,8 @@ export default {
 
       // This is using a script that is added in index.html
       window.__setPreferredTheme(this.darkTheme ? 'dark' : 'light')
-    }
-  }
+    },
+  },
 }
 </script>