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

1
votes

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)?

2
nuxt.jseslintvscode-extensionsprettier
I found a small bug with Prettier few days ago. Try to follow this one: github.com/nuxt/nuxt.js/issues/9563 Then, you should totally be able to edit .prettierrc to your liking. – kissu
Also, prefer not relying on VScode extension but rather keep it tool-agnostic aka, Prettier-format through ESlint. That way, everybody in your team only needs ESlint and can use any code editor/IDE they do enjoy! – kissu
@kissu do you have a link for how to format with Prettier through ESLint? I haven't heard of that before. – Susccy
The issue that I've linked you, is using this setting properly. I do format my code via VScode for 3 years already, never installed the Prettier extension, only ESlint. You need some minor settings (in your VScode) to have it work tho. – kissu
@kissu Sorry that I couldn't reply earlier. I have read through your Github issue and your sample repo, but both of those are not exactly what I'm looking for unfortunately. I don't want code style errors to be highlighted by eslint (which is currently handled by eslint-config-prettier) as they will get fixed on save by Prettier anyway. I only want eslint to highlight bad code errors like unused vars. The only reason I want to change my setup is because Prettier has no setting to change the brace style for if-else blocks which is unacceptable for me. – Susccy

2 Answers

0
votes

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.

0
votes

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.