Supports Optional Chaining (#1209)

* Supports Optional Chaining

* Refactored to resemble eslint core util function naming. e.g. unwrap -> skip

* update config

* upgrade eslint-utils

* Change the supported version of ESLint from 6.0.0 to 6.2.0.

Author: ota-meshi

.circleci/config.yml

@@ -43,7 +43,7 @@ jobs:
       - run:
           name: Install eslint@6
           command: |
-            npm install -D eslint@6.0.0
+            npm install -D eslint@6.2.0
       - run:
           name: Install dependencies
           command: npm install

.eslintrc.js

@@ -135,7 +135,9 @@ module.exports = {
           {
             pattern: `https://eslint.vuejs.org/rules/{{name}}.html`
           }
-        ]
+        ],
+
+        'eslint-plugin/fixer-return': 'off'
       }
     }
   ]

docs/.vuepress/components/eslint-code-block.vue

@@ -89,7 +89,7 @@ export default {
         rules: this.rules,
         parser: 'vue-eslint-parser',
         parserOptions: {
-          ecmaVersion: 2019,
+          ecmaVersion: 2020,
           sourceType: 'module',
           ecmaFeatures: {
             jsx: true

docs/rules/valid-v-bind-sync.md

@@ -15,7 +15,8 @@ This rule checks whether every `.sync` modifier on `v-bind` directives is valid.
 
 This rule reports `.sync` modifier on `v-bind` directives in the following cases:
 
-- The `.sync` modifier does not have the attribute value which is valid as LHS. E.g. `<MyComponent v-bind:aaa.sync="foo() + bar()" />`
+- The `.sync` modifier does not have the attribute value which is valid as LHS. E.g. `<MyComponent v-bind:aaa.sync="foo() + bar()" />`, `<MyComponent v-bind:aaa.sync="a?.b" />`
+- The `.sync` modifier has potential null object property access. E.g. `<MyComponent v-bind:aaa.sync="(a?.b).c" />`
 - The `.sync` modifier is on non Vue-components. E.g. `<input v-bind:aaa.sync="foo"></div>`
 - The `.sync` modifier's reference is iteration variables. E.g. `<div v-for="x in list"><MyComponent v-bind:aaa.sync="x" /></div>`
 
@@ -36,6 +37,9 @@ This rule reports `.sync` modifier on `v-bind` directives in the following cases
   <MyComponent v-bind:aaa.sync="foo + bar" />
   <MyComponent :aaa.sync="foo + bar" />
 
+  <MyComponent :aaa.sync="a?.b.c" />
+  <MyComponent :aaa.sync="(a?.b).c" />
+
   <input v-bind:aaa.sync="foo">
   <input :aaa.sync="foo">
 

docs/rules/valid-v-model.md

@@ -18,7 +18,8 @@ This rule reports `v-model` directives in the following cases:
 - The directive used on HTMLElement has an argument. E.g. `<input v-model:aaa="foo">`
 - The directive used on HTMLElement has modifiers which are not supported. E.g. `<input v-model.bbb="foo">`
 - The directive does not have that attribute value. E.g. `<input v-model>`
-- The directive does not have the attribute value which is valid as LHS. E.g. `<input v-model="foo() + bar()">`
+- The directive does not have the attribute value which is valid as LHS. E.g. `<input v-model="foo() + bar()">`, `<input v-model="a?.b">`
+- The directive has potential null object property access. E.g. `<input v-model="(a?.b).c">`
 - The directive is on unsupported elements. E.g. `<div v-model="foo"></div>`
 - The directive is on `<input>` elements which their types are `file`. E.g. `<input type="file" v-model="foo">`
 - The directive's reference is iteration variables. E.g. `<div v-for="x in list"><input type="file" v-model="x"></div>`
@@ -44,6 +45,8 @@ This rule reports `v-model` directives in the following cases:
   <input v-model:aaa="foo">
   <input v-model.bbb="foo">
   <input v-model="foo + bar">
+  <input v-model="a?.b.c">
+  <input v-model="(a?.b).c">
   <div v-model="foo"/>
   <div v-for="todo in todos">
     <input v-model="todo">

docs/user-guide/README.md

@@ -18,7 +18,7 @@ yarn add -D eslint eslint-plugin-vue@next
 ```
 
 ::: tip Requirements
-- ESLint v6.0.0 and above
+- ESLint v6.2.0 and above
 - Node.js v8.10.0 and above
 :::
 

lib/configs/base.js

@@ -6,7 +6,7 @@
 module.exports = {
   parser: require.resolve('vue-eslint-parser'),
   parserOptions: {
-    ecmaVersion: 2018,
+    ecmaVersion: 2020,
     sourceType: 'module'
   },
   env: {

lib/rules/component-name-in-template-casing.js

@@ -135,16 +135,13 @@ module.exports = {
                 name,
                 caseType
               },
-              fix: (fixer) => {
+              *fix(fixer) {
+                yield fixer.replaceText(open, `<${casingName}`)
                 const endTag = node.endTag
-                if (!endTag) {
-                  return fixer.replaceText(open, `<${casingName}`)
+                if (endTag) {
+                  const endTagOpen = tokens.getFirstToken(endTag)
+                  yield fixer.replaceText(endTagOpen, `</${casingName}`)
                 }
-                const endTagOpen = tokens.getFirstToken(endTag)
-                return [
-                  fixer.replaceText(open, `<${casingName}`),
-                  fixer.replaceText(endTagOpen, `</${casingName}`)
-                ]
               }
             })
           }

lib/rules/custom-event-name-casing.js

@@ -48,7 +48,7 @@ function getNameParamNode(node) {
  * @param {CallExpression} node CallExpression
  */
 function getCalleeMemberNode(node) {
-  const callee = node.callee
+  const callee = utils.skipChainExpression(node.callee)
 
   if (callee.type === 'MemberExpression') {
     const name = utils.getStaticPropertyName(callee)
@@ -116,7 +116,7 @@ module.exports = {
       utils.compositingVisitors(
         utils.defineVueVisitor(context, {
           onSetupFunctionEnter(node, { node: vueNode }) {
-            const contextParam = utils.unwrapAssignmentPattern(node.params[1])
+            const contextParam = utils.skipDefaultParamValue(node.params[1])
             if (!contextParam) {
               // no arguments
               return

lib/rules/html-self-closing.js

@@ -163,7 +163,7 @@ module.exports = {
                 elementType: ELEMENT_TYPE_MESSAGES[elementType],
                 name: node.rawName
               },
-              fix: (fixer) => {
+              fix(fixer) {
                 const tokens = context.parserServices.getTemplateBodyTokenStore()
                 const close = tokens.getLastToken(node.startTag)
                 if (close.type !== 'HTMLTagClose') {
@@ -187,7 +187,7 @@ module.exports = {
                 elementType: ELEMENT_TYPE_MESSAGES[elementType],
                 name: node.rawName
               },
-              fix: (fixer) => {
+              fix(fixer) {
                 const tokens = context.parserServices.getTemplateBodyTokenStore()
                 const close = tokens.getLastToken(node.startTag)
                 if (close.type !== 'HTMLSelfClosingTagClose') {

lib/rules/no-async-in-computed-properties.js

@@ -26,16 +26,17 @@ const TIMED_FUNCTIONS = [
  * @param {CallExpression} node
  */
 function isTimedFunction(node) {
+  const callee = utils.skipChainExpression(node.callee)
   return (
     ((node.type === 'CallExpression' &&
-      node.callee.type === 'Identifier' &&
-      TIMED_FUNCTIONS.indexOf(node.callee.name) !== -1) ||
+      callee.type === 'Identifier' &&
+      TIMED_FUNCTIONS.indexOf(callee.name) !== -1) ||
       (node.type === 'CallExpression' &&
-        node.callee.type === 'MemberExpression' &&
-        node.callee.object.type === 'Identifier' &&
-        node.callee.object.name === 'window' &&
-        node.callee.property.type === 'Identifier' &&
-        TIMED_FUNCTIONS.indexOf(node.callee.property.name) !== -1)) &&
+        callee.type === 'MemberExpression' &&
+        callee.object.type === 'Identifier' &&
+        callee.object.name === 'window' &&
+        callee.property.type === 'Identifier' &&
+        TIMED_FUNCTIONS.indexOf(callee.property.name) !== -1)) &&
     node.arguments.length
   )
 }
@@ -44,18 +45,16 @@ function isTimedFunction(node) {
  * @param {CallExpression} node
  */
 function isPromise(node) {
-  if (
-    node.type === 'CallExpression' &&
-    node.callee.type === 'MemberExpression'
-  ) {
+  const callee = utils.skipChainExpression(node.callee)
+  if (node.type === 'CallExpression' && callee.type === 'MemberExpression') {
     return (
       // hello.PROMISE_FUNCTION()
-      (node.callee.property.type === 'Identifier' &&
-        PROMISE_FUNCTIONS.indexOf(node.callee.property.name) !== -1) || // Promise.PROMISE_METHOD()
-      (node.callee.object.type === 'Identifier' &&
-        node.callee.object.name === 'Promise' &&
-        node.callee.property.type === 'Identifier' &&
-        PROMISE_METHODS.indexOf(node.callee.property.name) !== -1)
+      (callee.property.type === 'Identifier' &&
+        PROMISE_FUNCTIONS.indexOf(callee.property.name) !== -1) || // Promise.PROMISE_METHOD()
+      (callee.object.type === 'Identifier' &&
+        callee.object.name === 'Promise' &&
+        callee.property.type === 'Identifier' &&
+        PROMISE_METHODS.indexOf(callee.property.name) !== -1)
     )
   }
   return false

lib/rules/no-deprecated-events-api.js

@@ -32,13 +32,26 @@ module.exports = {
   /** @param {RuleContext} context */
   create(context) {
     return utils.defineVueVisitor(context, {
-      /** @param {MemberExpression & {parent: CallExpression}} node */
-      'CallExpression > MemberExpression'(node) {
-        const call = node.parent
+      /** @param {MemberExpression & ({parent: CallExpression} | {parent: ChainExpression & {parent: CallExpression}})} node */
+      'CallExpression > MemberExpression, CallExpression > ChainExpression > MemberExpression'(
+        node
+      ) {
+        const call =
+          node.parent.type === 'ChainExpression'
+            ? node.parent.parent
+            : node.parent
+
+        if (call.optional) {
+          // It is OK because checking whether it is deprecated.
+          // e.g. `this.$on?.()`
+          return
+        }
+
         if (
-          call.callee !== node ||
-          node.property.type !== 'Identifier' ||
-          !['$on', '$off', '$once'].includes(node.property.name)
+          utils.skipChainExpression(call.callee) !== node ||
+          !['$on', '$off', '$once'].includes(
+            utils.getStaticPropertyName(node) || ''
+          )
         ) {
           return
         }

lib/rules/no-deprecated-v-bind-sync.js

@@ -39,7 +39,7 @@ module.exports = {
             node,
             loc: node.loc,
             messageId: 'syncModifierIsDeprecated',
-            fix: (fixer) => {
+            fix(fixer) {
               if (node.key.argument == null) {
                 // is using spread syntax
                 return null

lib/rules/no-deprecated-v-on-number-modifiers.js

@@ -47,7 +47,7 @@ module.exports = {
           context.report({
             node: modifier,
             messageId: 'numberModifierIsDeprecated',
-            fix: (fixer) => {
+            fix(fixer) {
               const key = keyCodeToKey[keyCodes]
               if (!key) return null
 

lib/rules/no-deprecated-vue-config-keycodes.js

@@ -4,6 +4,8 @@
  */
 'use strict'
 
+const utils = require('../utils')
+
 // ------------------------------------------------------------------------------
 // Rule Definition
 // ------------------------------------------------------------------------------
@@ -31,7 +33,7 @@ module.exports = {
       "MemberExpression[property.type='Identifier'][property.name='keyCodes']"(
         node
       ) {
-        const config = node.object
+        const config = utils.skipChainExpression(node.object)
         if (
           config.type !== 'MemberExpression' ||
           config.property.type !== 'Identifier' ||

lib/rules/no-multiple-slot-args.js

@@ -100,15 +100,12 @@ module.exports = {
     return utils.defineVueVisitor(context, {
       /** @param {MemberExpression} node */
       MemberExpression(node) {
-        const object = node.object
+        const object = utils.skipChainExpression(node.object)
         if (object.type !== 'MemberExpression') {
           return
         }
-        if (
-          object.property.type !== 'Identifier' ||
-          (object.property.name !== '$slots' &&
-            object.property.name !== '$scopedSlots')
-        ) {
+        const name = utils.getStaticPropertyName(object)
+        if (!name || (name !== '$slots' && name !== '$scopedSlots')) {
           return
         }
         if (!utils.isThis(object.object, context)) {

lib/rules/no-setup-props-destructure.js

@@ -49,18 +49,18 @@ module.exports = {
         return
       }
 
+      const rightNode = utils.skipChainExpression(right)
       if (
         left.type !== 'ArrayPattern' &&
         left.type !== 'ObjectPattern' &&
-        right.type !== 'MemberExpression'
+        rightNode.type !== 'MemberExpression'
       ) {
         return
       }
-
       /** @type {Expression | Super} */
-      let rightId = right
+      let rightId = rightNode
       while (rightId.type === 'MemberExpression') {
-        rightId = rightId.object
+        rightId = utils.skipChainExpression(rightId.object)
       }
       if (rightId.type === 'Identifier' && propsReferenceIds.has(rightId)) {
         report(left, 'getProperty')
@@ -84,7 +84,7 @@ module.exports = {
         }
       },
       onSetupFunctionEnter(node) {
-        const propsParam = utils.unwrapAssignmentPattern(node.params[0])
+        const propsParam = utils.skipDefaultParamValue(node.params[0])
         if (!propsParam) {
           // no arguments
           return

lib/rules/no-unused-properties.js

@@ -221,7 +221,7 @@ function getObjectPatternPropertyPatternTracker(pattern) {
 }
 
 /**
- * @param {Identifier | MemberExpression | ThisExpression} node
+ * @param {Identifier | MemberExpression | ChainExpression | ThisExpression} node
  * @param {RuleContext} context
  * @returns {UsedProps}
  */
@@ -304,6 +304,14 @@ function extractPatternOrThisProperties(node, context) {
         }
       }
     }
+  } else if (parent.type === 'ChainExpression') {
+    const { usedNames, unknown, calls } = extractPatternOrThisProperties(
+      parent,
+      context
+    )
+    result.usedNames.addAll(usedNames)
+    result.unknown = result.unknown || unknown
+    result.calls.push(...calls)
   }
   return result
 }

lib/rules/no-useless-mustaches.js

@@ -142,7 +142,7 @@ module.exports = {
             return null
           }
 
-          return [fixer.replaceText(node, text.replace(/\\([\s\S])/g, '$1'))]
+          return fixer.replaceText(node, text.replace(/\\([\s\S])/g, '$1'))
         }
       })
     }

lib/rules/no-useless-v-bind.js

@@ -111,10 +111,10 @@ module.exports = {
       context.report({
         node,
         messageId: 'unexpected',
-        fix(fixer) {
+        *fix(fixer) {
           if (hasComment || hasEscape) {
             // cannot fix
-            return null
+            return
           }
           const text = sourceCode.getText(value)
           const quoteChar = text[0]
@@ -126,6 +126,8 @@ module.exports = {
             node.key.name.range[1] + (shorthand ? 0 : 1)
           ]
 
+          yield fixer.removeRange(keyDirectiveRange)
+
           let attrValue
           if (quoteChar === '"') {
             attrValue = strValue.replace(DOUBLE_QUOTES_RE, '"')
@@ -136,10 +138,7 @@ module.exports = {
               .replace(DOUBLE_QUOTES_RE, '"')
               .replace(SINGLE_QUOTES_RE, ''')
           }
-          return [
-            fixer.removeRange(keyDirectiveRange),
-            fixer.replaceText(expression, attrValue)
-          ]
+          yield fixer.replaceText(expression, attrValue)
         }
       })
     }