how to fix pretier/prettier error in nuxtjs

Question

I already try a lot of things and read a topic about prettier/prettier and eslint error when using nuxtjs this is my first time using nuxt but I can't seem to make it work. I try to install npm i eslint-config-prettier but nothing happen, I tried this code too npm run lint -- --fix it fix the code but when I add a new code it still give me the error.

I try this topic but still not solved:

eslint-and-prettier-battle-for-supremacy

add a lint:fix command to package.json

this is the screenshot I got:

This the error message that i got

this is my carousel code:

<template>
  <h1>Test boy</h1>
</template>

<style scoped>
  h1 {
    color: black;
  }
</style>

can someone help me?