camelcase with optional chaining

[RyanPWalker]

I'm really not sure if this is a bug fix or rule change, but when using optional chaining on an object's keys, I would expect camelcase to not apply. For example, we can't control the data we are given from apis so if they use something that's not camelcase, then it is what it is. So accessing data?.some_data should not throw an error.

Node version: v12.16.0
npm version: v6.13.4
lint version: ^6.8.0
babel-eslint version: ^10.1.0

[anikethsaha]

you can use /*eslint camelcase: ["error", {allow: ["some_data "]}]*/ in order to allow them .

Also, as of now, I think eslint doesn't support optional chaining #12642. ecmaVersion 2020 doesn't parse it demo

[kaicataldo]

@RyanPWalker We're currently blocked by this discussion. Once the ESTree maintainers decide how to move forward, Acorn (our underlying parser) will be able to implement this syntax and we'll be able to use this downstream.

[k-funk]

In the interim, assuming that you're using babel, you can use https://github.com/babel/eslint-plugin-babel with the same args for "babel/camelcase" as you would for "camelcase":

// these options are just an example, based on eslint-config-airbnb-base's config

"babel/camelcase": ['error', { properties: 'never', ignoreDestructuring: false }],

[lucksp]

Any other workaround?
I am using Create-React-App, which has a bunch of built in stuff (for better or worse). I tried the eslint camelcase rule with no luck. I downloaded the eslint-babel-plugin also, without success.

Example: aircraft?.interval_summary?.narrow_intervals results in error for camelcase rule.

My eslint setup:

module.exports = {
  parser: 'babel-eslint',
  extends: ['react-app', 'airbnb', 'eslint:recommended', 'plugin:prettier/recommended'],
  plugins: ['react', 'react-hooks', 'babel'],
  settings: {
    'import/resolver': {
      node: {
        paths: ['src', 'utils'],
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },
  rules: {
    strict: 0,
    'arrow-body-style': 0,
    'arrow-parens': 0,
    'brace-style': [2, '1tbs'],
    'no-var': 0,
    semi: 0,
    'react/jsx-filename-extension': 0,
    'comma-dangle': 0,
    'operator-linebreak': 0,
    'implicit-arrow-linebreak': 0,
    'object-curly-newline': 0,
    'function-paren-newline': 0,
    'jsx-a11y/label-has-for': 0,
    'jsx-a11y/label-has-associated-control': 0,
    'prefer-arrow-callback': 0,
    'react/jsx-one-expression-per-line': 0,
    'react-hooks/rules-of-hooks': 2,
    'react-hooks/exhaustive-deps': 1,
    'react/jsx-indent': 0,
    indent: 0,
    'no-unused-vars': 2,
    'nonblock-statement-body-position': 0,
    curly: 0,
    'import/prefer-default-export': 0,
    'react/prop-types': 0,
    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
    'import/extensions': 0,
    'consistent-return': [0, { treatUndefinedAsUnspecified: true }],
    'no-param-reassign': [2, { props: true, ignorePropertyModificationsFor: ['draft'] }],
    'babel/camelcase': [2, { properties: 'never', ignoreDestructuring: true }],
  },
  
};

Any other workaround available?

[mdjermanovic]

@lucksp

'babel/camelcase': [2, { properties: 'never', ignoreDestructuring: true }],

I think you should also disable the core camelcase rule:

camelcase: "off"

[lucksp]

thank you!!! disabling core works.

[SebastienGllmt]

Seems estree/estree#204 is merged now, but this issue still exists in the latest eslint release

[mdjermanovic]

The core camelcase rule works well with the default parser, as in this demo.

The rule still doesn't work well with the current version of babel-eslint parser.

This should be fixed in the next babel-eslint version (actually, it will be @babel/eslint-parser), which will align AST to match estree spec. Until that, you should still use babel/camelcase rule instead of the core camelcase rule if you are using babel-eslint parser.

[nzakas]

Optional chaining is now fully supported in ESLint core and the rule is working as expected, so closing.

[RyanPWalker]

Can confirm, error no longer shows up on latest eslint. Thanks.