Skip to content

Prettier kills non-breaking spaces in JSX #5077

@tdd

Description

@tdd

Prettier 1.14.2
Playground link

--parser babylon

Input:

function OhMyWhitespace() {
  return (
    <Dialog
      actions={actions}
      onRequestClose={onCancel}
      open={open}
      title="Supprimer un objectif"
    >
      <p>
        Supprimer l’objectif « {goal.name} » ?
      </p>
    </Dialog>
  )
}

Output:

function OhMyWhitespace() {
  return (
    <Dialog
      actions={actions}
      onRequestClose={onCancel}
      open={open}
      title="Supprimer un objectif"
    >
      <p>
        Supprimer l’objectif «
        {goal.name}
         » ?
      </p>
    </Dialog>
  );
}

BTW, the output above is what I get on the playground (still unacceptable), but not what I get in VSCode with the Prettier extension in ESLint integration mode, where I get the opening French quote mark glued to the opening JSX expr curly. Perhaps because I use the babel-eslint parser?

Expected behavior:

If I have literal unbreakable whitespace in my contents, it's for a reason. Proper French typesetting, for instance, mandates such whitespace inside French quotation marks, or before double punctuation marks (?!:;).

I used Prettier 1.13.5 so far and all was dandy. Now it strips content from my code! Not just regular ASCII space, no! Special whitespacing too! It changes the resulting display/contents my code produces, which Prettier should never ever do.

Version info

  • VSCode 1.27.1
  • Prettier extension 1.6.1
  • Prettier 1.14.2
  • ESLint 5.5.0
  • ESLint-Config-Prettier 3.0.1
  • ESLint-Plugin-Prettier 2.6.2
  • ESLint-Plugin-React 7.11.1

Prettier config in package.json :

  "eslintConfig": {
    "extends": [
      "standard",
      "prettier",
      "plugin:react/recommended",
      "plugin:jsx-a11y/recommended",
      "plugin:import/errors"
    ],
    "plugins": [
      "prettier",
      "react",
      "jsx-a11y",
      "import"
    ],
    "parser": "babel-eslint",
    "rules": {
      "prettier/prettier": [
        "error",
        {
          "arrowParens": "always",
          "semi": false,
          "singleQuote": true,
          "trailingComma": "es5"
        }
      ],
      "no-irregular-whitespace": 0
    },
    "settings": {
      "react": {
        "version": "16.5.0"
      }
    },
    "env": {
      "browser": true,
      "commonjs": true,
      "es6": true,
      "jest": true,
      "node": true
    }
  },

Metadata

Metadata

Assignees

No one assigned

    Labels

    lang:jsxIssues affecting JSX (not general JS issues)locked-due-to-inactivityPlease open a new issue and fill out the template instead of commenting.priority:highCode is printed in a way that alters the AST, breaks syntax, or is a significant regression. Urgent!

    Type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions