Support Optional Chaining

[Akryum]

Tell us about your environment

• ESLint Version: 4.4.1
• Node Version: 8.2.1
• yarn Version: 0.27.5

What parser (default, Babel-ESLint, etc.) are you using?

Babel-ESLint (tried with 7.2.3 and 8.0.0-alpha.18)

Please show your full configuration:

Configuration

module.exports = {
  root: true,
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended',
  ],
  'parserOptions': {
    'parser': 'babel-eslint',
    'sourceType': 'module',
  },
  env: {
    es6: true,
    node: true,
    browser: true,
  },
  // add your custom rules here
  'rules': {
    'accessor-pairs': 'error',
    'array-callback-return': 'warn',
    'arrow-spacing': ['error', { 'before': true, 'after': true }],
    'block-spacing': ['error', 'always'],
    'brace-style': ['error', '1tbs', { 'allowSingleLine': false }],
    'camelcase': ['error', { 'properties': 'never' }],
    'comma-dangle': ['error', 'always-multiline'],
    'comma-spacing': ['error', { 'before': false, 'after': true }],
    'comma-style': ['error', 'last'],
    'constructor-super': 'error',
    'curly': ['error', 'multi-line'],
    'dot-location': ['error', 'property'],
    'eol-last': 'error',
    'eqeqeq': ['error', 'always', { 'null': 'ignore' }],
    'func-call-spacing': ['error', 'never'],
    'handle-callback-err': ['error', '^(err|error)$' ],
    'indent': ['error', 2, { 'SwitchCase': 1 }],
    'key-spacing': ['error', { 'beforeColon': false, 'afterColon': true }],
    'keyword-spacing': ['error', { 'before': true, 'after': true }],
    'new-cap': ['error', { 'newIsCap': true, 'capIsNew': false }],
    'new-parens': 'error',
    'no-array-constructor': 'error',
    'no-caller': 'error',
    'no-class-assign': 'error',
    'no-compare-neg-zero': 'error',
    'no-cond-assign': 'error',
    'no-console': 'off',
    'no-const-assign': 'error',
    'no-constant-condition': ['error', { 'checkLoops': false }],
    'no-control-regex': 'error',
    'no-delete-var': 'error',
    'no-dupe-args': 'error',
    'no-dupe-class-members': 'error',
    'no-dupe-keys': 'error',
    'no-duplicate-case': 'error',
    'no-empty-character-class': 'error',
    'no-empty-pattern': 'error',
    'no-eval': 'error',
    'no-ex-assign': 'error',
    'no-extend-native': 'warn',
    'no-extra-bind': 'error',
    'no-extra-boolean-cast': 'error',
    'no-extra-parens': ['error', 'functions'],
    'no-fallthrough': 'error',
    'no-floating-decimal': 'error',
    'no-func-assign': 'error',
    'no-global-assign': 'error',
    'no-implied-eval': 'error',
    'no-inner-declarations': ['error', 'functions'],
    'no-invalid-regexp': 'error',
    'no-irregular-whitespace': 'error',
    'no-iterator': 'error',
    'no-label-var': 'error',
    'no-labels': ['error', { 'allowLoop': false, 'allowSwitch': false }],
    'no-lone-blocks': 'error',
    'no-mixed-operators': ['error', {
      'groups': [
        ['==', '!=', '===', '!==', '>', '>=', '<', '<='],
        ['&&', '||'],
        ['in', 'instanceof']
      ],
      'allowSamePrecedence': true
    }],
    'no-mixed-spaces-and-tabs': 'error',
    'no-multi-spaces': 'error',
    'no-multi-str': 'error',
    'no-multiple-empty-lines': ['error', { 'max': 1, 'maxEOF': 0 }],
    'no-negated-in-lhs': 'error',
    'no-new': 'error',
    'no-new-func': 'error',
    'no-new-object': 'error',
    'no-new-require': 'error',
    'no-new-symbol': 'error',
    'no-new-wrappers': 'error',
    'no-obj-calls': 'error',
    'no-octal': 'error',
    'no-octal-escape': 'error',
    'no-path-concat': 'error',
    'no-proto': 'error',
    'no-redeclare': 'error',
    'no-regex-spaces': 'error',
    'no-return-await': 'error',
    'no-self-assign': 'error',
    'no-self-compare': 'error',
    'no-sequences': 'error',
    'no-shadow-restricted-names': 'error',
    'no-sparse-arrays': 'error',
    'no-tabs': 'error',
    'no-template-curly-in-string': 'error',
    'no-this-before-super': 'error',
    'no-throw-literal': 'error',
    'no-trailing-spaces': 'error',
    'no-undef': 'error',
    'no-undef-init': 'error',
    'no-unexpected-multiline': 'error',
    'no-unmodified-loop-condition': 'error',
    'no-unneeded-ternary': ['error', { 'defaultAssignment': false }],
    'no-unreachable': 'error',
    'no-unsafe-finally': 'error',
    'no-unsafe-negation': 'error',
    // 'no-unused-expressions': ['error', { 'allowShortCircuit': true, 'allowTernary': true, 'allowTaggedTemplates': true }],
    'no-unused-vars': ['error', { 'vars': 'all', 'args': 'none', 'ignoreRestSiblings': true }],
    'no-use-before-define': ['error', { 'functions': false, 'classes': false, 'variables': false }],
    'no-useless-call': 'error',
    'no-useless-computed-key': 'error',
    'no-useless-constructor': 'error',
    'no-useless-escape': 'error',
    'no-useless-rename': 'error',
    'no-useless-return': 'error',
    'no-var': 'error',
    'no-whitespace-before-property': 'error',
    'no-with': 'error',
    'object-property-newline': ['error', { 'allowMultiplePropertiesPerLine': true }],
    'one-var': ['error', { 'initialized': 'never' }],
    'operator-linebreak': ['error', 'after', { 'overrides': { '?': 'before', ':': 'before' } }],
    'padded-blocks': ['error', { 'blocks': 'never', 'switches': 'never', 'classes': 'never' }],
    'prefer-const': 'warn',
    'quotes': ['error', 'single', { 'avoidEscape': true, 'allowTemplateLiterals': true }],
    'rest-spread-spacing': ['error', 'never'],
    'semi': ['error', 'never'],
    'semi-spacing': ['error', { 'before': false, 'after': true }],
    'space-before-blocks': ['error', 'always'],
    'space-before-function-paren': ['error', 'always'],
    'space-in-parens': ['error', 'never'],
    'space-infix-ops': 'error',
    'space-unary-ops': ['error', { 'words': true, 'nonwords': false }],
    'spaced-comment': ['error', 'always', {
      'line': { 'markers': ['*package', '!', '/', ','] },
      'block': { 'balanced': true, 'markers': ['*package', '!', ',', ':', '::', 'flow-include'], 'exceptions': ['*'] }
    }],
    'symbol-description': 'error',
    'template-curly-spacing': ['error', 'never'],
    'template-tag-spacing': ['error', 'never'],
    'unicode-bom': ['error', 'never'],
    'use-isnan': 'error',
    'valid-typeof': ['error', { 'requireStringLiterals': true }],
    'wrap-iife': ['error', 'any', { 'functionPrototypeMethods': true }],
    'yield-star-spacing': ['error', 'both'],
    'yoda': ['error', 'never'],

    'vue/require-v-for-key': 'off',
    'vue/html-quotes': 'error',
    'vue/v-bind-style': 'error',
    'vue/v-on-style': 'error',
  }
}

.babelrc:

{
  "presets": [
    ["env", { "modules": false }],
    "stage-0"
  ],
  "plugins": [
    "transform-vue-jsx",
    "jsx-vue-functional",
    "jsx-v-model",
    "transform-optional-chaining"
  ]
}

What did you do? Please include the actual source code causing the issue.

if (group.invoices?.length === 0) {

What did you expect to happen?

No error thrown when using optional chaining.

What actually happened? Please include the actual, raw output from ESLint.

Syntax Error: Unexpected token (105:38)

  103 |                 height: 100,
  104 |               })))
> 105 |             } else if (group.invoices?.length === 0) {
      |                                       ^
  106 |               list.push({
  107 |                 type: 'empty',
  108 |                 height: 67,



 @ ./src/components/invoices/invoice-documents/DocumentList.vue 8:0-131
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/invoic
es/invoice-documents/InvoiceDocuments.vue
 @ ./src/components/invoices/invoice-documents/InvoiceDocuments.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/invoic
es/MonoInvoice.vue
 @ ./src/components/invoices/MonoInvoice.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/invoic
es/InvoicesPage.vue
 @ ./src/components/invoices/InvoicesPage.vue
 @ ./src/app-router.js
 @ ./src/app-main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server babel-polyfill ./src/app-main.js

[not-an-aardvark]

Thanks for the report. ESLint doesn't support experimental features (see our readme), so we don't plan to support optional chaining in ESLint core until it reaches stage 4 and becomes an official part of the spec. However, it should still be possible to lint code containing optional chaining syntax if you use a parser that can handle it.

I see you're using babel-eslint. If babel supports optional chaining and babel-eslint doesn't, then that could be an issue with babel-eslint, so you could consider reporting an issue there.