Problem with the ESlint + prettier configuration

Question

I've been stuck for a few days on a VueMastery tutorial on the "Vue CLI". The tutorial is called "Real World Vue" for those who knows. Two problems occurred to me when I watched the third tutorial. I took the ESlint + Prettier configuration and the tutorial explains to me that I must create a "prettier" file in vs code and enter this code to replace the Double Quotes with Singles Quotes and remove the Semi-Colons:

your text module. exports = { singleQuote: true, semi: false }

Problem, when I try to modify some javascript code, prettier still forces me to put Semi-Colons and replace the ' by ".

(https://i.stack.imgur.com/NY6Oh.png)

I think it has something to do with the ESlint file that I didn't configure, I'm probably wrong but that's about it for the first problem.

Here is the code that is wrote in the .eslintrc.js file:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    parser: "@babel/eslint-parser",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};

For the second problem, I do not know if this is related to the first problem but when I change the name of a file, I receive a long error message on my terminal and on my localhost :

(https://i.stack.imgur.com/01yeX.png)

I dont understand because i changed the file name in the HomeView.vue file to import the good component.

here is the "HelloWorld.vue" file that i changed the name for "EventCard.vue":

<template>
  <div class="event-card"></div>
</template>

<script>
export default {
  name: "EventCard"
  // props: {
  // msg: String,
  // },
}
</script>

<style scoped></style>

And here is the HomeView.vue file:

<template>
  <div class="home">
    <EventCard />
  </div>
</template>

<script>
// @ is an alias to /src
import EventCard from "@/components/EventCard.vue";

export default {
  name: "HomeView",
  components: {
    EventCard,
  },
};
</script>

I am really sorry if my english is not so good and there is any mistakes, i am french so i really try to upgrade vocabulary.

Thank you in advance

Have a good day yall!

i tried to create new project multiple time and changed the component name that i wanted to import in the HomeView.vue file