Vue.js ESLint抛出错误预期方法速记（对象速记）_Vue.js_Visual Studio Code_Eslint_Eslintrc

Vue.js ESLint抛出错误预期方法速记（对象速记）

vue.js visual-studio-code

Vue.js ESLint抛出错误预期方法速记（对象速记）,vue.js,visual-studio-code,eslint,eslintrc,Vue.js,Visual Studio Code,Eslint,Eslintrc,我将按照本教程中的步骤进行操作：使用VSCode（版本1.22.2）作为我的编辑器我正在运行以下版本 ==> vue --version 2.9.3 使用以下步骤从npm安装Vue/Vue cli： npm安装--全局vue cli 我的VSCode工作区设置（用户设置）如下所示： { "workbench.colorTheme": "Visual Studio Dark", "window.zoomLevel": 1, "workbench.statusBar.visible":

我将按照本教程中的步骤进行操作：

使用VSCode（版本1.22.2）作为我的编辑器

我正在运行以下版本

==> vue --version
2.9.3

使用以下步骤从npm安装Vue/Vue cli：

npm安装--全局vue cli

我的VSCode工作区设置（用户设置）如下所示：

{
"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
    }
]

}

我已安装VSCode的Vetur工具：

我有以下文件： 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>

My.eslintrc如下所示：

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

我的.editorconfig如下所示：

root = true

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

但是当我跑的时候

==>npm运行开发

我得到以下输出：

> 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.

为什么ESlint抱怨“预期方法速记”是一个错误，并指出以下ES6 linting规则：

Vue的2.9.3版本是否使用ES6

如何使VScode编辑器静音，使其无法删除此语义正确的Vue代码：

通过以下彼得沃特克的回答进行修复：

基本上更改了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
  }
})

到

还从.eslintrc.js的插件部分删除了“html”

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

与代码版本1.53.2相比，“Angular 10”中的回调函数中存在TSlint错误/警告-

解决方案-

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

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

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

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