Object Shorthand conflicts with func-names

Tell us about your environment

├─ @vue/cli-plugin-eslint@3.11.0
│  └─ eslint@4.19.1
└─ eslint@6.1.0

• Node Version: v12.6.0
• npm Version: 6.9.0

What parser (default, Babel-ESLint, etc.) are you using? babel Please show your full configuration:

Configuration

{
  "plugins": [
    "vue"
  ],
  "extends": [
    "plugin:vue/recommended",
    "airbnb-base",
    "plugin:prettier/recommended",
    "prettier/vue"
  ],
  "env": {
    "jest": true
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2018
  },
  "globals": {
    "App": true
  },
  "settings": {
    "import/extensions": [
      ".vue"
    ],
    "import/resolver": {
      "node": {
        "paths": ["app/javascript"],
        "extensions": [".js", ".vue"]
      }
    }
  },
  "rules": {
    "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }],
    "no-underscore-dangle": ["error", { "allow": ["_underlying_vm_", "_componentTag"] }],
    "no-return-assign": ["error", "except-parens"],
    "no-restricted-properties": "off",
    "import/prefer-default-export": "off",
    "no-shadow": "off",
    "no-unused-expressions": "off",
    "no-param-reassign": ["error", { "props": false }],
    "quotes": ["error", "single"],
    "max-len": ["error", {
      "code": 130,
      "ignoreComments": true,
      "ignoreUrls": true
    }],
    "vue/max-attributes-per-line": [
      2,
      {
        "singleline": 20,
        "multiline": {
          "max": 1,
          "allowFirstLine": false
        }
      }
    ]
  }
}

What did you do? Please include the actual source code causing the issue, as well as the command that you used to run ESLint.

    '$route.query': function() {
      this.fetchData();
    },

║ 239      │ 21       │ warning  │ Unexpected unnamed method '$route.query'.              │ func-names           ║

    '$route.query'() {
      this.fetchData();
    },

║ Line     │ Column   │ Type     │ Message                                                │ Rule ID              ║
╟──────────┼──────────┼──────────┼────────────────────────────────────────────────────────┼──────────────────────╢
║ 239      │ 5        │ error    │ Expected longform method syntax for string literal     │ object-shorthand     ║
║          │          │          │ keys.                                                  │                      ║

eslint --ext .js,.vue app/javascript

What did you expect to happen?

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

Are you willing to submit a pull request to fix this bug? yes

[mdjermanovic]

The option doesn’t enforce unquoted property names (this isn’t the quote-props rule), it disallows shorthands with quoted names.

“avoidQuotes”: true indicates that long-form syntax is preferred whenever the object key is a string literal

Rules are configured to enforce this code:

const foo = { 
  '$route.query': function $routeQuery() {
      this.fetchData();
   }
}

If you want to allow the following:

const foo = { 
  '$route.query'() {
      this.fetchData();
   }
}

then set the avoidQuotes option to false.

[mysticatea]

@ljharb No. I just talked about the current behavior.