How do I switch from eslint-config-prettier to prettier-eslint in existing Nuxt.js project?

user_16503617 0
Viewed 867

I scaffolded a Nuxt.js project with create-nuxt-app and chose Typescript + Prettier + ESLint as plugins. It generated a working config but it uses the eslint-config-prettier package which doesn't let you change any of the opinionated Prettier rules. I'd like to use the prettier-eslint package instead so I can overwrite some of those rules. Unfortunately I'm not sure which packages I have to remove and which to add.

This is in my current .eslintrc.js:

extends: [
    '@nuxtjs/eslint-config-typescript',
    'plugin:nuxt/recommended',
    'prettier'
],
plugins: []

And .prettierrc:

{
  "semi": false,
  "singleQuote": true
}

The vs-code-prettier-eslint extension (for auto format in VS Code) says it requires the following packages:

  • eslint
  • prettier
  • prettier-eslint
  • @typescript-eslint/parser (for TS projects)
  • vue-eslint-parser (for Vue projects)

I don't know if I need the 2 optional packages since Nuxt already put some of its own extensions in the ESLint config.

Can you please provide me with the necessary ESLint config (and Prettier config if required)?

prettier nuxt.js vscode-extensions eslint
2 Answers

I solved my problem not by switching to prettier-eslint but by installing prettierx instead. It is "a less opinionated fork of Prettier" with more rule customization options which exactly fit my needs.

My eslint config stayed the same as shown in the question and I continue to use eslint-config-prettier.

I had to add "prettier.prettierPath": "./node_modules/prettierx" to my VS Code settings.json for the Prettier extension to properly use the new library.

user_165036170

On top of all the other comments, you can also check this question where I've explained and linked a Github repo: https://stackoverflow.com/a/68225547/8816585

With those 2, you could achieve something decent IMO. Not sure about the TS setup, but it should not be a problem Prettier-wise.

user_88165850
Related