ESLint throw error Expected method shorthand (object shorthand)

Question

I am following the steps in this tutorial :

https://www.youtube.com/watch?v=z6hQqgvGI4Y

using VSCode (version 1.22.2) as my editor

I am running the following version

==> vue --version
2.9.3

of Vue / vue-cli installed from npm using the steps outlined here :

npm install --global vue-cli

My VSCode workspace settings (User settings) are as follows :

{
"workbench.colorTheme": "Visual Studio Dark",
"window.zoomLevel": 1,
"workbench.statusBar.visible": true,
"workbench.startupEditor": "newUntitledFile",
// Format a file on save. A formatter must be available, the file must not be auto-saved, and editor must not be shutting down.
// "editor.formatOnSave": true,
"eslint.autoFixOnSave": true,
// Enable/disable default JavaScript formatter (For Prettier)
"javascript.format.enable": false,
// Use 'prettier-eslint' instead of 'prettier'. Other settings will only be fallbacks in case they could not be inferred from eslint rules.
"prettier.eslintIntegration": false,
"editor.insertSpaces": true,
"[javascript]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
},
"[vue]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
},
"eslint.options": {
    "extensions": [".html", ".js", ".vue", ".jsx"]
},
"eslint.validate": [
    {
        "language": "html",
        "autoFix": true
    },
    {
        "language": "vue",
        "autoFix": false
    },
    {
        "language": "javascript",
        "autoFix": true
    },
    {
        "language": "javascriptreact",
        "autoFix": true
    }
]

}

I have the Vetur tooling for VSCode installed :

https://github.com/vuejs/vetur

I have the following files : src/components/HomeCentral.vue

<template>
    <div class="homecentral">
        <input type="text" v-model="title"><br/>
        <h1>{{title}}</h1>
        <p v-if="showName">{{user.first_name}}</p>
        <p v-else>Nobody</p>
        <ul>
            <li v-for="item in items" :key="item.id">{{item.title}}</li>
        </ul>
        <button v-on:click="greet('Hello World')">Say Greeting</button>
    </div>
</template>

<script>
export default {
  name: 'HomeCentral',
  data() {
    return {
      title: 'Welcome',
      user: {
        first_name: 'John',
        last_name: 'Doe',
      },
      showName: true,
      items: [
          { title: 'Item One' },
          { title: 'Item Two' },
          { title: 'Item Three' },
      ],
    };
  },
  methods: {
    greet: function (greeting) {
      alert(greeting);
    },
  },
};
</script>

<style scoped>

</style>

src/App.vue

<template>
  <div id="app">
    <home-central></home-central>
  </div>

</template>

<script>
import HomeCentral from './components/HomeCentral';

export default {
  name: 'App',
  components: {
    HomeCentral,
  },
};
</script>
<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

src/router/index.js

import Vue from 'vue';
import Router from 'vue-router';
import HomeCentral from '../components/HomeCentral';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HomeCentral',
      component: HomeCentral,
    },
  ],
});

My .eslintrc looks as follows :

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    "es6": false
  },
  extends: 'airbnb-base',
  // required to lint *.vue files
  plugins: [
    'html',
    'vue'
  ],
  // check if imports actually resolve
  settings: {
    'import/resolver': {
      webpack: {
        config: 'build/webpack.base.conf.js'
      }
    }
  },
  // add your custom rules here
  rules: {
    // don't require .vue extension when importing
    'import/extensions': ['error', 'always', {
      js: 'never',
      vue: 'never'
    }],
    // disallow reassignment of function parameters
    // disallow parameter object manipulation except for specific exclusions
    'no-param-reassign': ['error', {
      props: true,
      ignorePropertyModificationsFor: [
        'state', // for vuex state
        'acc', // for reduce accumulators
        'e' // for e.returnvalue
      ]
    }],
    // allow optionalDependencies
    'import/no-extraneous-dependencies': ['error', {
      optionalDependencies: ['test/unit/index.js']
    }],
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

My .editorconfig looks like this :

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

But when I run

==> npm run dev

I get the following output :

> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting                                                                        

 WARNING  Compiled with 1 warnings                                                                                                                                                3:01:35 PM


  ⚠  http://eslint.org/docs/rules/func-names        Unexpected unnamed method 'greet'  
  src/components/HomeCentral.vue:33:12
      greet: function (greeting) {
              ^

  ⚠  http://eslint.org/docs/rules/no-alert          Unexpected alert                   
  src/components/HomeCentral.vue:34:7
        alert(greeting);
         ^

  ✘  http://eslint.org/docs/rules/object-shorthand  Expected method shorthand          
  src/components/HomeCentral.vue:33:5
      greet: function (greeting) {
       ^


✘ 3 problems (1 error, 2 warnings)


Errors:
  1  http://eslint.org/docs/rules/object-shorthand

Warnings:
  1  http://eslint.org/docs/rules/no-alert
  1  http://eslint.org/docs/rules/func-names

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

Why is ESlint complaining about "Expected method shorthand" as an error and pointing to the following ES6 linting rule :

http://eslint.org/docs/rules/object-shorthand

Does 2.9.3 version of Vue use ES6 ?

How to silence the VScode editor from linting this semantically correct Vue code :

Answer 1

TSlint error/warning in callback function in 'Angular 10', VS code version 1.53.2 -

Solution -

doc.html(htmlData.innerHTML, {
  callback(data: any): void {
    data.save('angular-demo.pdf');
  },
  x: 10,
  y: 10
});

package.json -

{
    "dependencies": {
        "@angular/core": "~10.1.3",
        ...
      },
    "devDependencies": {
        "@angular/cli": "~10.1.3",
        "@types/node": "^12.11.1",
        "ts-node": "~8.3.0",
        "tslint": "~6.1.0",
        "typescript": "~4.0.2",
        ...
    }
}

Answer 2

Fixed by following PeterVojtek answer at the following :

https://github.com/vuejs-templates/webpack/issues/73

Basically changed the following section on build/webpack.base.conf.js

const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})

to

const createLintingRule = () => ({
})

Also removed 'html' from plugins sections of .eslintrc.js

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    "es6": false
  },
  extends: [
    'airbnb-base',
  ],
  // required to lint *.vue files
  plugins: [
    'vue',
  ],
  // check if imports actually resolve
  settings: {
    'import/resolver': {
      webpack: {
        config: 'build/webpack.base.conf.js'
      }
    }
  },
  // add your custom rules here
  rules: {
    // don't require .vue extension when importing
    'import/extensions': ['error', 'always', {
      js: 'never',
      vue: 'never'
    }],
    // disallow reassignment of function parameters
    // disallow parameter object manipulation except for specific exclusions
    'no-param-reassign': ['error', {
      props: true,
      ignorePropertyModificationsFor: [
        'state', // for vuex state
        'acc', // for reduce accumulators
        'e' // for e.returnvalue
      ]
    }],
    // allow optionalDependencies
    'import/no-extraneous-dependencies': ['error', {
      optionalDependencies: ['test/unit/index.js']
    }],
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}