eslint/prettier adding unwanted space into html tags

Question

I am trying to add configurations to my project so that the code auto formats. I have made some updates to the user settings in VS Code and also installed eslint and prettier.

Now whenever I try to save my code gets changer from this

<div className={style.app}>
  <div className={style.mobileHeader}>
    <div className={style.logoBox}>
    </div>
  </div>
</div>

to

<
    div className = {
      style.app
    } >
    <
    div className = {
      style.mobileHeader
    } >
    <
    div className = {
      style.logoBox
    } >

All this added whitespace is not only unreadable buy my IDE doesn't even register it as JavaScript.

I have tried many different configurations in my .eslintrc.js or .eslintrc.json (I only have one but I have tried both naming conventions). Currently I have deleted all the content in my .eslintrc.json except for the empty brackets {}. I also recently updated my user settings to

{
  "files.autoSave": "afterDelay",
  "window.zoomLevel": 0,
  "git.autofetch": true,
  "explorer.confirmDragAndDrop": false,
  "workbench.startupEditor": "welcomePage",
  "dart.flutterSdkPath": "/Users/trevor/Applications/flutter",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "python.pythonPath": "/usr/local/bin/python3",
  "editor.defaultFormatter": "octref.vetur",
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.validation.template": false,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": true,
  "eslint.validate": [{
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "react",
      "autoFix": true
    },
  ]
}

I am thinking something here must be causing the issue but I can't see what it would be.

I am noticing the only code that is being formatted is the code inside the return statements of my of my React pages. Other code seems uneffected.

Answer 1

Here's what I usually do in VS Code to get clean and working configs of Prettier and ES Lint

Step 1 Install Prettier & Eslint Extensions inside VS Code. (if not installed already)

Step 2 Install prettier, eslint and eslint-config-prettier from npm for the project as dev dependencies. eslint-config-prettier is important to install as it turns off all ESlint rules that are unnecessary or might conflict with Prettier.

npm install -D prettier eslint eslint-config-prettier

Step 3 Turn on Format on Save User Settings.

"editor.formatOnSave": true,

Step 4 Make Sure Prettier requires a config file.

"prettier.requireConfig": true,

Step 5 Make a config file .prettierrc to let editors and other tooling know you are using Prettier and keep it empty to accept default config from prettier. (It works for me 99% of the time)

echo {} > .prettierrc.json

Step 6 Also make sure that ESlint is not taking any formatting responsibilities in your vscode user configuration

"eslint.format.enable": false,

Here is a pretty basic eslintrc.json config that I use while starting new projects.

{
  "extends": [
    "eslint:recommended",
    "prettier",
    "prettier/react"
  ],
  "plugins": [],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": { "jsx": true }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

Documentation References for Prettier, ES Lint and eslint-config-prettier