Prettier removes single quotes when saving JavaScript files

Question

I was trying to save the following code:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,css,js,jsx,ts,tsx}'],
  theme: {
    extend: {},
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    },
  },
  plugins: [],
};

However, when saving this file, notice that the single quotes in sm, md, lg ... 2xl is removed by Prettier. I am using Prettier to format my code but I hope you could help me with preventing Prettier from removing those single quotes. Thank you!

Answer 1

You can set the --quote-props argument to "preserve":

Respect the input use of quotes in object properties.

(and set --single-quote to true)