VueJS and ESlint (prettier) parsing error "adjacent JSX elements must be wrapped in an enclosing parent tag"

Question

I've got a problem with my linter/prettier in VueJS. In every.vue file there is a parsing error (showing up at the <script> or <style> tag after the <template>... </template> )

error Parsing error: Unexpected token <. Remember, adjacent JSX elements must be wrapped in an enclosing parent tag prettier/prettier

I tried configuring the.eslintrc but the error is still showing up

require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  env: {
    es6: true,
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier',
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  rules: {
    'vue/multi-word-component-names': 0,
  },
}

Hope someone has an idea, cause it's driving me crazy...

Answer 1

I solved it by adding extends: [ 'vue', 'standard' ] to the.eslintrc so it now looks like this

require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  env: { es6: true, node: true },
  extends: [
    'vue',
    'standard',
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier',
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  rules: {
    'vue/multi-word-component-names': 0,
  },
}