Supports Optional Chaining

vuejs · Jun 14, 2020 · 2a1a2a6 · 2a1a2a6
1 parent 752a028
commit 2a1a2a6
Show file tree

Hide file tree

Showing 58 changed files with 1,296 additions and 364 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -49,7 +49,9 @@ module.exports = {
           {
             pattern: `https://eslint.vuejs.org/rules/{{name}}.html`
           }
-        ]
+        ],
+
+        'eslint-plugin/fixer-return': 'off'
       }
     }
   ]

diff --git a/docs/.vuepress/components/eslint-code-block.vue b/docs/.vuepress/components/eslint-code-block.vue
@@ -32,7 +32,7 @@ export default {
     },
     rules: {
       type: Object,
-      default () {
+      default() {
         return {}
       }
     },
@@ -46,7 +46,7 @@ export default {
     }
   },
 
-  data () {
+  data() {
     return {
       linter: null,
       preprocess: processors['.vue'].preprocess,
@@ -59,7 +59,7 @@ export default {
   },
 
   computed: {
-    config () {
+    config() {
       return {
         globals: {
           // ES2015 globals
@@ -89,7 +89,7 @@ export default {
         rules: this.rules,
         parser: 'vue-eslint-parser',
         parserOptions: {
-          ecmaVersion: 2019,
+          ecmaVersion: 2020,
           sourceType: 'module',
           ecmaFeatures: {
             jsx: true
@@ -98,33 +98,30 @@ export default {
       }
     },
 
-    code () {
+    code() {
       return `${this.computeCodeFromSlot(this.$slots.default).trim()}\n`
     },
 
-    height () {
+    height() {
       const lines = this.code.split('\n').length
       return `${Math.max(120, 19 * lines)}px`
     }
   },
 
   methods: {
-    computeCodeFromSlot (nodes) {
+    computeCodeFromSlot(nodes) {
       if (!Array.isArray(nodes)) {
         return ''
       }
-      return nodes.map(node =>
-        node.text || this.computeCodeFromSlot(node.children)
-      ).join('')
+      return nodes
+        .map((node) => node.text || this.computeCodeFromSlot(node.children))
+        .join('')
     }
   },
 
-  async mounted () {
+  async mounted() {
     // Load linter.
-    const [
-      { default: Linter },
-      { parseForESLint }
-    ] = await Promise.all([
+    const [{ default: Linter }, { parseForESLint }] = await Promise.all([
       import('eslint4b/dist/linter'),
       import('espree').then(() => import('vue-eslint-parser'))
     ])

diff --git a/docs/rules/no-arrow-functions-in-watch.md b/docs/rules/no-arrow-functions-in-watch.md
@@ -40,7 +40,7 @@ export default {
         /* ... */
       }
     ],
-    'e.f': function (val, oldVal) { /* ... */ }
+    'e.f': function (val, oldVal) { /* ... */ },
 
     /* ✗ BAD */
     foo: (val, oldVal) => {

diff --git a/docs/rules/no-deprecated-events-api.md b/docs/rules/no-deprecated-events-api.md
@@ -26,7 +26,15 @@ export default {
     this.$emit('start')
   }
 }
+</script>
+```
+
+</eslint-code-block>
 
+<eslint-code-block :rules="{'vue/no-deprecated-events-api': ['error']}">
+
+```vue
+<script>
 /* ✓ GOOD */
 import mitt from 'mitt'
 const emitter = mitt()

diff --git a/docs/rules/no-template-target-blank.md b/docs/rules/no-template-target-blank.md
@@ -16,10 +16,10 @@ This rule disallows using `target="_blank"` attribute without `rel="noopener nor
 ```vue
 <template>
   <!-- ✓ Good -->
-  <a link="http://example.com" target="_blank" rel="noopener noreferrer">link</a>
+  <a href="http://example.com" target="_blank" rel="noopener noreferrer">link</a>
 
   <!-- ✗ BAD -->
-  <a link="http://example.com" target="_blank" >link</a>
+  <a href="http://example.com" target="_blank" >link</a>
 </temlate>
 ```
 
@@ -46,10 +46,10 @@ This rule disallows using `target="_blank"` attribute without `rel="noopener nor
 ```vue
 <template>
   <!-- ✓ Good -->
-  <a link="http://example.com" target="_blank" rel="noopener noreferrer">link</a>
+  <a href="http://example.com" target="_blank" rel="noopener noreferrer">link</a>
 
   <!-- ✗ BAD -->
-  <a link="http://example.com" target="_blank" rel="noopener">link</a>
+  <a href="http://example.com" target="_blank" rel="noopener">link</a>
 </temlate>
 ```
 
@@ -62,26 +62,26 @@ This rule disallows using `target="_blank"` attribute without `rel="noopener nor
 ```vue
 <template>
   <!-- ✓ Good -->
-  <a link="http://example.com" target="_blank" rel="noopener">link</a>
+  <a href="http://example.com" target="_blank" rel="noopener">link</a>
 
   <!-- ✗ BAD -->
-  <a link="http://example.com" target="_blank" >link</a>
+  <a href="http://example.com" target="_blank" >link</a>
 </temlate>
 ```
 
 </eslint-code-block>
 
 ### `{ "enforceDynamicLinks": "always" }` (default)
 
-<eslint-code-block :rules="{'vue/no-template-target-blank': ['error', { enforceDynamicLinks: 'never' }]}">
+<eslint-code-block :rules="{'vue/no-template-target-blank': ['error', { enforceDynamicLinks: 'always' }]}">
 
 ```vue
 <template>
   <!-- ✓ Good -->
-  <a :link="link" target="_blank" rel="noopener noreferrer">link</a>
+  <a :href="link" target="_blank" rel="noopener noreferrer">link</a>
 
   <!-- ✗ BAD -->
-  <a :link="link" target="_blank">link</a>
+  <a :href="link" target="_blank">link</a>
 </temlate>
 ```
 
@@ -94,10 +94,10 @@ This rule disallows using `target="_blank"` attribute without `rel="noopener nor
 ```vue
 <template>
   <!-- ✓ Good -->
-  <a :link="link" target="_blank">link</a>
+  <a :href="link" target="_blank">link</a>
 
   <!-- ✗ BAD -->
-  <a link="http://example.com" target="_blank" >link</a>
+  <a href="http://example.com" target="_blank" >link</a>
 </temlate>
 ```
 

diff --git a/docs/rules/valid-v-bind-sync.md b/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">
 

diff --git a/docs/rules/valid-v-model.md b/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">

diff --git a/lib/rules/component-name-in-template-casing.js b/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}`)
-                ]
               }
             })
           }

diff --git a/lib/rules/custom-event-name-casing.js b/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.unwrapChainExpression(node.callee)
 
   if (callee.type === 'MemberExpression') {
     const name = utils.getStaticPropertyName(callee)

diff --git a/lib/rules/html-self-closing.js b/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') {

diff --git a/lib/rules/no-async-in-computed-properties.js b/lib/rules/no-async-in-computed-properties.js
@@ -26,16 +26,17 @@ const TIMED_FUNCTIONS = [
  * @param {CallExpression} node
  */
 function isTimedFunction(node) {
+  const callee = utils.unwrapChainExpression(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.unwrapChainExpression(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

diff --git a/lib/rules/no-deprecated-events-api.js b/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.unwrapChainExpression(call.callee) !== node ||
+          !['$on', '$off', '$once'].includes(
+            utils.getStaticPropertyName(node) || ''
+          )
         ) {
           return
         }

diff --git a/lib/rules/no-deprecated-v-bind-sync.js b/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

diff --git a/lib/rules/no-deprecated-v-on-number-modifiers.js b/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
 

diff --git a/lib/rules/no-deprecated-vue-config-keycodes.js b/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.unwrapChainExpression(node.object)
         if (
           config.type !== 'MemberExpression' ||
           config.property.type !== 'Identifier' ||