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

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

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