How to get rid of Delete `··` (prettier/prettier) errors in a Vue JS project

Question

I am trying to get rid of the error in relation to @vue/prettier. I have tried a few things, but it seems to throw up even more errors.

My .eslintrc.js is as follows:

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

I tried "endOfLine":"auto" within the rules part but this then cause more and also 'prettier/prettier': ['error', {endOfLine: 'auto'}]

I have removed tabbed spacing from the bewlow;

    events_filtered_monthsNews: function() {
        return this.news.filter(u => u.monthsNews)
    },

To be formatted like this;

        events_filtered_monthsNews: function() {return this.news.filter(u => u.monthsNews)},

Which removes warnings but now creates even more errors and is totally impractical for working.

Answer 1

endOfLine

If you don't care about line endings, set endOfLine to off:

// .eslintrc.js
module.exports = {
  rules: {
    "prettier/prettier": ["error", { endOfLine: "off" }],
  },
};

tabWidth

Your current text is using 4-space tabs, but Prettier by default expects 2-space tabs.

So this input:

    events_filtered_monthsNews: function() {
        return this.news.filter(u => u.monthsNews)
    },

should be this:

  events_filtered_monthsNews: function() {
    return this.news.filter(u => u.monthsNews)
  },

If you prefer 4-space tabs, configure Prettier's tabWidth to 4:

// .eslintrc.js
module.exports = {
  rules: {
    "prettier/prettier": ["error", { tabWidth: 4 }],
  },
};

Answer 2

If you get an error for endOfLine: "off", following worked for me:

rules: { "prettier/prettier": ["error", { endOfLine: "auto" }] }

Answer 3

I got Some error, "error Delete ? prettier/prettier" in multiple lines on my code, then I resolved this issue by follow these steps below:

Open Your project:

cd "project folder"

This command can fix all errors

npm run lint --fix

Then:

npm run lint

Initially reports errors, but should be fixed once nuxt/create-nuxt-app#100 is released.