skip to Main Content

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!

3

Answers


  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)

    Login or Signup to reply.
  2. In addition to @jsejcksn’s Post, here’s a direction on how to set up a config as you probably are not manually running it from the Shell

    Global Settings (VSCode)

    I don’t use VSCode, but I presume you do:

    • open up your settings as json (Ctrl+Shift+P)
    • place: "prettier.quote-props": "preserve", in the dictonary

    Project Based Settings (anything)

    • Create .prettierrc at your project root
    • Fill it with:
    {
      "quote-props": "preserve",
    }
    

    See:

    Login or Signup to reply.
  3. Yes, by default, Prettier replaces single quotes with double quotes when formatting JavaScript files. This behavior is based on the assumption that using double quotes for strings is more common in JavaScript than single quotes.

    However, you can configure Prettier to use single quotes instead of double quotes if you prefer. You can do this by setting the singleQuote option to true in your Prettier configuration file.

    {
      "singleQuote": true
    }

    Alternatively, you can pass the –single-quote option to Prettier on the command line to enable single quotes for a specific run. Here is the command:

    prettier --single-quote
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search