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') {