当我npm运行dev时，在vue-project中出现关于.jsx flie标签的eslint错误

Question

我对vue project.involve eslint，jsx有疑问

我的存储库站点：

https://github.com/1Crazy/TodoList-Vue/tree/eslintAboutJSX，

我不知道发生了这个问题。

我的app.vue文件

<template>
  <div id="app">
    <div id="cover">
      <Header></Header>
      <Todo></Todo>
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import Header from './layout/header.vue'
import Footer from './layout/footer.jsx'
import Todo from './views/todo/todo.vue'

export default {
  components: {
    Header,
    Todo,
    Footer,
  }
}
</script>

当我run npm run dev提示时：解析错误：相邻JSX元素必须包装在一个封闭的标记中。

F:\project\vueprctice\client\app.vue
  11:1  error  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

   9 | </template>
  10 |
> 11 | <script>
     | ^
  12 | import Header from './layout/header.vue'
  13 | import Footer from './layout/footer.jsx'
  14 | import Todo from './views/todo/todo.vue'

F:\project\vueprctice\client\layout\header.vue
  7:1  error  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

   5 | </template>
   6 |
>  7 | <script>
     | ^
   8 | export default {
   9 |
  10 | }

F:\project\vueprctice\client\views\todo\item.vue
  2:14  error  Parsing error: Unexpected token

  1 | <template>
> 2 |   <div :class= "['todo-item',todo.completed ? 'completed' : '']">
    |              ^
  3 |     <input
  4 |       type="checkbox"
  5 |       class="toggle"

F:\project\vueprctice\client\views\todo\tabs.vue
  8:9  error  Parsing error: Unexpected token

   6 |         v-for="state in states"
   7 |         v-bind:key="state"
>  8 |         :class="[state,filter === state ? 'actived' : '']"
     |         ^
   9 |         @click="toggleFilter(state)"
  10 |       >
  11 |         {{showText(state)}}

F:\project\vueprctice\client\views\todo\todo.vue
  8:7  error  Parsing error: Unexpected token

   6 |       autofocus="autofocus"
   7 |       placeholder="接下来要做什么？"
>  8 |       @keyup.enter="addTodo"
     |       ^
   9 |     >
  10 |     <Item
  11 |       :todo="todo"

我希望运行npm run dev时不会出现错误提示。

谢谢！