How to prevent converting 0.00 to 0.0 by prettier eslint automatically

Question

I have a ComponentA and have a requirement to put value to 0.00 by default. However, the prettier eslint will convert it from 0.00 to 0.0 when formatting this component file. How do we prevent this?

export const ComponentA = ({ validate, isRequired }) => (
  <ComponentB
    validate={validate}
    required={isRequired}
    value={0.00}
  />
);

Below are settings in .eslintrc file

  "plugins": ["react", "react-hooks", "prettier", "jsx-a11y", "import"],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:prettier/recommended"
  ],
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ],

`value={"0.00"}`. Numbers have canonical form, and `0.00` is non-canonical form of the number `0.0`. The default conversion of a number to a string will always use the canonical form. The only way to display a non-canonical form is to convert to string yourself. — Amadan, Nov 12 '21 at 00:19

score 2 · Answer 1 · edited Nov 13 '21 at 14:55

2

You can use // prettier-ignore like this:

// prettier-ignore
value={0.00}

If it doesn't work, add // eslint-disable-line like this:

// prettier-ignore
value={0.00} // eslint-disable-line

In order to display them properly, you can use:

<div>
    value: {(Math.round(value * 100) / 100).toFixed(2)}
</div>

edited Nov 13 '21 at 14:55

Adrian Mole

49,934
160
51
83

answered Nov 13 '21 at 13:04

Mohammadamin Sajedian

21
4

How to prevent converting 0.00 to 0.0 by prettier eslint automatically

1 Answers1