我的代码是正确的，但是eslint给我一个错误，怎么回事？

问题描述

我正在研究vue渲染功能，这是我的index.js：

<script>
export default {
  name:'MyHead',props:{
      level:Number
  },render(h){
    return h('div',[h('h'+this.level,'this is head' + this.level)])
  }
}
</script>

vscode出现一些错误：

然后我在settings.json中将javascript.validate.enable设置为false，这些错误消失了。

然后我运行npm run lint来整理代码，出现此错误：

error: Parsing error: Unexpected token,expected "}"

它怎么来的？因为我的eslint配置不正确？预先谢谢你。

我的devDependencies：

{
    "@vue/cli-plugin-babel": "^3.4.0","@vue/cli-plugin-eslint": "^3.4.0","@vue/cli-service": "^3.4.0","babel-eslint": "^10.0.1","eslint": "^7.6.0","eslint-plugin-vue": "^6.2.2","less": "^3.9.0","less-loader": "^5.0.0","mockjs": "1.0.1-beta3","vue-template-compiler": "^2.5.21"
  }

.eslintrc.js是

module.exports = {
  env: {
    browser: true,es6: true,node: true
  },extends: [
    'eslint:recommended','plugin:vue/essential'
  ],plugins: [
    'vue'
  ],globals: {
    Atomics: 'readonly',SharedArrayBuffer: 'readonly'
  },// NOTE 异步加载路由报错：Parsing error: Unexpected token import
  parser: 'vue-eslint-parser',parserOptions: {
    parser: 'babel-eslint',ecmaVersion: '2018',sourceType: 'module'
  },rules: {
    quotes: [2,'single',{ 'allowTemplateLiterals': true }],semi: [2,'never'],// 强制在关键字前后使用一致的空格 (前后腰需要)
    'keyword-spacing': 2,// 强制一行的最大长度 
    'max-len': [1,100],// 使用 === 替代 == allow-null允许null和undefined==
    'eqeqeq': [2,'allow-null'],// 禁止将变量初始化为 undefined 
    'no-undef-init': 2,// 禁止将 undefined 作为标识符 
    'no-undefined': 0,// 禁止出现未使用过的变量
    'no-unused-vars': [2,{ 'vars': 'all','args': 'none' }],// 要求使用 const 声明那些声明后不再被修改的变量 
    'no-var': 2,'prefer-const': 2,'spaced-comment': [2,'always'],'vue/multiline-html-element-content-newline': 0,'vue/max-attributes-per-line': [2,{
      'singleline': 4,'multiline': {
        'max': 4,'allowFirstLine': true
      }
    }],'vue/html-indent': [2,'tab',{
      'attribute': 4,'baseIndent': 1,'closeBracket': 0,'alignAttributesvertically': true,'ignores': []
    }],// https://eslint.vuejs.org/rules/attributes-order.html
    'vue/attributes-order': [2,{
      'order': [
        'DEFinitioN','LIST_RENDERING','CONDITIONALS','RENDER_MODIFIERS','GLOBAL','UNIQUE','TWO_WAY_BINDING','OTHER_DIRECTIVES','OTHER_ATTR','EVENTS','CONTENT'
      ],'alphabetical': false
    }]
  }
}

解决方法

使用script功能在js文件中创建组件时，不需要render标记。

export default {
  name:'MyHead',props:{
      level:Number
  },render(h){
    return h('div',[h('h'+this.level,'这是标题' + this.level)])
  }
}