Prettier contradicting itself

Question

I'm a guy who uses tabs instead of 2 spaces. I used create-nuxt-app and selected ESLint + Prettier. Writing it all on VSCode. The pre-built configs were there and it was ok. The problem started when I wanted to use tabs instead of spaces.

My .prettierrc file:

{
  "semi": true,
  "singleQuote": true,
  "useTabs": true,
  "tabWidth": 4
}

And my .eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
  extends: [
    '@nuxtjs',
    'prettier',
    'prettier/vue',
    'plugin:prettier/recommended',
    'plugin:nuxt/recommended',
  ],
  plugins: ['prettier'],
  // add your custom rules here
  rules: {},
}

I also added this to my settings.json in VsCode

(Edited to reflect all settings in VSCode)

{
    "workbench.iconTheme": "material-icon-theme",
    "workbench.colorTheme": "One Dark Pro",
    "explorer.confirmDelete": false,
    "files.autoSave": "afterDelay",
    "editor.fontFamily": "Fira Code",
    "editor.fontLigatures": true,
    "window.zoomLevel": 0,
    "tabnine.experimentalAutoImports": true,
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

After trying to save stuff, it doesn't even fix the Vue linting problems and just goes around with itself. This is just making me rip all my hair out.

Screenshot from the website:

And a picture from VSCode which shows that when I INSERT A TAB, IT THROWS A PRETTIER ERROR THAT MAKES IT CHANGE TO 2 SPACES. I'm losing my mind.

Also I know that Nuxt.js isn't that popular, but there should at least be a single decent configuration out there. Every google search just throws me to Nuxt's generic configuration docs.

HenrijsS HenrijsS · Accepted Answer · 2021-01-09T01:06:25

I'm gonna bang my head against the wall.

You need to reload VSCode and re-run npm run dev every time you change prettier config

Also, for it to format correctly, VSCode needed the following setting:

"editor.defaultFormatter": "esbenp.prettier-vscode",

Just why?

EDIT: Going in to the command list (F1), Developer: Reload window seems to do the thing without closing and opening.

Note: This also closes and reopens all Console/Terminal instances.

Prettier contradicting itself

2 Answers