⬆️ Upgrade eslint to 7

functions/package.json

@@ -62,9 +62,9 @@
     "@babel/preset-env": "^7.3.4",
     "babel-eslint": "^10.0.1",
     "babel-preset-minify": "^0.5.0",
-    "eslint": "^5.14.1",
-    "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-plugin-import": "^2.16.0",
+    "eslint": "^7.0.0",
+    "eslint-config-airbnb-base": "^14.0.0",
+    "eslint-plugin-import": "^2.20.0",
     "webpack": "^4.29.5"
   },
   "private": true

src/.eslintrc.js

@@ -26,6 +26,7 @@ module.exports = {
       },
     ],
     'no-console': 'warn',
+    'space-before-function-paren': ['error', 'never'],
     // don't require .vue extension when importing
     'import/extensions': ['error', 'always', {
       js: 'never',
@@ -40,13 +41,15 @@ module.exports = {
           'CONDITIONALS',
           'RENDER_MODIFIERS',
           'GLOBAL',
-          'UNIQUE',
-          'BINDING',
+          ['UNIQUE', 'SLOT'],
+          'TWO_WAY_BINDING',
           'DEFINITION',
+          'OTHER_DIRECTIVES',
           'OTHER_ATTR',
           'CONTENT',
           'EVENTS',
         ],
+        alphabetical: false,
       },
     ],
     'vue/name-property-casing': ['error', 'kebab-case'],

src/components/LikeButton.vue

@@ -250,22 +250,22 @@ export default {
     },
     debouncedSnapKnobProgress: _debounce(
       // eslint-disable-next-line func-names
-      function () { this.snapKnobProgress(); },
+      function() { this.snapKnobProgress(); },
       50,
     ),
     setClientX(e) {
       this.clientX = e.targetTouches ? e.targetTouches[0].clientX : e.clientX;
     },
     showLikeCountBubble() {
       this.isShowLikeCountBubble = true;
-      if (this.bubbleTimer) clearTimeout(this.bubbleTimer);
+      if (this.bubbleTimer) { clearTimeout(this.bubbleTimer); }
       this.bubbleTimer = setTimeout(() => {
         this.isShowLikeCountBubble = false;
       }, 500);
 
       // If the bubble has already shown, scale the bubble a little bit bigger
       const { likeCountBubble: el } = this.$refs;
-      if (el) TweenLite.to(el, 0.1, { scale: 1.1 }).reverse(0);
+      if (el) { TweenLite.to(el, 0.1, { scale: 1.1 }).reverse(0); }
     },
     clearLongPress() {
       this.isLongPressingKnob = false;
@@ -293,7 +293,7 @@ export default {
       if (e && e.button !== undefined && e.button !== 0) {
         return; // handle left click only
       }
-      if (this.hasMovedKnob) return;
+      if (this.hasMovedKnob) { return; }
 
       if (this.isMax && this.isKnobMovable && !this.isLongPressingKnob) {
         this.knobProgress = 1;
@@ -307,7 +307,7 @@ export default {
       this.showLikeCountBubble();
     },
     onMovingKnob(e) {
-      if (!this.isPressingKnob) return;
+      if (!this.isPressingKnob) { return; }
 
       if (requestAnimationFrame) {
         requestAnimationFrame(() => this.updateKnobProgressByEvent(e));
@@ -322,7 +322,7 @@ export default {
       }
     },
     onPressKnob(e) {
-      if (checkIsMobileClient()) return;
+      if (checkIsMobileClient()) { return; }
       if (e && e.button !== undefined && e.button !== 0) {
         return; // handle left click only
       }
@@ -341,7 +341,7 @@ export default {
     onReleaseKnob() {
       this.clearLongPress();
 
-      if (!this.isPressingKnob) return;
+      if (!this.isPressingKnob) { return; }
 
       this.isPressingKnob = false;
       this.snapKnobProgress();

src/components/LikeButtonClapEffect.vue

@@ -29,7 +29,7 @@ export default {
     },
     removeGraph(id) {
       const index = this.graphIds.indexOf(id);
-      if (index >= 0) this.graphIds.splice(index, 1);
+      if (index >= 0) { this.graphIds.splice(index, 1); }
     },
   },
 };

src/components/LikeButtonClapEffectGraph.vue

@@ -46,10 +46,10 @@ export default {
   methods: {
     animate() {
       const { graph } = this.$refs;
-      if (!graph) return;
+      if (!graph) { return; }
 
       const allTriangles = [...graph.children].map(g => g.children);
-      if (allTriangles.length === 0) return;
+      if (allTriangles.length === 0) { return; }
 
       const {
         yMax, yMin, scaleMax, scaleMin,

src/components/LikeCoinButtonWidgetV2/LikeCoinButtonWidgetV2.vue

@@ -75,7 +75,7 @@
           rel="noopener"
           :style="upgradeLabelStyle"
         >
-          {{ this.$t('HintLabel.Upgrade') }}
+          {{ $t('HintLabel.Upgrade') }}
         </a>
       </foreignObject>
 

src/components/LoadingIndicator.vue

@@ -14,7 +14,7 @@ export default {
     layout: {
       type: String,
       validator(value) {
-        return ['small', 'large', 'fluid'].indexOf(value) !== -1;
+        return ['small', 'large', 'fluid'].includes(value);
       },
       default: 'fluid',
     },

src/components/NFTWidget/ContentPreview.vue

@@ -68,15 +68,15 @@ export default {
       return this.isClickable ? this.url : this.detailsUrl;
     },
     props() {
-      if (!this.isClickable) return {};
+      if (!this.isClickable) { return {}; }
       return {
         href: this.url,
         rel: 'noopener noreferrer',
         target: '_blank',
       }
     },
     resizedSrc() {
-      if (this.isFixedSize) return getLikeCoResizedImageUrl(this.imgSrc, 360);
+      if (this.isFixedSize) { return getLikeCoResizedImageUrl(this.imgSrc, 360); }
       return this.imgSrc;
     },
     titleClasses() {

src/layouts/error.vue

@@ -23,6 +23,11 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      HOMEPAGE,
+    };
+  },
   head() {
     return {
       title: this.message,
@@ -34,11 +39,6 @@ export default {
       ],
     };
   },
-  data() {
-    return {
-      HOMEPAGE,
-    };
-  },
   computed: {
     statusCode() {
       return (this.error && this.error.statusCode) || 500;

src/mixins/embed-button.js

@@ -22,7 +22,7 @@ export default {
         url = `/in/like/${this.id}/?referrer=${encodeURIComponent(this.referrer)}`;
       }
       url += '&popup=1';
-      if (this.buttonType) url += `&type=${encodeURIComponent(this.buttonType)}`;
+      if (this.buttonType) { url += `&type=${encodeURIComponent(this.buttonType)}`; }
       return url;
     },
     isPreview() {
@@ -53,11 +53,11 @@ export default {
       console.error(err);
     }
     window.addEventListener('message', this.handleWindowMessage);
-    if (this.isPreview) return;
+    if (this.isPreview) { return; }
     this.hasCookieSupport = await this.getIsCookieSupport();
     this.parentSuperLikeID = this.getParentSuperLikeID();
     await this.updateUserSignInStatus();
-    if (this.onCheckCookieSupport) this.onCheckCookieSupport(this.hasCookieSupport);
+    if (this.onCheckCookieSupport) { this.onCheckCookieSupport(this.hasCookieSupport); }
     this.isUserFetched = true;
   },
   beforeDestroy() {
@@ -90,14 +90,14 @@ export default {
     },
     async handleWindowMessage(event) {
       const { data } = event;
-      if (typeof data !== 'object') return;
+      if (typeof data !== 'object') { return; }
 
       /* public acitons */
       if (event.source === window.parent || event.source === window.top) {
         switch (data.action) {
           case 'SET_REFERRER': {
             const { referrer } = data.content;
-            if (referrer === undefined) return;
+            if (referrer === undefined) { return; }
             this.$router.replace({
               name: this.$route.name,
               params: this.$route.params,
@@ -149,13 +149,13 @@ export default {
 
           // For preview usage
           case 'PREVIEW': {
-            if (!this.isPreview) return;
+            if (!this.isPreview) { return; }
 
             const { user } = data.content;
             if (user) {
-              if (user.user) this.id = user.user;
-              if (user.displayName) this.displayName = user.displayName;
-              if (user.avatar) this.avatar = user.avatar;
+              if (user.user) { this.id = user.user; }
+              if (user.displayName) { this.displayName = user.displayName; }
+              if (user.avatar) { this.avatar = user.avatar; }
               this.avatarHalo = getAvatarHaloTypeFromUser(user);
             }
             break;

src/mixins/embed.js

@@ -106,7 +106,7 @@ export default {
     let amount;
     try {
       const parse = parseInt(params.amount, 10);
-      if (parse && !Number.isNaN(parse)) amount = parse;
+      if (parse && !Number.isNaN(parse)) { amount = parse; }
     } catch (e) {
       // no op;
     }
@@ -159,7 +159,7 @@ export default {
           error({ statusCode: 404, message: '' });
           return {};
         });
-        if (!data) return {};
+        if (!data) { return {}; }
         const {
           displayName,
           avatar,
@@ -289,7 +289,7 @@ export default {
       return integration;
     },
     documentReferrer() {
-      if (!process.client) return '';
+      if (!process.client) { return ''; }
       let windowReferrer = '';
       try {
         if (window.opener) {
@@ -441,7 +441,7 @@ export default {
       return res;
     },
     getParentSuperLikeID() {
-      if (!document.cookie || !isCookieEnabled()) return '';
+      if (!document.cookie || !isCookieEnabled()) { return ''; }
       return getCookie('likebutton_superlike_id');
     },
     async updateSuperLikeStatus() {
@@ -479,7 +479,7 @@ export default {
             isCookieSupport: this.hasCookieSupport,
             ...this.apiMetadata,
           })
-            .then(async ({ data: myData }) => {
+            .then(async({ data: myData }) => {
               const {
                 liker,
                 isSubscribed,

src/mixins/experiment.js

@@ -7,7 +7,7 @@ export default function experimentsMixin(
   return {
     computed: {
       [propName]() {
-        if (!this.$exp || !isEligible(this)) return false;
+        if (!this.$exp || !isEligible(this)) { return false; }
         const { name, $activeVariants } = this.$exp;
         if (
           this.$exp.isEligible &&

src/mixins/nft.js

@@ -179,7 +179,7 @@ export default {
       );
     },
     notifyParentOfResizing() {
-      if (!window.parent || !this.$refs.widget) return;
+      if (!window.parent || !this.$refs.widget) { return; }
       const {
         scrollWidth: width,
         scrollHeight: height,

src/nuxt.config.js

@@ -1,5 +1,4 @@
 /* eslint import/no-extraneous-dependencies: "off" */
-// eslint-disable-next-line nuxt/no-cjs-in-config
 const path = require('path');
 
 const { IS_TESTNET } = process.env;
@@ -196,4 +195,4 @@ const nuxtConfig = {
 };
 
 /* do not use es6 export since we directly require() it in functions */
-module.exports = nuxtConfig; // eslint-disable-line nuxt/no-cjs-in-config
+module.exports = nuxtConfig;