ESLint throw error Expected method shorthand (object shorthand) - vue.js

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

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'
}
}

Answer 2

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",
...
}
}