eslint/prettier adding unwanted space into html tags

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

I just encountered this same issue. In my case, it was due to the JS-CSS-HTML Formatter VSCode extension. Disabling the extension fixed the issue.

you can try this

1- install these in devDependencies in the package.json

 "devDependencies": {
    "eslint": "^6.6.0",
    "eslint-config-airbnb-base": "^14.1.0",
    "eslint-config-prettier": "^6.10.1",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-prettier": "^3.1.2",
    "prettier": "^2.0.2",
  }

2- add this code to eslint.js

module.exports = {
    env: {
      commonjs: true,
      es6: true,
      node: true
    },
    root: true,
    extends: ["airbnb-base", "prettier"],
    globals: {
      Atomics: "readonly",
      SharedArrayBuffer: "readonly"
    },
    parserOptions: {
      ecmaVersion: 2018
    },
    rules: { 
      "linebreak-style": 0,
      "arrow-body-style": ["error", "as-needed"],
      "prettier/prettier": [
        "error",
        {
          trailingComma: "es5",
          singleQuote: true
        }
      ]
    },
    plugins: ["prettier"]
  };

3- open setting in vs code and search about json

4- click Edit in settings.json and change not important commands

Install these in devDependencies in the package.json:

"devDependencies": {
  "eslint-config-prettier": "^6.10.1",
  "eslint-plugin-prettier": "^3.1.2",
  "prettier": "^2.0.4"
},

Add this to package.json if you are using create-react-app:

"eslintConfig": {
  "extends": [
    "react-app",
    "plugin:prettier/recommended"
  ],
  "ignorePatterns": [
    "node_modules/",
    "build/"
  ]
},

The most important part, In your VSCode settings.json, add those lines:

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"editor.formatOnSave": false,

Now when you save a js, jsx, ts, tsx file eslint should automatically fix any problems including prettier formatting problems.

In my case, the most valuable solution turned out to be ignoring specific parts of the document where I had problems with prettier adding whitespace.

In this example, prettier previously broke the quote into its own line, hence the text had whitespace between the quotes from the <q> tag.

<!-- prettier-ignore-start -->
<q>Make it work, make it right, make it fast.</q>
<!-- prettier-ignore-end -->