feat: add no-this-in-fetch

Author: clarkdo

lib/rules/__test__/no-this-in-fetch.test.js

@@ -0,0 +1,107 @@
+/**
+ * @fileoverview Prevent using this in fetch
+ * @author Clark Du
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+var rule = require('../no-this-in-fetch')
+
+var RuleTester = require('eslint').RuleTester
+
+const parserOptions = {
+  ecmaVersion: 2018,
+  sourceType: 'module'
+}
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+var ruleTester = new RuleTester()
+ruleTester.run('no-this-in-fetch', rule, {
+
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+        export default {
+          ...foo,
+          fetch() {
+          }
+        }
+      `,
+      parserOptions
+    }
+  ],
+
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+        export default {
+          ...foo,
+          fetch() {
+            if(this.$route.path === 'foo') {}
+          }
+        }
+      `,
+      errors: [{
+        message: 'Unexpected this in fetch.',
+        type: 'Identifier'
+      }],
+      parserOptions
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        export default {
+          ...foo,
+          async fetch() {
+            if(this.$route.path === 'foo') {}
+          }
+        }
+      `,
+      errors: [{
+        message: 'Unexpected this in fetch.',
+        type: 'Identifier'
+      }],
+      parserOptions
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      export default {
+        ...foo,
+        fetch: () => {
+          if(this.$route.path === 'foo') {}
+        }
+      }
+      `,
+      errors: [{
+        message: 'Unexpected this in fetch.',
+        type: 'Identifier'
+      }],
+      parserOptions
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      export default {
+        ...foo,
+        fetch: function test() {
+          if(this.$route.path === 'foo') {}
+        }
+      }
+      `,
+      errors: [{
+        message: 'Unexpected this in fetch.',
+        type: 'Identifier'
+      }],
+      parserOptions
+    }
+  ]
+})

lib/rules/no-this-in-async-data.js

@@ -48,13 +48,6 @@ module.exports = {
       isThisUsed = true
     }
 
-    function getFuncNodeWithName (node, name) {
-      return node.properties.find(item => item.type === 'Property' &&
-        utils.getStaticPropertyName(item) === name &&
-        (item.value.type === 'ArrowFunctionExpression' || item.value.type === 'FunctionExpression')
-      )
-    }
-
     // ----------------------------------------------------------------------
     // Public
     // ----------------------------------------------------------------------
@@ -67,7 +60,7 @@ module.exports = {
       ThisExpression: markThisUsed,
       Super: markThisUsed,
       ...utils.executeOnVue(context, obj => {
-        const node = getFuncNodeWithName(obj, 'asyncData')
+        const node = utils.getFuncNodeWithName(obj, 'asyncData')
         if (!node) return
 
         forbiddenNodes.forEach(el => {

lib/rules/no-this-in-fetch.js

@@ -4,6 +4,8 @@
  */
 'use strict'
 
+const utils = require('../utils')
+
 // ------------------------------------------------------------------------------
 // Rule Definition
 // ------------------------------------------------------------------------------
@@ -17,26 +19,59 @@ module.exports = {
     fixable: null, // or "code" or "whitespace"
     schema: [
       // fill in your schema
-    ]
+    ],
+    messages: {
+      noThis: 'Unexpected this in fetch.'
+    }
   },
 
   create: function (context) {
     // variables should be defined here
+    const forbiddenNodes = []
+    let isThisUsed
 
     // ----------------------------------------------------------------------
     // Helpers
     // ----------------------------------------------------------------------
 
-    // any helper functions should go here or else delete this section
+    function enterFunction () {
+      isThisUsed = false
+    }
+
+    function exitFunction (node) {
+      if (isThisUsed) {
+        forbiddenNodes.push(node)
+      }
+    }
+
+    function markThisUsed () {
+      isThisUsed = true
+    }
 
     // ----------------------------------------------------------------------
     // Public
     // ----------------------------------------------------------------------
 
     return {
+      FunctionExpression: enterFunction,
+      'FunctionExpression:exit': exitFunction,
+      ArrowFunctionExpression: enterFunction,
+      'ArrowFunctionExpression:exit': exitFunction,
+      ThisExpression: markThisUsed,
+      Super: markThisUsed,
+      ...utils.executeOnVue(context, obj => {
+        const node = utils.getFuncNodeWithName(obj, 'fetch')
+        if (!node) return
 
-      // give me methods
-
+        forbiddenNodes.forEach(el => {
+          if (node.value === el) {
+            context.report({
+              node: node.key,
+              messageId: 'noThis'
+            })
+          }
+        })
+      })
     }
   }
 }

lib/utils/index.js

@@ -1 +1,13 @@
-module.exports = require('eslint-plugin-vue/lib/utils')
+const utils = require('eslint-plugin-vue/lib/utils')
+
+module.exports = Object.assign(
+  {
+    getFuncNodeWithName (node, name) {
+      return node.properties.find(item => item.type === 'Property' &&
+        utils.getStaticPropertyName(item) === name &&
+        (item.value.type === 'ArrowFunctionExpression' || item.value.type === 'FunctionExpression')
+      )
+    }
+  },
+  utils
+)