我的代码是正确的，但是eslint给了我一个错误，它是怎么来的？

Question

我正在学习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，these中将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
    }]
  }
}

Answer 1

使用render函数在js文件中创建组件时，不需要script标签。

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