Search code examples
nuxt.jseslintvscode-extensionsprettier

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

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

Solution

  • 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.