feat: add rule no-this-in-async-data

Author: clarkdo

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

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

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

@@ -4,16 +4,17 @@
  */
 'use strict'
 
+const utils = require('../utils')
+
 // ------------------------------------------------------------------------------
 // Rule Definition
 // ------------------------------------------------------------------------------
 
 module.exports = {
   meta: {
     docs: {
-      description: 'Prevent using this in asyncData',
-      category: 'Fill me in',
-      recommended: false
+      description: 'disallow `this` in asyncData',
+      category: 'base'
     },
     fixable: null, // or "code" or "whitespace"
     schema: [
@@ -26,20 +27,58 @@ module.exports = {
 
   create: function (context) {
     // variables should be defined here
+    const forbiddenNodes = []
+    let isThisUsed
 
     // ----------------------------------------------------------------------
     // Helpers
     // ----------------------------------------------------------------------
 
+    function enterFunction () {
+      isThisUsed = false
+    }
+
+    function exitFunction (node) {
+      if (isThisUsed) {
+        forbiddenNodes.push(node)
+      }
+    }
+
+    function markThisUsed () {
+      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
     // ----------------------------------------------------------------------
 
     return {
-      'FunctionExpression:exit' (node) {
+      FunctionExpression: enterFunction,
+      'FunctionExpression:exit': exitFunction,
+      ArrowFunctionExpression: enterFunction,
+      'ArrowFunctionExpression:exit': exitFunction,
+      ThisExpression: markThisUsed,
+      Super: markThisUsed,
+      ...utils.executeOnVue(context, obj => {
+        const node = getFuncNodeWithName(obj, 'asyncData')
+        if (!node) return
 
-        // give me methods
-      }
+        forbiddenNodes.forEach(el => {
+          if (node.value === el) {
+            context.report({
+              node: node.key,
+              messageId: 'noThis'
+            })
+          }
+        })
+      })
     }
   }
 }

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

@@ -11,9 +11,8 @@
 module.exports = {
   meta: {
     docs: {
-      description: 'Prevent using this in fetch',
-      category: 'Fill me in',
-      recommended: false
+      description: 'disallow `this` in fetch',
+      category: 'base'
     },
     fixable: null, // or "code" or "whitespace"
     schema: [

lib/utils/index.js

@@ -0,0 +1 @@
+module.exports = require('eslint-plugin-vue/lib/utils')