我的代码是对的，但是eslint报错，怎么回事？

Question

I am studying vue render funtion, this is my 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>

The vscode appears some errors:

Then I set javascript.validate.enable to false in settings.json，these errors disappear.

And I run npm run lint to lint code, this error come:

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

How does it come? Because my eslint config is not right? Thank you in advance.

My 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 is

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

Answer 1

It doesn't need script tag when use render funtion to create a component in js file.

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